@dtdot/lego 2.3.3 → 2.5.0

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

@@ -3,7 +3,6 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Status } from '../../theme/theme.types';
 interface BadgeSpanProps {
     variant: BadgeVariant;
-    useHover: boolean;
 }
 export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
 export type BadgeVariant = Status;
@@ -11,7 +10,7 @@ export interface BadgeProps {
     children: React.ReactNode;
     variant: BadgeVariant;
     actionIcon?: IconProp;
-    onAction?: () => void;
+    onAction?: (event: React.MouseEvent) => void;
 }
 declare const Badge: ({ children, variant, actionIcon, onAction }: BadgeProps) => JSX.Element;
 export default Badge;

package/build/components/Badge/Badge.component.js

@@ -5,6 +5,8 @@ import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
 export const BadgeSpan = styled.span `
   padding: 4px 8px;
   border-radius: 2px;
+  display: inline-flex;
+  align-items: center;
 
   background-color: ${(props) => getThemeStatusColour(props.variant, props.theme).main};
   color: ${(props) => getThemeStatusColour(props.variant, props.theme).contrast};
@@ -15,23 +17,31 @@ export const BadgeSpan = styled.span `
   line-height: ${(props) => props.theme.fonts.default.size};
 
   text-transform: lowercase;
-
-  &:hover {
-    background-color: ${(props) => props.useHover && getThemeStatusColour(props.variant, props.theme).hover};
-  }
+`;
+const TextSpan = styled.span `
+  cursor: default;
 `;
 const ActionSpan = styled.span `
-  vertical-align: middle;
-  padding: 3px 7px;
-  margin: -3px -7px -3px 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  margin: -4px -8px -4px 6px;
   cursor: pointer;
   user-select: none;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
 
