@dtdot/lego 2.3.3 → 2.4.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/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.4.0",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {