@decisiv/ui-components 2.0.1-alpha.97 → 2.0.1

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

@@ -0,0 +1,198 @@
+/// <reference types="react" />
+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";
+    }>;
+}> & {
+    paddingX: number;
+    paddingY: number;
+}, "paddingX" | "paddingY">;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/List/BaseCell/styles.ts"],"names":[],"mappings":";AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAcrB,CAAC"}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _Flex = _interopRequireDefault(require("../../Flex"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/prefer-default-export
+var Container = (0, _styledComponents.default)(_Flex.default).attrs({
+  paddingX: 1,
+  paddingY: 0.6
+}).withConfig({
+  displayName: "styles__Container",
+  componentId: "rrcmey-0"
+})(["background-color:inherit;border:inherit;&:first-child{padding-right:", ";}&:last-child{padding-left:", ";}"], (0, _rem.default)(_designTokens.spacing.base * 0.5), (0, _rem.default)(_designTokens.spacing.base * 0.5));
+exports.Container = Container;

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

@@ -0,0 +1,21 @@
+import { ComponentType } from 'react';
+import { ListViewState } from '../types';
+export declare type ValueType = string | number | boolean | Record<string, unknown>;
+interface ExternalComponentProps<T extends ValueType = string> extends Record<string, unknown> {
+    value?: T;
+}
+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, 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 {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ContentContainer;
+exports.useListItemContent = useListItemContent;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _BaseCell = _interopRequireDefault(require("../BaseCell"));
+
+var _DefaultCell = _interopRequireDefault(require("../DefaultCell"));
+
+var _constants = require("../constants");
+
+var _ = require("..");
+
+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 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 _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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ContentCellProvider = (0, _react.createContext)({
+  toggle: function toggle() {
+    return undefined;
+  },
+  viewState: _constants.VIEW_STATES.VIEW
+});
+
+function ContentContainer(_ref) {
+  var defaultViewState = _ref.defaultViewState,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === void 0 ? _DefaultCell.default : _ref$Component,
+      value = _ref.value,
+      onSubmit = _ref.onSubmit;
+
+  var _useState = (0, _react.useState)(defaultViewState || 'view'),
+      _useState2 = _slicedToArray(_useState, 2),
+      viewState = _useState2[0],
+      setViewState = _useState2[1];
+
+  var toggle = (0, _react.useCallback)(function () {
+    setViewState(function (oldState) {
+      if (oldState === _constants.VIEW_STATES.VIEW) return _constants.VIEW_STATES.FORM;
+      return _constants.VIEW_STATES.VIEW;
+    });
+  }, []);
+  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: contextValue
+  }, _react.default.createElement(_BaseCell.default, null, _react.default.createElement(Component, {
+    value: value
+  })));
+}
+
+function useListItemContent() {
+  var listContextValue = (0, _react.useContext)(_.ListContext);
+  var contentCellContextValue = (0, _react.useContext)(ContentCellProvider);
+  return _objectSpread({}, listContextValue, {}, contentCellContextValue);
+}

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _ = _interopRequireWildcard(require("."));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }); }; }
+
+describe('ContentCell', function () {
+  var MockComponent = function MockComponent(_ref) {
+    var value = _ref.value;
+    return _react.default.createElement("div", null, value);
+  };
+
+  it('renders the component sending the value message', function () {
+    var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+      Component: MockComponent,
+      value: "Test Value"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText(/test value/i)).toBeInTheDocument();
+  });
+  it('should initialize with default view state', function () {
+    var _renderHook = (0, _reactHooks.renderHook)(_.useListItemContent, {
+      // eslint-disable-next-line react/prop-types
+      wrapper: function wrapper(_ref2) {
+        var children = _ref2.children;
+
+        var MyComponent = function MyComponent() {
+          return _react.default.createElement("div", null, children);
+        };
+
+        return _react.default.createElement(_.default, {
+          defaultViewState: "form",
+          Component: MyComponent,
+          value: "test"
+        });
+      }
+    }),
+        result = _renderHook.result;
+
+    expect(result.current.viewState).toBe('form');
+  });
+  it('should toggle view state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _renderHook2, result;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _renderHook2 = (0, _reactHooks.renderHook)(function () {
+              return (0, _.useListItemContent)();
+            }, {
+              // eslint-disable-next-line react/prop-types
+              wrapper: function wrapper(_ref4) {
+                var children = _ref4.children;
+
+                var MyComponent = function MyComponent() {
+                  return _react.default.createElement("div", null, children);
+                };
+
+                return _react.default.createElement(_.default, {
+                  defaultViewState: "view",
+                  Component: MyComponent,
+                  value: "test"
+                });
+              }
+            }), result = _renderHook2.result;
+            (0, _reactHooks.act)(function () {
+              result.current.toggle();
+            });
+            _context.next = 4;
+            return new Promise(function (resolve) {
+              return setTimeout(resolve, 100);
+            });
+
+          case 4:
+            expect(result.current.viewState).toBe('form');
+            (0, _reactHooks.act)(function () {
+              result.current.toggle();
+            });
+            expect(result.current.viewState).toBe('view');
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

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

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

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

@@ -0,0 +1 @@
+{"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/DefaultCell/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DefaultCell;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ContentContainer = require("../ContentContainer");
+
+var _Typography = require("../../Typography");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function DefaultCell(_ref) {
+  var value = _ref.value;
+
+  var _useListItemContent = (0, _ContentContainer.useListItemContent)(),
+      size = _useListItemContent.size;
+
+  var sizeToUse = size === 'small' ? 'small' : undefined;
+  return _react.default.createElement(_Typography.P, {
+    size: sizeToUse
+  }, value || '—');
+}

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
+  }));
+}