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

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/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/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.211+22cfa85",
   "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": "22cfa85a7348f88285a256628a844a654e36c7e9"
 }