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

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/LabelContainer/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface LabelContainerProps {
+    label: string;
+    historyLabel?: string;
+    tooltipText?: string;
+    onHistoryClick?: () => void;
+}
+export default function LabelContainer({ label, historyLabel, tooltipText, onHistoryClick, }: LabelContainerProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/LabelContainer/index.tsx"],"names":[],"mappings":";AAOA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,GACf,EAAE,mBAAmB,eAgBrB"}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LabelContainer;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BaseCell = _interopRequireDefault(require("../BaseCell"));
+
+var _Typography = require("../../Typography");
+
+var _styles = require("./styles");
+
+var _ = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function LabelContainer(_ref) {
+  var label = _ref.label,
+      historyLabel = _ref.historyLabel,
+      tooltipText = _ref.tooltipText,
+      onHistoryClick = _ref.onHistoryClick;
+  return _react.default.createElement(_BaseCell.default, null, _react.default.createElement(_Typography.P, {
+    size: "small",
+    color: "alaskanHusky",
+    style: {
+      textAlign: 'left'
+    }
+  }, label), onHistoryClick && _react.default.createElement(_.Tooltip, {
+    enabled: !!tooltipText,
+    target: _react.default.createElement(_styles.Dot, {
+      "aria-label": historyLabel,
+      onClick: onHistoryClick
+    })
+  }, tooltipText || ''));
+}

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

@@ -0,0 +1,105 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+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('LabelContainer', function () {
+  it('renders the correct label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)(_react.default.createElement(_index.default, {
+              label: "Test Label"
+            })), getByText = _render.getByText;
+            expect(getByText(/test label/i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  describe('when onDotClick is passed', function () {
+    it('renders dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render2, getByLabelText;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render2 = (0, _react2.render)(_react.default.createElement(_index.default, {
+                label: "Test Label",
+                onHistoryClick: function onHistoryClick() {},
+                historyLabel: "Label Action"
+              })), getByLabelText = _render2.getByLabelText;
+              expect(getByLabelText(/label action/i)).toBeInTheDocument();
+
+            case 2:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('trigger callback when clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var mockCallback, _render3, getByLabelText;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              mockCallback = jest.fn();
+              _render3 = (0, _react2.render)(_react.default.createElement(_index.default, {
+                label: "Test Label",
+                onHistoryClick: mockCallback,
+                historyLabel: "Action"
+              })), getByLabelText = _render3.getByLabelText;
+
+              _react2.fireEvent.click(getByLabelText('Action'));
+
+              expect(mockCallback).toHaveBeenCalledTimes(1);
+
+            case 4:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+  });
+  describe('when onDotClick is NOT passed', function () {
+    it('does not render dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var _render4, queryByLabelText;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _render4 = (0, _react2.render)(_react.default.createElement(_index.default, {
+                label: "Test Label",
+                historyLabel: "Label Action"
+              })), queryByLabelText = _render4.queryByLabelText;
+              expect(queryByLabelText(/label action/i)).not.toBeInTheDocument();
+
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    })));
+  });
+});

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