+  background-color: rgba(0, 0, 0, 0.15);
   font-size: ${(props) => props.theme.fonts.default.size};
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
 `;
 const Badge = ({ children, variant, actionIcon, onAction }) => {
-    return (React.createElement(BadgeSpan, { variant: variant, useHover: !!actionIcon, "data-testid": 'badge' },
-        children,
+    return (React.createElement(BadgeSpan, { variant: variant, "data-testid": 'badge' },
+        React.createElement(TextSpan, null, children),
         actionIcon && (React.createElement(ActionSpan, { onClick: onAction },
             React.createElement(FontAwesomeIcon, { icon: actionIcon })))));
 };

package/build/components/BadgeSelector/BadgeSelector.component.js

@@ -24,6 +24,6 @@ const BadgeSelector = ({ options, value, onChange }) => {
     const handleClick = (_value) => {
         onChange([_value]);
     };
-    return (React.createElement(BadgeSelectorOuter, { "data-testid": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { useHover: false, key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-testid": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
+    return (React.createElement(BadgeSelectorOuter, { "data-testid": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-testid": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
 };
 export default BadgeSelector;

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

@@ -5,10 +5,19 @@ interface FloatingActionButtonProps {
     'icon': IconDefinition;
     'onClick': () => void;
     'variant'?: ColourVariant;
+    'label'?: string;
     'data-testid'?: string;
 }
 declare const FloatingActionButton: {
-    ({ icon, onClick, variant, "data-testid": dataTestId, }: FloatingActionButtonProps): JSX.Element | null;
+    ({ icon, onClick, variant, label, "data-testid": dataTestId, }: FloatingActionButtonProps): JSX.Element | null;
     Provider: ({ children }: import("./_FloatingActionButton.provider").FloatingActionButtonProviderProps) => JSX.Element;
+    Secondary: ({ icon, onClick, variant, label, "data-testid": dataTestId, }: SecondaryFloatingActionButtonProps) => null;
 };
+interface SecondaryFloatingActionButtonProps {
+    'icon': IconDefinition;
+    'onClick': () => void;
+    'variant'?: ColourVariant;
+    'label'?: string;
+    'data-testid'?: string;
+}
 export default FloatingActionButton;

package/build/components/FloatingActionButton/FloatingActionButton.component.js

@@ -3,19 +3,34 @@ import FloatingActionButtonContext from './_FloatingActionButton.context';
 import FloatingActionButtonProvider from './_FloatingActionButton.provider';
 import { v4 } from 'uuid';
 import FloatingActionButtonInternal from './_FloatingActionButton.internal';
-const FloatingActionButton = ({ icon, onClick, variant = 'primary', 'data-testid': dataTestId, }) => {
-    const { contextExists, setButton } = useContext(FloatingActionButtonContext);
+const FloatingActionButton = ({ icon, onClick, variant = 'primary', label, 'data-testid': dataTestId, }) => {
+    const { contextExists, setPrimaryButton } = useContext(FloatingActionButtonContext);
     const id = useMemo(() => v4(), []);
     useEffect(() => {
-        setButton({ id, icon, onClick, variant, dataTestId });
+        setPrimaryButton({ id, icon, onClick, variant, label, dataTestId });
         return () => {
-            setButton(undefined);
+            setPrimaryButton(undefined);
         };
-    }, [icon, onClick, variant, dataTestId, setButton]);
+    }, [icon, onClick, variant, label, dataTestId, setPrimaryButton, id]);
     if (!contextExists) {
-        return React.createElement(FloatingActionButtonInternal, { icon: icon, onClick: onClick, variant: variant, "data-testid": dataTestId });
+        return (React.createElement(FloatingActionButtonInternal, { icon: icon, onClick: onClick, variant: variant, label: label, "data-testid": dataTestId }));
     }
     return null;
 };
+const SecondaryFloatingActionButton = ({ icon, onClick, variant = 'primary', label, 'data-testid': dataTestId, }) => {
+    const { setSecondaryButtons } = useContext(FloatingActionButtonContext);
+    const id = useMemo(() => v4(), []);
+    useEffect(() => {
+        // Register this secondary FAB
+        setSecondaryButtons((prev) => [...prev, { id, icon, onClick, variant, label, dataTestId }]);
+        return () => {
+            // Unregister this secondary FAB
+            setSecondaryButtons((prev) => prev.filter((fab) => fab.id !== id));
+        };
+    }, [icon, onClick, variant, label, dataTestId, setSecondaryButtons, id]);
+    // Secondary FABs always return null - rendered by provider
+    return null;
+};
 FloatingActionButton.Provider = FloatingActionButtonProvider;
+FloatingActionButton.Secondary = SecondaryFloatingActionButton;
 export default FloatingActionButton;

package/build/components/FloatingActionButton/_FloatingActionButton.context.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch, SetStateAction } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
 export interface FabProps {
@@ -6,11 +6,21 @@ export interface FabProps {
     icon: IconDefinition | null;
     onClick: () => void;
     variant?: ColourVariant;
+    label?: string;
+    dataTestId?: string;
+}
+export interface SecondaryFabProps {
+    id: string;
+    icon: IconDefinition;
+    onClick: () => void;
+    variant?: ColourVariant;
+    label?: string;
     dataTestId?: string;
 }
 interface FloatingActionButtonContextProps {
     contextExists: boolean;
-    setButton: (props: FabProps | undefined) => void;
+    setPrimaryButton: Dispatch<SetStateAction<FabProps | undefined>>;
+    setSecondaryButtons: Dispatch<SetStateAction<SecondaryFabProps[]>>;
 }
 declare const FloatingActionButtonContext: import("react").Context<FloatingActionButtonContextProps>;
 export default FloatingActionButtonContext;

package/build/components/FloatingActionButton/_FloatingActionButton.context.js

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 const FloatingActionButtonContext = createContext({
     contextExists: false,
-    setButton: () => { },
+    setPrimaryButton: () => { },
+    setSecondaryButtons: () => { },
 });
 export default FloatingActionButtonContext;

package/build/components/FloatingActionButton/_FloatingActionButton.internal.d.ts

@@ -6,6 +6,18 @@ interface FloatingActionButtonInternalProps {
     'onClick': () => void;
     'variant'?: ColourVariant;
     'data-testid'?: string;
+    'label'?: string;
 }
-declare const FloatingActionButtonInternal: ({ icon, onClick, variant, "data-testid": dataTestId, }: FloatingActionButtonInternalProps) => JSX.Element;
+declare const FloatingActionButtonInternal: (props: FloatingActionButtonInternalProps) => JSX.Element;
+interface MiniFabInternalProps {
+    'icon': IconDefinition;
+    'onClick': () => void;
+    'variant'?: ColourVariant;
+    'label'?: string;
+    'bottom': number;
+    'staggerDelay': number;
+    'data-testid'?: string;
+}
+declare const MiniFabInternal: ({ bottom, staggerDelay, ...rest }: MiniFabInternalProps) => JSX.Element;
 export default FloatingActionButtonInternal;
+export { MiniFabInternal };

package/build/components/FloatingActionButton/_FloatingActionButton.internal.js

@@ -1,17 +1,42 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
 import MinimalMenuContext from '../MinimalMenu/MinimalMenu.context';
 import zIndexConstants from '../../constants/zIndex.constants';
 import FloatingActionButtonContext from './_FloatingActionButton.context';
-const FloatingButton = styled(motion.button) `
+const FAB_SIZES = {
+    primary: {
+        width: 56,
+        height: 56,
+        fontSize: 24,
+        labelOffset: 68,
+        hoverScale: 1.1,
+        tapScale: 0.95,
+    },
+    mini: {
+        width: 40,
+        height: 40,
+        fontSize: 18,
+        labelOffset: 52,
+        hoverScale: 1.15,
+        tapScale: 0.9,
+    },
+};
+const FabContainer = styled(motion.div) `
   position: fixed;
-  bottom: ${(props) => (props.offsetBottom ? '76px' : '20px')};
+  bottom: ${(props) => {
+    if (props.bottom !== undefined)
+        return `${props.bottom}px`;
+    return props.offsetBottom ? '76px' : '20px';
+}};
   right: 20px;
-  width: 56px;
-  height: 56px;
+  z-index: ${zIndexConstants.floatingActionButton};
+`;
+const FabButton = styled(motion.button) `
+  width: ${(props) => FAB_SIZES[props.size].width}px;
+  height: ${(props) => FAB_SIZES[props.size].height}px;
   border-radius: 50%;
   background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
   color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
@@ -21,25 +46,74 @@ const FloatingButton = styled(motion.button) `
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
+  font-size: ${(props) => FAB_SIZES[props.size].fontSize}px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-  z-index: ${zIndexConstants.floatingActionButton};
 
   &:hover {
     background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
   }
 `;
-const FloatingActionButtonInternal = ({ icon, onClick, variant = 'primary', 'data-testid': dataTestId, }) => {
-    const { menuExists, isMobile } = useContext(MinimalMenuContext);
+const FabLabel = styled(motion.div) `
+  position: absolute;
+  right: ${(props) => FAB_SIZES[props.size].labelOffset}px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  padding: 6px 12px;
+  border-radius: 4px;
+
+  background-color: ${(props) => props.theme.colours.tertiary.main};
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: ${(props) => props.theme.shadows.medium};
+`;
+const BaseFab = ({ icon, onClick, variant = 'primary', label, size, bottom, offsetBottom, staggerDelay = 0, 'data-testid': dataTestId, }) => {
+    const [showLabel, setShowLabel] = React.useState(false);
     const { contextExists } = useContext(FloatingActionButtonContext);
+    const sizeConfig = FAB_SIZES[size];
     const variants = {
         hidden: { opacity: 0, scale: 0 },
-        visible: { opacity: 1, scale: 1, transition: { duration: 0.3, delay: 0.2 } },
-        exit: { opacity: 0, scale: 0, transition: { duration: 0.3 } },
-        hover: { scale: 1.1 },
-        tap: { scale: 0.95 },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            transition: {
+                duration: 0.3,
+                delay: staggerDelay,
+            },
+        },
+        exit: {
+            opacity: 0,
+            scale: 0,
+            transition: {
+                duration: 0.3,
+                delay: staggerDelay,
+            },
+        },
+        hover: { scale: sizeConfig.hoverScale },
+        tap: { scale: sizeConfig.tapScale },
     };
-    return (React.createElement(FloatingButton, { key: 'floating-button', initial: contextExists ? 'hidden' : 'visible', animate: 'visible', exit: 'exit', whileHover: 'hover', whileTap: 'tap', offsetBottom: menuExists && isMobile, variants: variants, onClick: onClick, variant: variant, "data-testid": dataTestId },
-        React.createElement(FontAwesomeIcon, { icon: icon })));
+    const labelVariants = {
+        hidden: { opacity: 0, x: 10 },
+        visible: { opacity: 1, x: 0 },
+    };
+    return (React.createElement(FabContainer, { bottom: bottom, offsetBottom: offsetBottom, initial: contextExists ? 'hidden' : 'visible', animate: 'visible', exit: 'exit', variants: variants, onHoverStart: () => setShowLabel(true), onHoverEnd: () => setShowLabel(false) },
+        React.createElement(FabButton, { animate: 'visible', whileHover: 'hover', whileTap: 'tap', variants: variants, onClick: onClick, variant: variant, size: size, "data-testid": dataTestId },
+            React.createElement(FontAwesomeIcon, { icon: icon })),
+        label && (React.createElement(AnimatePresence, null, showLabel && (React.createElement(FabLabel, { size: size, initial: 'hidden', animate: 'visible', exit: 'hidden', variants: labelVariants, transition: { type: 'spring', duration: 0.3 } }, label))))));
+};
+const FloatingActionButtonInternal = (props) => {
+    const { menuExists, isMobile } = useContext(MinimalMenuContext);
+    const { contextExists } = useContext(FloatingActionButtonContext);
+    return (React.createElement(BaseFab, { ...props, size: 'primary', offsetBottom: menuExists && isMobile, staggerDelay: contextExists ? 0.2 : 0 }));
+};
+const MiniFabInternal = ({ bottom, staggerDelay, ...rest }) => {
+    return React.createElement(BaseFab, { ...rest, size: 'mini', bottom: bottom, staggerDelay: staggerDelay });
 };
 export default FloatingActionButtonInternal;
+export { MiniFabInternal };

package/build/components/FloatingActionButton/_FloatingActionButton.provider.js

@@ -1,15 +1,27 @@
-import React, { useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import FloatingActionButtonContext from './_FloatingActionButton.context';
-import FloatingActionButtonInternal from './_FloatingActionButton.internal';
+import FloatingActionButtonInternal, { MiniFabInternal } from './_FloatingActionButton.internal';
+import MinimalMenuContext from '../MinimalMenu/MinimalMenu.context';
 const FloatingActionButtonProvider = ({ children }) => {
-    const [fab, setFab] = useState();
+    const [primaryFab, setPrimaryFab] = useState();
+    const [secondaryFabs, setSecondaryFabs] = useState([]);
+    const { menuExists, isMobile } = useContext(MinimalMenuContext);
     const contextVal = useMemo(() => ({
         contextExists: true,
-        setButton: setFab,
-    }), [setFab]);
+        setPrimaryButton: setPrimaryFab,
+        setSecondaryButtons: setSecondaryFabs,
+    }), []);
     return (React.createElement(FloatingActionButtonContext.Provider, { value: contextVal },
         children,
-        React.createElement(AnimatePresence, null, fab?.icon && (React.createElement(FloatingActionButtonInternal, { key: fab.id, icon: fab.icon, onClick: fab.onClick, variant: fab.variant, "data-testid": fab.dataTestId })))));
+        React.createElement(AnimatePresence, null,
+            primaryFab?.icon && (React.createElement(FloatingActionButtonInternal, { key: primaryFab.id, icon: primaryFab.icon, onClick: primaryFab.onClick, variant: primaryFab.variant, label: primaryFab.label, "data-testid": primaryFab.dataTestId })),
+            secondaryFabs.map((fab, index) => {
+                const offsetBottom = menuExists && isMobile;
+                const baseOffset = offsetBottom ? 76 : 20;
+                const bottom = baseOffset + 56 + 8 + index * (40 + 10);
+                const staggerDelay = 0.2 + 0.05 * (index + 1);
+                return (React.createElement(MiniFabInternal, { key: fab.id, icon: fab.icon, onClick: fab.onClick, variant: fab.variant, label: fab.label, bottom: bottom, staggerDelay: staggerDelay, "data-testid": fab.dataTestId }));
+            }))));
 };
 export default FloatingActionButtonProvider;

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Status } from '../../theme/theme.types';
+export interface TagOption {
+    value: string;
+    label: string;
+    variant: Status;
+}
+export interface ITagSelectProps {
+    'name'?: string;
+    'label'?: string;
+    'description'?: string;
+    'placeholder'?: string;
+    'value'?: string[];
+    'onChange'?: (value: string[]) => void;
+    'data-testid'?: string;
+    'options': TagOption[];
+    'className'?: string;
+    'allowNewTags'?: boolean;
+    'newTagVariant'?: Status;
+}
+declare const TagSelect: (props: ITagSelectProps) => JSX.Element;
+export default TagSelect;

package/build/components/TagSelect/TagSelect.component.js

@@ -0,0 +1,172 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Fragment, useState, useEffect, useCallback, useRef } from 'react';
+import { faChevronDown, faChevronUp, faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
+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 Badge from '../Badge/Badge.component';
+const ControlOuter = styled.div `
+  position: relative;
+`;
+const TagSelectControl = styled.div `
+  ${ControlStyles}
+  cursor: pointer;
+  min-height: 48px;
+  height: auto;
+`;
+const TagsContainer = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-height: 48px;
+`;
+const IconContainer = styled.div `
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+`;
+const PlaceholderText = styled.div `
+  color: ${(props) => getThemeControlColours(props.theme).placeholder};
+  padding: 12px 0;
+`;
+const OptionsContainer = styled.div `
+  position: absolute;
+  width: 100%;
+  background-color: ${(props) => props.theme.colours.controlBackground};
+  z-index: 10000;
+  box-shadow: ${(props) => props.theme.shadows.small};
+  max-height: 270px;
+  overflow-y: auto;
+  margin-top: 4px;
+`;
+const Option = styled.div `
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  background-color: ${(props) => props.selected ? props.theme.colours.controlBorder : props.theme.colours.controlBackgroundDisabled};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  min-height: 36px;
+  padding: 6px 12px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colours.controlBorder};
+  }
+`;
+const NewTagInput = styled.input `
+  border: none;
+  background: transparent;
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  padding: 12px 12px;
+  width: 100%;
+  outline: none;
+
+  &::placeholder {
+    color: ${(props) => getThemeControlColours(props.theme).placeholder};
+  }
+`;
+const NewTagOption = styled.div `
+  background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
+  border-top: 1px solid ${(props) => props.theme.colours.controlBorder};
+`;
+const TagSelect = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [newTagValue, setNewTagValue] = useState('');
+    const controlRef = useRef(null);
+    const optionsRef = useRef(null);
+    const { label, name, description, placeholder, 'value': propsValue, 'data-testid': dataTestId, options, className, allowNewTags = true, newTagVariant = 'info', } = props;
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const value = getValue(propsValue, contextValue) || [];
+    const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
+    const handleGlobalClick = useCallback((event) => {
+        if (!optionsRef.current?.contains(event.target) && !controlRef.current?.contains(event.target)) {
+            setIsOpen(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('mouseup', handleGlobalClick);
+        }
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalClick);
+        };
+    }, [handleGlobalClick, isOpen]);
+    const handleToggleTag = (tagValue) => {
+        const newValue = value.includes(tagValue) ? value.filter((v) => v !== tagValue) : [...value, tagValue];
+        if (contextOnChange) {
+            contextOnChange(newValue);
+        }
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+    };
+    const handleRemoveTag = (tagValue, e) => {
+        e.stopPropagation();
+        handleToggleTag(tagValue);
+    };
+    const handleAddNewTag = () => {
+        if (!newTagValue.trim() || !allowNewTags)
+            return;
+        const trimmedValue = newTagValue.trim();
+        if (value.includes(trimmedValue)) {
+            setNewTagValue('');
+            return;
+        }
+        const newValue = [...value, trimmedValue];
+        if (contextOnChange) {
+            contextOnChange(newValue);
+        }
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+        setNewTagValue('');
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddNewTag();
+        }
+    };
+    const getTagOption = (tagValue) => {
+        return options.find((o) => o.value === tagValue);
+    };
+    const selectedTags = value
+        .map((v) => getTagOption(v) || { value: v, label: v, variant: newTagVariant })
+        .filter(Boolean);
+    return (React.createElement("div", { className: className },
+        label && React.createElement(ControlLabel, { htmlFor: name }, label),
+        React.createElement(ControlOuter, null,
+            React.createElement(TagSelectControl, { ref: controlRef, "data-testid": dataTestId, onClick: () => setIsOpen(!isOpen) },
+                selectedTags.length === 0 && placeholder && React.createElement(PlaceholderText, null, placeholder),
+                selectedTags.length > 0 && (React.createElement(TagsContainer, null, selectedTags.map((tag) => (React.createElement("span", { key: tag.value, onClick: (e) => e.stopPropagation() },
+                    React.createElement(Badge, { variant: tag.variant, actionIcon: faTimes, onAction: (e) => handleRemoveTag(tag.value, e) }, tag.label)))))),
+                React.createElement(IconContainer, null,
+                    React.createElement(FontAwesomeIcon, { icon: isOpen ? faChevronUp : faChevronDown }))),
+            isOpen && (React.createElement(OptionsContainer, { ref: optionsRef },
+                options.map((option) => {
+                    const isSelected = value.includes(option.value);
+                    return (React.createElement(Option, { key: option.value, "data-testid": `option-${option.value}`, selected: isSelected, onClick: () => handleToggleTag(option.value) },
+                        React.createElement(Badge, { variant: option.variant }, option.label)));
+                }),
+                allowNewTags && (React.createElement(NewTagOption, null,
+                    React.createElement(NewTagInput, { placeholder: 'Add new tag...', value: newTagValue, onChange: (e) => setNewTagValue(e.target.value), onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation() }),
+                    newTagValue && (React.createElement(Option, { selected: false, onClick: handleAddNewTag },
+                        React.createElement(Badge, { variant: newTagVariant },
+                            React.createElement(FontAwesomeIcon, { icon: faPlus }),
+                            " Add \"",
+                            newTagValue,
+                            "\"")))))))),
+        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(Fragment, { key: index },
+            index !== 0 && React.createElement("br", null),
+            line)))))));
+};
+export default TagSelect;

package/build/index.d.ts

@@ -35,6 +35,7 @@ export { default as ProfileImage } from './components/ProfileImage/ProfileImage.
 export { default as QrCode } from './components/QrCode/QrCode.component';
 export { default as Select } from './components/Select/Select.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
+export { default as TagSelect } from './components/TagSelect/TagSelect.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
 export { default as Swimlane } from './components/Swimlane/Swimlane.component';
 export { default as Table } from './components/Table/Table.component';

package/build/index.js

@@ -35,6 +35,7 @@ export { default as ProfileImage } from './components/ProfileImage/ProfileImage.
 export { default as QrCode } from './components/QrCode/QrCode.component';
 export { default as Select } from './components/Select/Select.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
+export { default as TagSelect } from './components/TagSelect/TagSelect.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
 export { default as Swimlane } from './components/Swimlane/Swimlane.component';
 export { default as Table } from './components/Table/Table.component';

package/package.json

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