@decisiv/ui-components 2.0.1-alpha.210 → 2.0.1-alpha.212

package/lib/atoms/OptionsList/Option/styles.d.ts

@@ -13,5 +13,5 @@ export declare const StyledLabel: import("styled-components").StyledComponent<"p
 export declare const StyledLabelDetails: import("styled-components").StyledComponent<"p", any, import("../../../components/Typography").PProps & {
     as: string;
     shade: number;
-}, "shade" | "as">;
+}, "as" | "shade">;
 //# sourceMappingURL=styles.d.ts.map

package/lib/components/Badge/types.d.ts

@@ -14,7 +14,7 @@ export interface BadgeProps {
 }
 declare function variantValidator(props: BadgeProps, propName: 'variant', componentName: 'Badge'): Error | null;
 export declare const propTypes: {
-    color: PropTypes.Requireable<"information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
+    color: PropTypes.Requireable<"danger" | "success" | "information" | "warning" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
     icon: PropTypes.Validator<PropTypes.ReactComponentLike>;
     size: PropTypes.Requireable<string>;
     variant: typeof variantValidator;

package/lib/components/CheckboxGroup/index.d.ts

@@ -4,7 +4,7 @@ import { Props as GroupProps, ItemProps as BaseItemProps } from '../../atoms/Boo
 export declare type Props = Omit<GroupProps, 'itemRenderer'>;
 export declare type ItemProps = BaseItemProps;
 declare const CheckboxGroup: {
-    (props: Pick<GroupProps, "size" | "onChange" | "vertical" | "disabled" | "readOnly" | "status" | "items" | "warningMessage">): JSX.Element;
+    (props: Pick<GroupProps, "size" | "onChange" | "vertical" | "disabled" | "readOnly" | "status" | "warningMessage" | "items">): JSX.Element;
     propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         items: PropTypes.Requireable<(PropTypes.InferProps<{}> | null | undefined)[]>;

package/lib/components/List/ContentContainer/index.d.ts

@@ -8,11 +8,13 @@ export interface ContentContainerProps<T extends ValueType> {
     defaultViewState?: ListViewState;
     Component?: ComponentType<ExternalComponentProps<T>>;
     value?: T;
+    onSubmit?: (value?: T) => void;
 }
-export default function ContentContainer<T extends ValueType = string>({ defaultViewState, Component, value, }: ContentContainerProps<T>): JSX.Element;
+export default function ContentContainer<T extends ValueType = string>({ defaultViewState, Component, value, onSubmit, }: ContentContainerProps<T>): JSX.Element;
 export declare function useListItemContent(): {
     viewState: "form" | "view";
     toggle: () => void;
+    onSubmit?: ((value?: string | number | boolean | Record<string, unknown> | undefined) => void) | undefined;
     size: "small" | "medium";
 };
 export {};

package/lib/components/List/ContentContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ContentContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,aAAa,EAEd,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAIzC,oBAAY,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5E,UAAU,sBAAsB,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,CAC3D,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,CAAC,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,SAAS;IACxD,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,CAAC,CAAC;CACX;AAYD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,EACrE,gBAAgB,EAChB,SAAmE,EACnE,KAAK,GACN,EAAE,qBAAqB,CAAC,CAAC,CAAC,eA4B1B;AAED,wBAAgB,kBAAkB;;;;EAKjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ContentContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,aAAa,EAEd,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,oBAAY,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5E,UAAU,sBAAsB,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,CAC3D,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,CAAC,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,SAAS;IACxD,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAChC;AAaD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,EACrE,gBAAgB,EAChB,SAAmE,EACnE,KAAK,EACL,QAAQ,GACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,eA8B1B;AAED,wBAAgB,kBAAkB;;;;;EAKjC"}

package/lib/components/List/ContentContainer/index.js

@@ -45,7 +45,8 @@ function ContentContainer(_ref) {
   var defaultViewState = _ref.defaultViewState,
       _ref$Component = _ref.Component,
       Component = _ref$Component === void 0 ? _DefaultCell.default : _ref$Component,
-      value = _ref.value;
+      value = _ref.value,
+      onSubmit = _ref.onSubmit;
 
   var _useState = (0, _react.useState)(defaultViewState || 'view'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -58,14 +59,17 @@ function ContentContainer(_ref) {
       return _constants.VIEW_STATES.VIEW;
     });
   }, []);
-  var values = (0, _react.useMemo)(function () {
-    return {
-      viewState: viewState,
-      toggle: toggle
-    };
-  }, [viewState, toggle]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return (// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+      {
+        viewState: viewState,
+        toggle: toggle,
+        onSubmit: onSubmit
+      }
+    );
+  }, [viewState, toggle, onSubmit]);
   return _react.default.createElement(ContentCellProvider.Provider, {
-    value: values
+    value: contextValue
   }, _react.default.createElement(_BaseCell.default, null, _react.default.createElement(Component, {
     value: value
   })));