@@ -0,0 +1,4 @@
+export declare const Dot: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dot = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/prefer-default-export */
+var Dot = _styledComponents.default.button.attrs({
+  type: 'button'
+}).withConfig({
+  displayName: "styles__Dot",
+  componentId: "sc-1n5twvs-0"
+})(["padding:0;margin-left:", ";width:", ";min-width:", ";height:", ";max-height:", ";background-color:", ";border:none;cursor:pointer;border-radius:50%;&:hover{background-color:", ";}"], (0, _rem.default)(_spacing.default.base * 0.1), (0, _rem.default)(_spacing.default.base * 0.7), (0, _rem.default)(_spacing.default.base * 0.7), (0, _rem.default)(_spacing.default.base * 0.7), (0, _rem.default)(_spacing.default.base * 0.7), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean));
+
+exports.Dot = Dot;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ContentContainerProps, ValueType } from '../ContentContainer';
+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, onSubmit, }: ListItemProps<T>): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,EACL,QAAQ,GACT,EAAE,aAAa,CAAC,CAAC,CAAC,eAqBlB"}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ListItem;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ContentContainer = _interopRequireDefault(require("../ContentContainer"));
+
+var _LabelContainer = _interopRequireDefault(require("../LabelContainer"));
+
+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 ListItem(_ref) {
+  var label = _ref.label,
+      onHistoryClick = _ref.onHistoryClick,
+      historyLabel = _ref.historyLabel,
+      tooltipText = _ref.tooltipText,
+      Component = _ref.Component,
+      defaultViewState = _ref.defaultViewState,
+      value = _ref.value,
+      onSubmit = _ref.onSubmit;
+  var handleOnDotClick = (0, _react.useCallback)(function () {
+    if (onHistoryClick) onHistoryClick(value);
+  }, [onHistoryClick, value]);
+  return _react.default.createElement(_styles.Container, null, _react.default.createElement(_LabelContainer.default, {
+    label: label,
+    onHistoryClick: onHistoryClick ? handleOnDotClick : undefined,
+    historyLabel: historyLabel,
+    tooltipText: tooltipText
+  }), _react.default.createElement(_ContentContainer.default, {
+    Component: Component,
+    defaultViewState: defaultViewState,
+    value: value,
+    onSubmit: onSubmit
+  }));
+}

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _LabelContainer = _interopRequireDefault(require("../LabelContainer"));
+
+var _ContentContainer = _interopRequireDefault(require("../ContentContainer"));
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+describe('ListItem', function () {
+  var defaultProps = {
+    label: 'Test Label',
+    Component: function Component() {
+      return _react.default.createElement("div", null, "Test children");
+    },
+    value: 'Test Value',
+    defaultViewState: 'form'
+  };
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  it('renders with required props', function () {
+    var _render = (0, _react2.render)(_react.default.createElement(_.default, defaultProps)),
+        container = _render.container;
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+  it('passes label props to LabelCell', function () {
+    // Mock the LabelCell component to verify props
+    jest.spyOn(_react.default, 'createElement');
+
+    var labelProps = _objectSpread({}, defaultProps, {
+      onHistoryClick: jest.fn(),
+      historyLabel: 'Dot aria label'
+    });
+
+    (0, _react2.render)(_react.default.createElement(_.default, labelProps)); // Verify LabelCell was called with the correct props
+
+    expect(_react.default.createElement).toHaveBeenCalledWith(_LabelContainer.default, expect.objectContaining({
+      label: labelProps.label,
+      onHistoryClick: expect.any(Function),
+      historyLabel: labelProps.historyLabel
+    }));
+  });
+  it('passes content props to ContentCell', function () {
+    // Mock the ContentCell component to verify props
+    jest.spyOn(_react.default, 'createElement');
+
+    var contentProps = _objectSpread({}, defaultProps, {
+      Component: function Component() {
+        return _react.default.createElement("span", null, "Custom Component");
+      },
+      value: 'Test Value',
+      defaultViewState: 'form'
+    });
+
+    (0, _react2.render)(_react.default.createElement(_.default, contentProps)); // Verify ContentCell was called with the correct props
+
+    expect(_react.default.createElement).toHaveBeenCalledWith(_ContentContainer.default, expect.objectContaining({
+      Component: contentProps.Component,
+      value: contentProps.value,
+      defaultViewState: contentProps.defaultViewState
+    }));
+  });
+});

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

@@ -0,0 +1,4 @@
+export declare const makeLinkSchemaPropTypes: () => object;
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListItem/schema.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,uBAAuB,cA2BlC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAyC,CAAC;AAItD,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.makeLinkSchemaPropTypes = void 0;
+
+var _reactDesc = require("react-desc");
+
+var _constants = require("../constants");
+
+// @ts-ignore no module typings
+var makeLinkSchemaPropTypes = function makeLinkSchemaPropTypes() {
+  return {
+    Component: _reactDesc.PropTypes.func.description('Custom component to render the list item content. If not provided, DefaultCell will be used.').defaultValue('DefaultCell'),
+    defaultViewState: _reactDesc.PropTypes.oneOf(Object.values(_constants.VIEW_STATES)).description('Initial display state of the list item. Controls whether the item appears in view, or edit state.').defaultValue(_constants.VIEW_STATES.VIEW),
+    historyLabel: _reactDesc.PropTypes.string.description('Accessibility label for the dot/action indicator, used by screen readers.'),
+    label: _reactDesc.PropTypes.string.description('Primary text label displayed for the list item.').isRequired,
+    onHistoryClick: _reactDesc.PropTypes.func.description('Callback function triggered when the dot/action indicator is clicked.'),
+    value: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.bool, _reactDesc.PropTypes.object]).description('The value associated with this list item. The value will be passed to the Component as a prop.')
+  };
+};
+
+exports.makeLinkSchemaPropTypes = makeLinkSchemaPropTypes;
+var schema = (0, _reactDesc.describe)({
+  displayName: 'List.Item'
+});
+schema.propTypes = makeLinkSchemaPropTypes();
+var _default = schema;
+exports.default = _default;

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

@@ -0,0 +1,2 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, import("../../Flex").FlexComponentProps, never>;
+//# sourceMappingURL=styles.d.ts.map

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

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