package/lib/components/List/DefaultCell/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-interface DefaultCellProps {
+export interface DefaultCellProps {
     value?: string;
 }
 export default function DefaultCell({ value }: DefaultCellProps): JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/List/DefaultCell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/DefaultCell/index.tsx"],"names":[],"mappings":";AAIA,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,eAM9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/DefaultCell/index.tsx"],"names":[],"mappings":";AAIA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,eAM9D"}

package/lib/components/List/EditableCell/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DefaultCellProps } from '../DefaultCell';
+import { EditableCellAlignment, ListViewState } from '../types';
+import { ButtonProps } from '../../Button';
+interface EditableCellProps extends Partial<DefaultCellProps>, Pick<ButtonProps, 'icon' | 'text'> {
+    onClick?: (viewState: ListViewState) => void;
+    align?: EditableCellAlignment;
+    buttonIcon: ButtonProps['icon'];
+    buttonText: ButtonProps['text'];
+}
+export default function EditableCell({ align, value, onClick, buttonText, buttonIcon, }: EditableCellProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/List/EditableCell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/EditableCell/index.tsx"],"names":[],"mappings":";AAEA,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGhE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,UAAU,iBACR,SAAQ,OAAO,CAAC,gBAAgB,CAAC,EAC/B,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAgB,EAChB,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,eAoBnB"}

package/lib/components/List/EditableCell/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EditableCell;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DefaultCell = _interopRequireDefault(require("../DefaultCell"));
+
+var _ = require("../..");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function EditableCell(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'inline' : _ref$align,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      buttonText = _ref.buttonText,
+      buttonIcon = _ref.buttonIcon;
+
+  var _useListItemContent = (0, _.useListItemContent)(),
+      viewState = _useListItemContent.viewState,
+      size = _useListItemContent.size;
+
+  var handleOnClick = (0, _react.useCallback)(function () {
+    onClick && onClick(viewState);
+  }, [onClick, viewState]);
+  return _react.default.createElement(_styles.Container, {
+    align: align
+  }, value && _react.default.createElement(_DefaultCell.default, {
+    value: value
+  }), _react.default.createElement(_styles.Button, {
+    variant: "ghost",
+    onClick: handleOnClick,
+    size: size,
+    text: buttonText,
+    icon: buttonIcon,
+    align: align
+  }));
+}

package/lib/components/List/EditableCell/styles.d.ts

@@ -0,0 +1,204 @@
+/// <reference types="react" />
+import { EditableCellAlignment } from '../types';
+import { ButtonProps } from '../../Button';
+export declare const Container: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & {
+    align: "bottom" | "right" | "inline";
+}, never>;
+interface AlignableButton extends ButtonProps {
+    align: EditableCellAlignment;
+}
+export declare const Button: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, AlignableButton, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/List/EditableCell/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/List/EditableCell/styles.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAuB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAc3D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAKrB,CAAC;AAYF,UAAU,eAAgB,SAAQ,WAAW;IAC3C,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,kJAElB,CAAC"}

package/lib/components/List/EditableCell/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = exports.Container = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _Flex = _interopRequireDefault(require("../../Flex"));
+
+var _Button = _interopRequireDefault(require("../../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+var containerAlignmentsStyles = {
+  inline: (0, _styledComponents.css)(["flex-direction:row;"]),
+  right: (0, _styledComponents.css)(["flex-direction:row;"]),
+  bottom: (0, _styledComponents.css)(["flex-direction:column;"])
+};
+var Container = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1tnde8x-0"
+})(["gap:", ";text-align:left;", ";"], (0, _rem.default)(_designTokens.spacing.base * 0.5), function (_ref) {
+  var align = _ref.align;
+  return containerAlignmentsStyles[align];
+});
+exports.Container = Container;
+var buttonAlignmentsStyles = {
+  inline: (0, _styledComponents.css)(["height:auto;"]),
+  right: (0, _styledComponents.css)([""]),
+  bottom: (0, _styledComponents.css)(["align-self:flex-start;"])
+};
+var Button = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "styles__Button",
+  componentId: "sc-1tnde8x-1"
+})(["", ""], function (_ref2) {
+  var align = _ref2.align;
+  return buttonAlignmentsStyles[align];
+});
+exports.Button = Button;

package/lib/components/List/ListItem/index.d.ts

@@ -4,5 +4,5 @@ import { LabelContainerProps } from '../LabelContainer';
 export interface ListItemProps<T extends ValueType> extends Omit<LabelContainerProps, 'onHistoryClick'>, ContentContainerProps<T> {
     onHistoryClick?: (value?: T) => void;
 }
-export default function ListItem<T extends ValueType = string>({ label, onHistoryClick, historyLabel, tooltipText, Component, defaultViewState, value, }: ListItemProps<T>): JSX.Element;
+export default function ListItem<T extends ValueType = string>({ label, onHistoryClick, historyLabel, tooltipText, Component, defaultViewState, value, onSubmit, }: ListItemProps<T>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/List/ListItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListItem/index.tsx"],"names":[],"mappings":";AAEA,OAAyB,EACvB,qBAAqB,EACrB,SAAS,EACV,MAAM,qBAAqB,CAAC;AAC7B,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,CAChD,SAAQ,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACjD,qBAAqB,CAAC,CAAC,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,EAC7D,KAAK,EACL,cAAc,EACd,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,KAAK,GACN,EAAE,aAAa,CAAC,CAAC,CAAC,eAoBlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListItem/index.tsx"],"names":[],"mappings":";AAEA,OAAyB,EACvB,qBAAqB,EACrB,SAAS,EACV,MAAM,qBAAqB,CAAC;AAC7B,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,CAChD,SAAQ,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACjD,qBAAqB,CAAC,CAAC,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,EAC7D,KAAK,EACL,cAAc,EACd,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,aAAa,CAAC,CAAC,CAAC,eAqBlB"}

package/lib/components/List/ListItem/index.js

@@ -24,7 +24,8 @@ function ListItem(_ref) {
       tooltipText = _ref.tooltipText,
       Component = _ref.Component,
       defaultViewState = _ref.defaultViewState,
-      value = _ref.value;
+      value = _ref.value,
+      onSubmit = _ref.onSubmit;
   var handleOnDotClick = (0, _react.useCallback)(function () {
     if (onHistoryClick) onHistoryClick(value);
   }, [onHistoryClick, value]);
@@ -36,6 +37,7 @@ function ListItem(_ref) {
   }), _react.default.createElement(_ContentContainer.default, {
     Component: Component,
     defaultViewState: defaultViewState,
-    value: value
+    value: value,
+    onSubmit: onSubmit
   }));
 }

package/lib/components/List/constants.d.ts

@@ -11,4 +11,9 @@ export declare const VIEW_STATES: {
     readonly FORM: "form";
     readonly VIEW: "view";
 };
+export declare const EDITABLE_CELL_ALIGNMENTS: {
+    readonly RIGHT: "right";
+    readonly BOTTOM: "bottom";
+    readonly INLINE: "inline";
+};
 //# sourceMappingURL=constants.d.ts.map

package/lib/components/List/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/List/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;CAIX,CAAC;AAEX,eAAO,MAAM,KAAK;;;CAGR,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/List/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;CAIX,CAAC;AAEX,eAAO,MAAM,KAAK;;;CAGR,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;CAI3B,CAAC"}

package/lib/components/List/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIEW_STATES = exports.SIZES = exports.VARIANTS = void 0;
+exports.EDITABLE_CELL_ALIGNMENTS = exports.VIEW_STATES = exports.SIZES = exports.VARIANTS = void 0;
 var VARIANTS = {
   ZEBRA: 'zebra',
   WHITE: 'white',
@@ -19,4 +19,10 @@ var VIEW_STATES = {
   FORM: 'form',
   VIEW: 'view'
 };
-exports.VIEW_STATES = VIEW_STATES;
+exports.VIEW_STATES = VIEW_STATES;
+var EDITABLE_CELL_ALIGNMENTS = {
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  INLINE: 'inline'
+};
+exports.EDITABLE_CELL_ALIGNMENTS = EDITABLE_CELL_ALIGNMENTS;

package/lib/components/List/index.d.ts

@@ -7,6 +7,7 @@ declare function List({ variant, size, children, }: ListProps): JSX.Element;
 declare namespace List {
     var BaseCell: typeof import("./BaseCell").default;
     var DefaultCell: typeof import("./DefaultCell").default;
+    var EditableCell: typeof import("./EditableCell").default;
     var Item: typeof ListItem;
 }
 export default List;

package/lib/components/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,SAAS,EAAoB,MAAM,SAAS,CAAC;AAKtD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAKlC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,eAAO,MAAM,WAAW,kDAEtB,CAAC;AAEH,iBAAwB,IAAI,CAAC,EAC3B,OAAwB,EACxB,IAAmB,EACnB,QAAQ,GACT,EAAE,SAAS,eAeX;kBAnBuB,IAAI;;;;;eAAJ,IAAI;AAqB5B,eAAO,MAAM,OAAO,yCAEnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,SAAS,EAAoB,MAAM,SAAS,CAAC;AAKtD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAMlC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,eAAO,MAAM,WAAW,kDAEtB,CAAC;AAEH,iBAAwB,IAAI,CAAC,EAC3B,OAAwB,EACxB,IAAmB,EACnB,QAAQ,GACT,EAAE,SAAS,eAeX;kBAnBuB,IAAI;;;;;;eAAJ,IAAI;AAqB5B,eAAO,MAAM,OAAO,yCAEnB,CAAC"}

package/lib/components/List/index.js

@@ -24,6 +24,8 @@ var _styles = require("./styles");
 
 var _DefaultCell = _interopRequireDefault(require("./DefaultCell"));
 
+var _EditableCell = _interopRequireDefault(require("./EditableCell"));
+
 var _ContentContainer = require("./ContentContainer");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -61,4 +63,5 @@ var useList = function useList() {
 exports.useList = useList;
 List.BaseCell = _BaseCell.default;
 List.DefaultCell = _DefaultCell.default;
+List.EditableCell = _EditableCell.default;
 List.Item = _ListItem.default;

package/lib/components/List/types.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { FlexProps } from '../../modifiers';
 import { ValueOf } from '../../types';
-import { VARIANTS, SIZES, VIEW_STATES } from './constants';
+import { VARIANTS, SIZES, VIEW_STATES, EDITABLE_CELL_ALIGNMENTS } from './constants';
 export declare type ListVariant = ValueOf<typeof VARIANTS>;
 export declare type ListSize = ValueOf<typeof SIZES>;
 export declare type ListViewState = ValueOf<typeof VIEW_STATES>;
+export declare type EditableCellAlignment = ValueOf<typeof EDITABLE_CELL_ALIGNMENTS>;
 export interface ListProps extends Omit<FlexProps, 'size'> {
     variant?: ListVariant;
     size?: ListSize;

package/lib/components/List/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE3D,oBAAY,WAAW,GAAG,OAAO,CAAC,OAAO,QAAQ,CAAC,CAAC;AACnD,oBAAY,QAAQ,GAAG,OAAO,CAAC,OAAO,KAAK,CAAC,CAAC;AAC7C,oBAAY,aAAa,GAAG,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC;AAExD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IACxD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,oBAAY,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,wBAAwB,EACzB,MAAM,aAAa,CAAC;AAErB,oBAAY,WAAW,GAAG,OAAO,CAAC,OAAO,QAAQ,CAAC,CAAC;AACnD,oBAAY,QAAQ,GAAG,OAAO,CAAC,OAAO,KAAK,CAAC,CAAC;AAC7C,oBAAY,aAAa,GAAG,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC;AACxD,oBAAY,qBAAqB,GAAG,OAAO,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAE7E,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IACxD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,oBAAY,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC"}

package/lib/components/Popover/Arrow.d.ts

@@ -1,9 +1,9 @@
 import { ArrowProps } from './types';
 export declare const arrowColors: {
-    information: import("@decisiv/design-tokens/lib/color").Color;
+    danger: import("@decisiv/design-tokens/lib/color").Color;
     success: import("@decisiv/design-tokens/lib/color").Color;
+    information: import("@decisiv/design-tokens/lib/color").Color;
     warning: import("@decisiv/design-tokens/lib/color").Color;
-    danger: import("@decisiv/design-tokens/lib/color").Color;
     berryCrisp: import("@decisiv/design-tokens/lib/color").Color;
     koolaidCake: import("@decisiv/design-tokens/lib/color").Color;
     cookieMonster: import("@decisiv/design-tokens/lib/color").Color;

package/lib/components/Tag/propTypes.d.ts

@@ -7,7 +7,7 @@ export declare const propTypes: {
     actionAttributes: any;
     actionIntent: PropTypes.Requireable<string>;
     actionRef: PropTypes.Requireable<any>;
-    color: PropTypes.Requireable<"information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
+    color: PropTypes.Requireable<"danger" | "success" | "information" | "warning" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
     variant: PropTypes.Requireable<string>;
     palette: PropTypes.Requireable<string>;
     size: PropTypes.Requireable<string>;

package/lib/components/TagInput/index.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { BaseInputFieldProps } from '../../atoms/InputField';
+import { DropdownListItem } from '../DropdownList/types';
 export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
     hiddenLabel?: boolean;
     defaultTags?: string[];
     tags?: string[];
+    options: DropdownListItem[];
     onChange?: (value: string[]) => void;
+    onSelect?: (item: string[]) => void;
+    zIndex?: number;
 }
-export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, ...props }: TagInputProps): JSX.Element;
+export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, options, onSelect, zIndex, ...props }: TagInputProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/TagInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAeA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMzE,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,eAqMf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAoBA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKzD,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,eA2Sf"}

package/lib/components/TagInput/index.js

@@ -9,18 +9,26 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _breakpointObserver = require("@decisiv/breakpoint-observer");
+
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
 var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
 
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
+var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
+
 var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
 
 var _Tag = _interopRequireDefault(require("../Tag"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _DropdownList = _interopRequireDefault(require("../DropdownList"));
+
 var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,9 +66,13 @@ function TagInput(_ref) {
       readOnly = _ref.readOnly,
       label = _ref.label,
       hiddenLabel = _ref.hiddenLabel,
-      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel"]);
+      options = _ref.options,
+      onSelect = _ref.onSelect,
+      zIndex = _ref.zIndex,
+      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel", "options", "onSelect", "zIndex"]);
 
   var clearButtonRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
@@ -73,6 +85,16 @@ function TagInput(_ref) {
       innerTags = _useState4[0],
       setInnerTags = _useState4[1];
 
+  var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
+      _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
+      inputContainerRef = _useBreakpointObserve2[0],
+      dimensions = _useBreakpointObserve2[1].dimensions;
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isPopoverVisible = _useState6[0],
+      setIsPopoverVisible = _useState6[1];
+
   var translate = (0, _useTranslations.default)();
   var isControlled = (0, _react.useMemo)(function () {
     return !!tags;
@@ -85,6 +107,9 @@ function TagInput(_ref) {
     if (!onChange) return;
     onChange(value);
   }, [onChange]);
+  var hasOptions = (0, _react.useMemo)(function () {
+    return !(0, _isEmpty.default)(options);
+  }, [options]);
   var handleAddTag = (0, _react.useCallback)(function (rawString) {
     var text = rawString.replace(/\s+/g, ' ').trim();
     if (!text || tagsToRender.includes(text)) return;
@@ -114,21 +139,26 @@ function TagInput(_ref) {
     });
   }, [isControlled, handleNotifyChange, tags]);
   var handleRemoveTag = (0, _react.useCallback)(function (text) {
-    if (isControlled) {
-      handleNotifyChange(tags.filter(function (tag) {
-        return tag !== text;
-      }));
-      return;
-    }
-
-    setInnerTags(function (oldState) {
-      var newState = oldState.filter(function (tag) {
-        return tag !== text;
+    return function (e) {
+      if (hasOptions) e.stopPropagation();
+
+      if (isControlled) {
+        handleNotifyChange(_toConsumableArray(tags).filter(function (tag) {
+          return tag !== text;
+        }));
+        return;
+      }
+
+      setInnerTags(function (oldState) {
+        var newState = _toConsumableArray(oldState).filter(function (tag) {
+          return tag !== text;
+        });
+
+        handleNotifyChange(newState);
+        return newState;
       });
-      handleNotifyChange(newState);
-      return newState;
-    });
-  }, [isControlled, handleNotifyChange, tags]);
+    };
+  }, [isControlled, handleNotifyChange, tags, hasOptions]);
   var handleOnKeyUp = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     var text = e.target.value;
@@ -157,19 +187,94 @@ function TagInput(_ref) {
     e.target.value = '';
     setInputVisible(false);
   }, [handleAddTag]);
-  var handleOnClearButtonClick = (0, _react.useCallback)(function () {
+  var handleOnClearButtonClick = (0, _react.useCallback)(function (e) {
+    if (hasOptions) e.stopPropagation();
+
     if (inputRef.current) {
       inputRef.current.value = '';
     }
-  }, []);
-  return _react.default.createElement(_styles.Wrapper, null, _react.default.createElement(_InputField.default, _extends({
+  }, [hasOptions]);
+  var handleOnSelect = (0, _react.useCallback)(function (selection) {
+    var allSelection = Array.isArray(selection) ? selection : [selection];
+
+    if (onSelect) {
+      onSelect(allSelection);
+    }
+
+    if (isControlled) {
+      handleNotifyChange([].concat(_toConsumableArray(tags), _toConsumableArray(allSelection)));
+      setIsPopoverVisible(false);
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = [].concat(_toConsumableArray(oldState), _toConsumableArray(allSelection));
+      handleNotifyChange(newState);
+      return newState;
+    });
+    setIsPopoverVisible(false);
+  }, [handleNotifyChange, tags, isControlled, options]);
+  /**
+   * Toggle the dropdown list.
+   */
+
+  var toggleIsPopoverVisible = (0, _react.useCallback)(function () {
+    setIsPopoverVisible(!isPopoverVisible);
+  }, [isPopoverVisible]);
+  /**
+   * Clicking anywhere within the InputField component (except the clear button) should toggle
+   * the dropdown list.
+   */
+
+  var handleContainerClick = (0, _react.useCallback)(function () {
+    toggleIsPopoverVisible();
+  }, [toggleIsPopoverVisible]); // When the dropdown is visible, clicking anywhere outside of the dropdown should close it.
+
+  var handleClickOutsideList = (0, _react.useCallback)(function () {
+    if (isPopoverVisible) {
+      setIsPopoverVisible(false);
+    }
+  }, [isPopoverVisible]);
+  (0, _react.useEffect)(function () {
+    if (isPopoverVisible) {
+      // Delay to ensure DOM updates are complete
+      var timer = setTimeout(function () {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
+      return function () {
+        return clearTimeout(timer);
+      }; // Cleanup the timer on unmount or state change
+    }
+
+    return function () {};
+  }, [isPopoverVisible, inputRef]);
+  (0, _useClickOutside.default)([listRef], handleClickOutsideList, {
+    capture: true
+  });
+  return _react.default.createElement(_styles.Wrapper, null, hasOptions && _react.default.createElement(_DropdownList.default, {
+    name: "".concat(label, "-dropdown-list"),
+    items: options,
+    borderRadius: "0",
+    minWidth: "".concat((dimensions.width || 0) + 1, "px"),
+    maxWidth: "unset",
+    showArrow: false,
+    target: inputContainerRef,
+    onChange: handleOnSelect,
+    listRef: listRef,
+    visible: isPopoverVisible,
+    zIndex: zIndex
+  }), _react.default.createElement(_InputField.default, _extends({
     ref: inputRef,
     onFocus: handleFocus,
     onBlur: handleBlur,
     disabled: disabled,
     readOnly: readOnly,
     label: label,
-    hideLabel: hiddenLabel
+    hideLabel: hiddenLabel,
+    inputContainerRef: inputContainerRef,
+    onClick: handleContainerClick
   }, props), function (innerProps) {
     return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
       return _react.default.createElement(_Tag.default, {
@@ -178,9 +283,7 @@ function TagInput(_ref) {
         text: tag,
         palette: "pastel",
         color: isDisabled ? 'licoriceMousse' : 'information',
-        action: isDisabled ? undefined : function () {
-          return handleRemoveTag(tag);
-        },
+        action: isDisabled ? undefined : handleRemoveTag(tag),
         actionIntent: "danger",
         actionAttributes: {
           'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {

package/lib/components/TagInput/index.test.js

@@ -4,15 +4,53 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
 var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-var onChange = jest.fn();
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var onChange = jest.fn(); // Prevent warnings about missing document methods (createRange, etc.)
+
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+};
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: wrapper
+  }));
+};
+
 afterEach(function () {
   onChange.mockClear();
 });
@@ -24,7 +62,7 @@ describe('TagInput', function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _render = (0, _react2.render)(_react.default.createElement(_.default, {
+            _render = render(_react.default.createElement(_.default, {
               tags: [],
               hideLabel: false,
               label: "My Tag Input",
@@ -46,7 +84,7 @@ describe('TagInput', function () {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+            _render2 = render(_react.default.createElement(_.default, {
               tags: [],
               hideLabel: false,
               label: "My Tag Input",
@@ -69,7 +107,7 @@ describe('TagInput', function () {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
-            _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+            _render3 = render(_react.default.createElement(_.default, {
               tags: [],
               hideLabel: false,
               label: "My Tag Input",
@@ -93,7 +131,7 @@ describe('TagInput', function () {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+              _render4 = render(_react.default.createElement(_.default, {
                 defaultTags: ['Foo tag'],
                 label: "My Tag Input"
               })), getByText = _render4.getByText;
@@ -113,7 +151,7 @@ describe('TagInput', function () {
         while (1) {
           switch (_context5.prev = _context5.next) {
             case 0:
-              _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+              _render5 = render(_react.default.createElement(_.default, {
                 defaultTags: ['My tag'],
                 label: "My Tag Input"
               })), getByLabelText = _render5.getByLabelText;
@@ -137,7 +175,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context6.prev = _context6.next) {
                     case 0:
-                      _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render6 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input"
@@ -169,7 +207,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context7.prev = _context7.next) {
                     case 0:
-                      _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render7 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -204,7 +242,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context8.prev = _context8.next) {
                     case 0:
-                      _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render8 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -237,7 +275,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context9.prev = _context9.next) {
                     case 0:
-                      _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render9 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -273,7 +311,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context10.prev = _context10.next) {
                   case 0:
-                    _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render10 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input"
@@ -305,7 +343,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context11.prev = _context11.next) {
                   case 0:
-                    _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render11 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -343,7 +381,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context12.prev = _context12.next) {
                     case 0:
-                      _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render12 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -374,7 +412,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context13.prev = _context13.next) {
                     case 0:
-                      _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render13 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -407,7 +445,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context14.prev = _context14.next) {
                     case 0:
-                      _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render14 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -438,7 +476,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context15.prev = _context15.next) {
                     case 0:
-                      _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render15 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -472,7 +510,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context16.prev = _context16.next) {
                   case 0:
-                    _render16 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render16 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input"
@@ -502,7 +540,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context17.prev = _context17.next) {
                   case 0:
-                    _render17 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render17 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -537,7 +575,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context18.prev = _context18.next) {
                   case 0:
-                    _render18 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render18 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -572,7 +610,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context19.prev = _context19.next) {
                   case 0:
-                    _render19 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render19 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -599,7 +637,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context20.prev = _context20.next) {
                   case 0:
-                    _render20 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render20 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -630,7 +668,7 @@ describe('TagInput', function () {
           while (1) {
             switch (_context21.prev = _context21.next) {
               case 0:
-                _render21 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render21 = render(_react.default.createElement(_.default, {
                   defaultTags: ['Foo tag'],
                   label: "My Tag Input",
                   "aria-label": "My Tag Input",
@@ -649,18 +687,18 @@ describe('TagInput', function () {
         }, _callee21);
       })));
       it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
-        var _render22, getByLabelText, queryByLabelText;
+        var _render22, getByLabelText;
 
         return regeneratorRuntime.wrap(function _callee22$(_context22) {
           while (1) {
             switch (_context22.prev = _context22.next) {
               case 0:
-                _render22 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render22 = render(_react.default.createElement(_.default, {
                   defaultTags: ['Foo tag'],
                   label: "My Tag Input",
                   "aria-label": "My Tag Input",
                   onChange: onChange
-                })), getByLabelText = _render22.getByLabelText, queryByLabelText = _render22.queryByLabelText;
+                })), getByLabelText = _render22.getByLabelText;
 
                 _react2.fireEvent.click(getByLabelText('Remove Foo tag'));
 
@@ -687,7 +725,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context23.prev = _context23.next) {
                     case 0:
-                      _render23 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render23 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -722,7 +760,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context24.prev = _context24.next) {
                     case 0:
-                      _render24 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render24 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -758,7 +796,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context25.prev = _context25.next) {
                   case 0:
-                    _render25 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render25 = render(_react.default.createElement(_.default, {
                       tags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -796,7 +834,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context26.prev = _context26.next) {
                     case 0:
-                      _render26 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render26 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -829,7 +867,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context27.prev = _context27.next) {
                     case 0:
-                      _render27 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render27 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -863,7 +901,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context28.prev = _context28.next) {
                   case 0:
-                    _render28 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render28 = render(_react.default.createElement(_.default, {
                       tags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -898,7 +936,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context29.prev = _context29.next) {
                   case 0:
-                    _render29 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render29 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -948,7 +986,7 @@ describe('TagInput', function () {
           while (1) {
             switch (_context31.prev = _context31.next) {
               case 0:
-                _render30 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render30 = render(_react.default.createElement(_.default, {
                   tags: ['Foo tag'],
                   label: "My Tag Input",
                   "aria-label": "My Tag Input",
@@ -978,7 +1016,7 @@ describe('TagInput', function () {
         while (1) {
           switch (_context32.prev = _context32.next) {
             case 0:
-              _render31 = (0, _react2.render)(_react.default.createElement(_.default, {
+              _render31 = render(_react.default.createElement(_.default, {
                 tags: ['Foo tag'],
                 label: "My Tag Input",
                 "aria-label": "My Tag Input",
@@ -998,4 +1036,42 @@ describe('TagInput', function () {
       }, _callee32);
     })));
   });
+  describe('dropdown', function () {
+    var defaultProps = {
+      label: 'My Tag Input',
+      options: [{
+        label: 'Option1',
+        value: 'Option1',
+        id: 'Option1'
+      }],
+      onChange: jest.fn(),
+      onSelect: jest.fn()
+    };
+    it('toggles the dropdown visibility when the container is clicked', function () {
+      var _render32 = render(_react.default.createElement(_.default, defaultProps)),
+          getByLabelText = _render32.getByLabelText,
+          getByText = _render32.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Tag Input'));
+
+      expect(getByText('Option1')).toBeInTheDocument();
+    });
+    it('calls onSelect when an option is selected from the dropdown', function () {
+      var onSelectMock = jest.fn();
+
+      var _render33 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onSelect: onSelectMock
+      }))),
+          getByLabelText = _render33.getByLabelText,
+          getByText = _render33.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Tag Input'));
+
+      expect(getByText('Option1')).toBeInTheDocument();
+
+      _react2.fireEvent.click(getByText('Option1'));
+
+      expect(onSelectMock).toHaveBeenCalledWith(['Option1']);
+    });
+  });
 });

package/lib/utils/commonUIColors.d.ts

@@ -12,10 +12,10 @@ export declare type CommonUIColors = {
     [K in CommonUIColorKeys]: Color;
 };
 export declare const viColorKeys: ("berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse")[];
-export declare const statusColorKeys: ("information" | "success" | "warning" | "danger")[];
+export declare const statusColorKeys: ("danger" | "success" | "information" | "warning")[];
 export declare const viColors: VIColors;
 export declare const statusColors: StatusColors;
-export declare const commonUIColorKeys: ("information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse")[];
+export declare const commonUIColorKeys: ("danger" | "success" | "information" | "warning" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse")[];
 export declare const commonUIColors: CommonUIColors;
 export declare const commonUIThreeShadeColors: {
     readonly berryCrisp: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.210+e51d940",
+  "version": "2.0.1-alpha.212+3de0b1c",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "e51d9408aec827964739289ebf71550fdb3cb620"
+  "gitHead": "3de0b1cfa799be6189a6f62a26f850b74a60d051"
 }