@coorpacademy/components 11.13.3 → 11.13.4

package/lib/molecule/expandible-actionable-table/index.d.ts

@@ -0,0 +1,103 @@
+/// <reference types="react" />
+import { WebContextValues } from '../../atom/provider/web-context';
+import { Props } from './types';
+declare const ActionableExpandableErrorsTable: {
+    (props: Props, legacyContext: WebContextValues): JSX.Element;
+    contextTypes: {
+        skin: import("prop-types").Requireable<import("prop-types").InferProps<{
+            common: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            images: import("prop-types").Requireable<import("prop-types").InferProps<{
+                'logo-mobile': import("prop-types").Requireable<any>;
+                logo: import("prop-types").Requireable<any>;
+                'logo-email': import("prop-types").Requireable<any>;
+                login: import("prop-types").Requireable<any>;
+            }>>;
+            icons: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            mod: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            courses: import("prop-types").Requireable<any[]>;
+            texts: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        translate: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    propTypes: {
+        columns: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            title: import("prop-types").Validator<string>;
+        }> | null | undefined)[]>;
+        rows: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            fields: import("prop-types").Requireable<(NonNullable<string | import("prop-types").InferProps<{
+                type: import("prop-types").Requireable<string>;
+                current: import("prop-types").Requireable<boolean>;
+                icon: import("prop-types").Requireable<string>;
+                value: import("prop-types").Requireable<string>;
+            }> | null | undefined> | null | undefined)[]>;
+            isRowExpandible: import("prop-types").Requireable<boolean>;
+            lastField: import("prop-types").Requireable<NonNullable<string | import("prop-types").InferProps<{
+                type: import("prop-types").Requireable<string>;
+                disabled: import("prop-types").Requireable<boolean>;
+                buttonAriaLabel: import("prop-types").Requireable<string>;
+                menuAriaLabel: import("prop-types").Requireable<string>;
+                buttons: import("prop-types").Validator<(import("prop-types").InferProps<{
+                    'data-name': import("prop-types").Requireable<string>;
+                    disabled: import("prop-types").Requireable<boolean>;
+                    label: import("prop-types").Validator<string>;
+                    onClick: import("prop-types").Validator<(...args: any[]) => any>;
+                    type: import("prop-types").Requireable<string>;
+                }> | null | undefined)[]>;
+                onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+                menuButtonClassName: import("prop-types").Requireable<string>;
+                isBulkMenu: import("prop-types").Requireable<boolean>;
+            }> | null | undefined>>;
+        }> | null | undefined)[]>;
+        stickyFirstColumn: import("prop-types").Requireable<boolean>;
+        stickyLastColumn: import("prop-types").Requireable<boolean>;
+        columnWidth: import("prop-types").Requireable<string>;
+        ariaDescribedby: import("prop-types").Requireable<string>;
+        lastField: import("prop-types").Requireable<NonNullable<import("prop-types").InferProps<{
+            componentType: import("prop-types").Requireable<string>;
+            type: import("prop-types").Requireable<string>;
+            label: import("prop-types").Requireable<string>;
+            'aria-label': import("prop-types").Requireable<string>;
+            'data-name': import("prop-types").Requireable<string>;
+            'data-testid': import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                position: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+            }>>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+            link: import("prop-types").Requireable<import("prop-types").InferProps<{
+                href: import("prop-types").Requireable<string>;
+                download: import("prop-types").Requireable<boolean>;
+                target: import("prop-types").Requireable<string>;
+            }>>;
+            disabled: import("prop-types").Requireable<boolean>;
+            className: import("prop-types").Requireable<string>;
+            customStyle: import("prop-types").Requireable<import("prop-types").InferProps<{}>>;
+        }> | import("prop-types").InferProps<{
+            componentType: import("prop-types").Requireable<string>;
+            disabled: import("prop-types").Requireable<boolean>;
+            buttonAriaLabel: import("prop-types").Requireable<string>;
+            menuAriaLabel: import("prop-types").Requireable<string>;
+            buttons: import("prop-types").Validator<(import("prop-types").InferProps<{
+                'data-name': import("prop-types").Requireable<string>;
+                disabled: import("prop-types").Requireable<boolean>;
+                label: import("prop-types").Validator<string>;
+                onClick: import("prop-types").Validator<(...args: any[]) => any>;
+                type: import("prop-types").Requireable<string>;
+            }> | null | undefined)[]>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+            menuButtonClassName: import("prop-types").Requireable<string>;
+            isBulkMenu: import("prop-types").Requireable<boolean>;
+        }> | null | undefined>>;
+        isNestedTable: import("prop-types").Requireable<boolean>;
+    };
+};
+export default ActionableExpandableErrorsTable;
+//# sourceMappingURL=index.d.ts.map

package/lib/molecule/expandible-actionable-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAA2C,KAAK,EAAY,MAAM,SAAS,CAAC;AAiCnF,QAAA,MAAM,+BAA+B;YAAW,KAAK,iBAAiB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqKrF,CAAC;AASF,eAAe,+BAA+B,CAAC"}

package/lib/molecule/expandible-actionable-table/index.js

@@ -0,0 +1,215 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _includes2 = _interopRequireDefault(require("lodash/fp/includes"));
+
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
+
+var _isString2 = _interopRequireDefault(require("lodash/fp/isString"));
+
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link-icon-only"));
+
+var _statusItem = _interopRequireDefault(require("../../atom/status-item"));
+
+var _bulkProgressBar = _interopRequireDefault(require("../bulk-progress-bar"));
+
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
+
+var _bulletPointMenuButton = _interopRequireDefault(require("../bullet-point-menu-button"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _errorsTable = _interopRequireDefault(require("../errors-table"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _types = require("./types");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+const buildField = field => {
+  if ((0, _isString2.default)(field)) return field;
+  const {
+    componentType
+  } = field;
+
+  switch (componentType) {
+    case 'status':
+      return /*#__PURE__*/_react.default.createElement(_statusItem.default, field);
+
+    case 'progress-bar':
+      return /*#__PURE__*/_react.default.createElement(_bulkProgressBar.default, field);
+  }
+};
+
+const buildLastField = lastField => {
+  const {
+    componentType
+  } = lastField;
+
+  switch (componentType) {
+    case 'menu':
+      return /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, lastField);
+
+    case 'button-link':
+      return /*#__PURE__*/_react.default.createElement(_buttonLink.default, lastField);
+  }
+};
+
+const buildNestedRow = row => {
+  const {
+    componentType
+  } = row;
+
+  switch (componentType) {
+    case 'errors-table':
+      return /*#__PURE__*/_react.default.createElement(_errorsTable.default, row);
+
+    case 'expandible-errors-table':
+      return /*#__PURE__*/_react.default.createElement(ActionableExpandableErrorsTable, row);
+  }
+};
+
+const ActionableExpandableErrorsTable = (props, legacyContext) => {
+  const {
+    columns,
+    rows = [],
+    lastField,
+    stickyFirstColumn = false,
+    stickyLastColumn = false,
+    ariaDescribedby,
+    columnWidth = `${100 / (0, _size2.default)(columns)}%`,
+    isNestedTable = false
+  } = props;
+  const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
+  /**
+   * State variable to keep track of all the expanded rows
+   * By default, nothing expanded. Hence initialized with empty array.
+   */
+
+  const [expandedRows, setExpandedRows] = (0, _react.useState)([]);
+  /**
+   * State variable to keep track which row is currently expanded.
+   */
+
+  const [expandState, setExpandState] = (0, _react.useState)({});
+  /**
+   * This function gets called when show/hide link is clicked.
+   */
+
+  const handleExpandRow = index => () => {
+    const isRowExpanded = (0, _includes2.default)(index, expandedRows);
+    /**
+     * If the row is expanded, we are here to hide it. Hence remove
+     * it from the state variable. Otherwise add to it.
+     */
+
+    const newExpandedRows = isRowExpanded ? expandedRows.filter(id => id !== index) : expandedRows.concat(index);
+    setExpandedRows(newExpandedRows);
+    /**
+     * Create a new object to update the expanded state of all rows
+     * Use the newExpandedRows array to set the state of all rows that are currently expanded
+     */
+
+    const expandedState = {};
+    newExpandedRows.forEach(id => {
+      expandedState[id] = true;
+    });
+    setExpandState(expandedState);
+  };
+
+  const headerRow = columns.map((column, cIndex) => {
+    const {
+      title
+    } = column;
+    return /*#__PURE__*/_react.default.createElement("th", {
+      className: cIndex === 0 ? (0, _classnames.default)(stickyFirstColumn ? _style.default.headerFirstSticky : _style.default.headerFirst, _style.default.header) : _style.default.header,
+      key: `${title}-${cIndex}`,
+      role: "columnheader"
+    }, title);
+  });
+  headerRow.push( /*#__PURE__*/_react.default.createElement("th", {
+    className: stickyLastColumn ? _style.default.headerLastSticky : _style.default.headerLast,
+    key: "action-header"
+  }));
+  const headerView = [...headerRow];
+  const bodyView = rows.map((row, index) => {
+    const {
+      fields,
+      isRowExpandible = false
+    } = row;
+    const bodyRow = fields.map((field, fIndex) => {
+      const cellContent = fIndex === 0 ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.columFirstWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.expandButtonWrapper
+      }, isRowExpandible ? /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, {
+        onClick: handleExpandRow(index),
+        "data-name": `arrowUp-button-${index}`,
+        icon: "down",
+        className: expandState[index] ? 'bulkArrowUp' : 'bulkArrowDown',
+        "aria-label": translate('bulk_import.show_errors')
+      }) : null), buildField(field)) : buildField(field);
+      return /*#__PURE__*/_react.default.createElement("td", {
+        className: fIndex === 0 ? (0, _classnames.default)(stickyFirstColumn ? _style.default.columnFirstSticky : _style.default.columnFirst, _style.default.col) : _style.default.col,
+        style: {
+          width: columnWidth
+        },
+        key: `${field}-${fIndex}`
+      }, cellContent);
+    });
+    bodyRow.push( /*#__PURE__*/_react.default.createElement("td", {
+      className: stickyLastColumn ? _style.default.columnLastSticky : _style.default.columnLast,
+      key: "actionHeader"
+    }, lastField ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)({
+        [_style.default.inspectButton]: (0, _get2.default)('className', lastField) === 'bulkInspectButton'
+      })
+    }, buildLastField(lastField)) : null));
+    const nestedRow = (0, _get2.default)('nestedRow', row);
+    const nestedRowCellule = nestedRow && expandedRows.includes(index) ? /*#__PURE__*/_react.default.createElement("tr", {
+      key: `line-${index}-error`
+    }, /*#__PURE__*/_react.default.createElement("td", {
+      className: _style.default.nestedRowCellule,
+      colSpan: fields.length + 2
+    }, buildNestedRow(nestedRow))) : null;
+    return nestedRowCellule ? [/*#__PURE__*/_react.default.createElement("tr", {
+      key: `line-${index}`
+    }, bodyRow), nestedRowCellule] : [/*#__PURE__*/_react.default.createElement("tr", {
+      key: `line-${index}`
+    }, bodyRow)];
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.wrapper
+  }, /*#__PURE__*/_react.default.createElement("table", _extends({}, ariaDescribedby ? {
+    'aria-describedby': ariaDescribedby
+  } : {}, {
+    className: _style.default.table,
+    "data-name": "expandible-actionable-table"
+  }), /*#__PURE__*/_react.default.createElement("thead", {
+    className: isNestedTable ? _style.default.theadNested : _style.default.thead
+  }, /*#__PURE__*/_react.default.createElement("tr", null, headerView)), /*#__PURE__*/_react.default.createElement("tbody", null, bodyView)));
+};
+
+ActionableExpandableErrorsTable.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+ActionableExpandableErrorsTable.propTypes = process.env.NODE_ENV !== "production" ? _types.propTypes : {};
+var _default = ActionableExpandableErrorsTable;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/expandible-actionable-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["buildField","field","componentType","buildLastField","lastField","buildNestedRow","row","ActionableExpandableErrorsTable","props","legacyContext","columns","rows","stickyFirstColumn","stickyLastColumn","ariaDescribedby","columnWidth","isNestedTable","translate","GetTranslateFromContext","expandedRows","setExpandedRows","useState","expandState","setExpandState","handleExpandRow","index","isRowExpanded","newExpandedRows","filter","id","concat","expandedState","forEach","headerRow","map","column","cIndex","title","classnames","style","headerFirstSticky","headerFirst","header","push","headerLastSticky","headerLast","headerView","bodyView","fields","isRowExpandible","bodyRow","fIndex","cellContent","columFirstWrapper","expandButtonWrapper","columnFirstSticky","columnFirst","col","width","columnLastSticky","columnLast","inspectButton","nestedRow","nestedRowCellule","includes","length","wrapper","table","theadNested","thead","contextTypes","skin","Provider","childContextTypes","propTypes"],"sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport classnames from 'classnames';\nimport {get, isString, size, includes} from 'lodash/fp';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport StatusItem from '../../atom/status-item';\nimport BulkProgressBar from '../bulk-progress-bar';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport BulletPointMenuButton from '../bullet-point-menu-button';\nimport ButtonLink from '../../atom/button-link';\nimport ErrorsTable from '../errors-table';\nimport style from './style.css';\nimport {ExpandState, Field, LastField, NestedRow, Props, propTypes} from './types';\n\nconst buildField = (field: Field) => {\n  if (isString(field)) return field;\n  const {componentType} = field;\n  switch (componentType) {\n    case 'status':\n      return <StatusItem {...field} />;\n    case 'progress-bar':\n      return <BulkProgressBar {...field} />;\n  }\n};\n\nconst buildLastField = (lastField: LastField) => {\n  const {componentType} = lastField;\n  switch (componentType) {\n    case 'menu':\n      return <BulletPointMenuButton {...lastField} />;\n    case 'button-link':\n      return <ButtonLink {...lastField} />;\n  }\n};\n\nconst buildNestedRow = (row: NestedRow) => {\n  const {componentType} = row;\n  switch (componentType) {\n    case 'errors-table':\n      return <ErrorsTable {...row} />;\n    case 'expandible-errors-table':\n      return <ActionableExpandableErrorsTable {...row} />;\n  }\n};\n\nconst ActionableExpandableErrorsTable = (props: Props, legacyContext: WebContextValues) => {\n  const {\n    columns,\n    rows = [],\n    lastField,\n    stickyFirstColumn = false,\n    stickyLastColumn = false,\n    ariaDescribedby,\n    columnWidth = `${100 / size(columns)}%`,\n    isNestedTable = false\n  } = props;\n  const translate = GetTranslateFromContext(legacyContext);\n\n  /**\n   * State variable to keep track of all the expanded rows\n   * By default, nothing expanded. Hence initialized with empty array.\n   */\n  const [expandedRows, setExpandedRows] = useState<number[]>([]);\n\n  /**\n   * State variable to keep track which row is currently expanded.\n   */\n  const [expandState, setExpandState] = useState<ExpandState>({});\n\n  /**\n   * This function gets called when show/hide link is clicked.\n   */\n  const handleExpandRow = (index: number) => () => {\n    const isRowExpanded = includes(index, expandedRows);\n\n    /**\n     * If the row is expanded, we are here to hide it. Hence remove\n     * it from the state variable. Otherwise add to it.\n     */\n    const newExpandedRows = isRowExpanded\n      ? expandedRows.filter(id => id !== index)\n      : expandedRows.concat(index);\n\n    setExpandedRows(newExpandedRows);\n\n    /**\n     * Create a new object to update the expanded state of all rows\n     * Use the newExpandedRows array to set the state of all rows that are currently expanded\n     */\n    const expandedState: ExpandState = {};\n    newExpandedRows.forEach(id => {\n      expandedState[id] = true;\n    });\n\n    setExpandState(expandedState);\n  };\n\n  const headerRow = columns.map((column, cIndex) => {\n    const {title} = column;\n    return (\n      <th\n        className={\n          cIndex === 0\n            ? classnames(\n                stickyFirstColumn ? style.headerFirstSticky : style.headerFirst,\n                style.header\n              )\n            : style.header\n        }\n        key={`${title}-${cIndex}`}\n        role=\"columnheader\"\n      >\n        {title}\n      </th>\n    );\n  });\n\n  headerRow.push(\n    <th\n      className={stickyLastColumn ? style.headerLastSticky : style.headerLast}\n      key=\"action-header\"\n    />\n  );\n  const headerView = [...headerRow];\n\n  const bodyView = rows.map((row, index) => {\n    const {fields, isRowExpandible = false} = row;\n    const bodyRow = fields.map((field, fIndex) => {\n      const cellContent =\n        fIndex === 0 ? (\n          <div className={style.columFirstWrapper}>\n            <div className={style.expandButtonWrapper}>\n              {isRowExpandible ? (\n                <ButtonLinkIconOnly\n                  onClick={handleExpandRow(index)}\n                  data-name={`arrowUp-button-${index}`}\n                  icon=\"down\"\n                  className={expandState[index] ? 'bulkArrowUp' : 'bulkArrowDown'}\n                  aria-label={translate('bulk_import.show_errors')}\n                />\n              ) : null}\n            </div>\n            {buildField(field)}\n          </div>\n        ) : (\n          buildField(field)\n        );\n      return (\n        <td\n          className={\n            fIndex === 0\n              ? classnames(\n                  stickyFirstColumn ? style.columnFirstSticky : style.columnFirst,\n                  style.col\n                )\n              : style.col\n          }\n          style={{width: columnWidth}}\n          key={`${field}-${fIndex}`}\n        >\n          {cellContent}\n        </td>\n      );\n    });\n\n    bodyRow.push(\n      <td\n        className={stickyLastColumn ? style.columnLastSticky : style.columnLast}\n        key=\"actionHeader\"\n      >\n        {lastField ? (\n          <div\n            className={classnames({\n              [style.inspectButton]: get('className', lastField) === 'bulkInspectButton'\n            })}\n          >\n            {buildLastField(lastField)}\n          </div>\n        ) : null}\n      </td>\n    );\n    const nestedRow = get('nestedRow', row);\n    const nestedRowCellule =\n      nestedRow && expandedRows.includes(index) ? (\n        <tr key={`line-${index}-error`}>\n          <td className={style.nestedRowCellule} colSpan={fields.length + 2}>\n            {buildNestedRow(nestedRow)}\n          </td>\n        </tr>\n      ) : null;\n\n    return nestedRowCellule\n      ? [<tr key={`line-${index}`}>{bodyRow}</tr>, nestedRowCellule]\n      : [<tr key={`line-${index}`}>{bodyRow}</tr>];\n  });\n\n  return (\n    <div className={style.wrapper}>\n      <table\n        {...(ariaDescribedby ? {'aria-describedby': ariaDescribedby} : {})}\n        className={style.table}\n        data-name=\"expandible-actionable-table\"\n      >\n        <thead className={isNestedTable ? style.theadNested : style.thead}>\n          <tr>{headerView}</tr>\n        </thead>\n        <tbody>{bodyView}</tbody>\n      </table>\n    </div>\n  );\n};\n\nActionableExpandableErrorsTable.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nActionableExpandableErrorsTable.propTypes = propTypes;\n\nexport default ActionableExpandableErrorsTable;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,UAAU,GAAIC,KAAD,IAAkB;EACnC,IAAI,wBAASA,KAAT,CAAJ,EAAqB,OAAOA,KAAP;EACrB,MAAM;IAACC;EAAD,IAAkBD,KAAxB;;EACA,QAAQC,aAAR;IACE,KAAK,QAAL;MACE,oBAAO,6BAAC,mBAAD,EAAgBD,KAAhB,CAAP;;IACF,KAAK,cAAL;MACE,oBAAO,6BAAC,wBAAD,EAAqBA,KAArB,CAAP;EAJJ;AAMD,CATD;;AAWA,MAAME,cAAc,GAAIC,SAAD,IAA0B;EAC/C,MAAM;IAACF;EAAD,IAAkBE,SAAxB;;EACA,QAAQF,aAAR;IACE,KAAK,MAAL;MACE,oBAAO,6BAAC,8BAAD,EAA2BE,SAA3B,CAAP;;IACF,KAAK,aAAL;MACE,oBAAO,6BAAC,mBAAD,EAAgBA,SAAhB,CAAP;EAJJ;AAMD,CARD;;AAUA,MAAMC,cAAc,GAAIC,GAAD,IAAoB;EACzC,MAAM;IAACJ;EAAD,IAAkBI,GAAxB;;EACA,QAAQJ,aAAR;IACE,KAAK,cAAL;MACE,oBAAO,6BAAC,oBAAD,EAAiBI,GAAjB,CAAP;;IACF,KAAK,yBAAL;MACE,oBAAO,6BAAC,+BAAD,EAAqCA,GAArC,CAAP;EAJJ;AAMD,CARD;;AAUA,MAAMC,+BAA+B,GAAG,CAACC,KAAD,EAAeC,aAAf,KAAmD;EACzF,MAAM;IACJC,OADI;IAEJC,IAAI,GAAG,EAFH;IAGJP,SAHI;IAIJQ,iBAAiB,GAAG,KAJhB;IAKJC,gBAAgB,GAAG,KALf;IAMJC,eANI;IAOJC,WAAW,GAAI,GAAE,MAAM,oBAAKL,OAAL,CAAc,GAPjC;IAQJM,aAAa,GAAG;EARZ,IASFR,KATJ;EAUA,MAAMS,SAAS,GAAG,IAAAC,iCAAA,EAAwBT,aAAxB,CAAlB;EAEA;AACF;AACA;AACA;;EACE,MAAM,CAACU,YAAD,EAAeC,eAAf,IAAkC,IAAAC,eAAA,EAAmB,EAAnB,CAAxC;EAEA;AACF;AACA;;EACE,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,IAAAF,eAAA,EAAsB,EAAtB,CAAtC;EAEA;AACF;AACA;;EACE,MAAMG,eAAe,GAAIC,KAAD,IAAmB,MAAM;IAC/C,MAAMC,aAAa,GAAG,wBAASD,KAAT,EAAgBN,YAAhB,CAAtB;IAEA;AACJ;AACA;AACA;;IACI,MAAMQ,eAAe,GAAGD,aAAa,GACjCP,YAAY,CAACS,MAAb,CAAoBC,EAAE,IAAIA,EAAE,KAAKJ,KAAjC,CADiC,GAEjCN,YAAY,CAACW,MAAb,CAAoBL,KAApB,CAFJ;IAIAL,eAAe,CAACO,eAAD,CAAf;IAEA;AACJ;AACA;AACA;;IACI,MAAMI,aAA0B,GAAG,EAAnC;IACAJ,eAAe,CAACK,OAAhB,CAAwBH,EAAE,IAAI;MAC5BE,aAAa,CAACF,EAAD,CAAb,GAAoB,IAApB;IACD,CAFD;IAIAN,cAAc,CAACQ,aAAD,CAAd;EACD,CAvBD;;EAyBA,MAAME,SAAS,GAAGvB,OAAO,CAACwB,GAAR,CAAY,CAACC,MAAD,EAASC,MAAT,KAAoB;IAChD,MAAM;MAACC;IAAD,IAAUF,MAAhB;IACA,oBACE;MACE,SAAS,EACPC,MAAM,KAAK,CAAX,GACI,IAAAE,mBAAA,EACE1B,iBAAiB,GAAG2B,cAAA,CAAMC,iBAAT,GAA6BD,cAAA,CAAME,WADtD,EAEEF,cAAA,CAAMG,MAFR,CADJ,GAKIH,cAAA,CAAMG,MAPd;MASE,GAAG,EAAG,GAAEL,KAAM,IAAGD,MAAO,EAT1B;MAUE,IAAI,EAAC;IAVP,GAYGC,KAZH,CADF;EAgBD,CAlBiB,CAAlB;EAoBAJ,SAAS,CAACU,IAAV,eACE;IACE,SAAS,EAAE9B,gBAAgB,GAAG0B,cAAA,CAAMK,gBAAT,GAA4BL,cAAA,CAAMM,UAD/D;IAEE,GAAG,EAAC;EAFN,EADF;EAMA,MAAMC,UAAU,GAAG,CAAC,GAAGb,SAAJ,CAAnB;EAEA,MAAMc,QAAQ,GAAGpC,IAAI,CAACuB,GAAL,CAAS,CAAC5B,GAAD,EAAMmB,KAAN,KAAgB;IACxC,MAAM;MAACuB,MAAD;MAASC,eAAe,GAAG;IAA3B,IAAoC3C,GAA1C;IACA,MAAM4C,OAAO,GAAGF,MAAM,CAACd,GAAP,CAAW,CAACjC,KAAD,EAAQkD,MAAR,KAAmB;MAC5C,MAAMC,WAAW,GACfD,MAAM,KAAK,CAAX,gBACE;QAAK,SAAS,EAAEZ,cAAA,CAAMc;MAAtB,gBACE;QAAK,SAAS,EAAEd,cAAA,CAAMe;MAAtB,GACGL,eAAe,gBACd,6BAAC,2BAAD;QACE,OAAO,EAAEzB,eAAe,CAACC,KAAD,CAD1B;QAEE,aAAY,kBAAiBA,KAAM,EAFrC;QAGE,IAAI,EAAC,MAHP;QAIE,SAAS,EAAEH,WAAW,CAACG,KAAD,CAAX,GAAqB,aAArB,GAAqC,eAJlD;QAKE,cAAYR,SAAS,CAAC,yBAAD;MALvB,EADc,GAQZ,IATN,CADF,EAYGjB,UAAU,CAACC,KAAD,CAZb,CADF,GAgBED,UAAU,CAACC,KAAD,CAjBd;MAmBA,oBACE;QACE,SAAS,EACPkD,MAAM,KAAK,CAAX,GACI,IAAAb,mBAAA,EACE1B,iBAAiB,GAAG2B,cAAA,CAAMgB,iBAAT,GAA6BhB,cAAA,CAAMiB,WADtD,EAEEjB,cAAA,CAAMkB,GAFR,CADJ,GAKIlB,cAAA,CAAMkB,GAPd;QASE,KAAK,EAAE;UAACC,KAAK,EAAE3C;QAAR,CATT;QAUE,GAAG,EAAG,GAAEd,KAAM,IAAGkD,MAAO;MAV1B,GAYGC,WAZH,CADF;IAgBD,CApCe,CAAhB;IAsCAF,OAAO,CAACP,IAAR,eACE;MACE,SAAS,EAAE9B,gBAAgB,GAAG0B,cAAA,CAAMoB,gBAAT,GAA4BpB,cAAA,CAAMqB,UAD/D;MAEE,GAAG,EAAC;IAFN,GAIGxD,SAAS,gBACR;MACE,SAAS,EAAE,IAAAkC,mBAAA,EAAW;QACpB,CAACC,cAAA,CAAMsB,aAAP,GAAuB,mBAAI,WAAJ,EAAiBzD,SAAjB,MAAgC;MADnC,CAAX;IADb,GAKGD,cAAc,CAACC,SAAD,CALjB,CADQ,GAQN,IAZN,CADF;IAgBA,MAAM0D,SAAS,GAAG,mBAAI,WAAJ,EAAiBxD,GAAjB,CAAlB;IACA,MAAMyD,gBAAgB,GACpBD,SAAS,IAAI3C,YAAY,CAAC6C,QAAb,CAAsBvC,KAAtB,CAAb,gBACE;MAAI,GAAG,EAAG,QAAOA,KAAM;IAAvB,gBACE;MAAI,SAAS,EAAEc,cAAA,CAAMwB,gBAArB;MAAuC,OAAO,EAAEf,MAAM,CAACiB,MAAP,GAAgB;IAAhE,GACG5D,cAAc,CAACyD,SAAD,CADjB,CADF,CADF,GAMI,IAPN;IASA,OAAOC,gBAAgB,GACnB,cAAC;MAAI,GAAG,EAAG,QAAOtC,KAAM;IAAvB,GAA2ByB,OAA3B,CAAD,EAA2Ca,gBAA3C,CADmB,GAEnB,cAAC;MAAI,GAAG,EAAG,QAAOtC,KAAM;IAAvB,GAA2ByB,OAA3B,CAAD,CAFJ;EAGD,CArEgB,CAAjB;EAuEA,oBACE;IAAK,SAAS,EAAEX,cAAA,CAAM2B;EAAtB,gBACE,mDACOpD,eAAe,GAAG;IAAC,oBAAoBA;EAArB,CAAH,GAA2C,EADjE;IAEE,SAAS,EAAEyB,cAAA,CAAM4B,KAFnB;IAGE,aAAU;EAHZ,iBAKE;IAAO,SAAS,EAAEnD,aAAa,GAAGuB,cAAA,CAAM6B,WAAT,GAAuB7B,cAAA,CAAM8B;EAA5D,gBACE,yCAAKvB,UAAL,CADF,CALF,eAQE,4CAAQC,QAAR,CARF,CADF,CADF;AAcD,CArKD;;AAuKAxC,+BAA+B,CAAC+D,YAAhC,GAA+C;EAC7CC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADY;EAE7CtD,SAAS,EAAEuD,iBAAA,CAASC,iBAAT,CAA2BxD;AAFO,CAA/C;AAKAV,+BAA+B,CAACmE,SAAhC,2CAA4CA,gBAA5C;eAEenE,+B"}

package/lib/molecule/expandible-actionable-table/style.css

@@ -0,0 +1,134 @@
+@value colors: "../../variables/colors.css";
+@value xtraLightGrey from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_700 from colors;
+@value cm_negative_red_200 from colors;
+@value light from colors;
+
+.wrapper {
+  width: 100%;
+}
+
+.table {
+  table-layout: fixed;  
+  border: 1px solid light;
+  font-family: 'Gilroy';
+  font-style: normal;
+  border-spacing: 0;
+  border-radius: 8px;
+  max-width: 1089px;
+  min-width: 1089px;
+}
+
+.thead {
+  background-color: xtraLightGrey;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+  color: cm_grey_400;
+  height: 56px;
+  text-align: left; 
+}
+
+.theadNested {
+  background-color: xtraLightGrey;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+  color: cm_grey_400;
+  height: 40px;
+  text-align: left; 
+}
+
+.header {
+  width: 276px;
+  padding-left: 56px;
+  box-sizing: border-box;
+  background-color: xtraLightGrey;
+}
+
+.headerFirstSticky {
+  position: sticky;
+  left: 0;
+  background-color: xtraLightGrey;
+}
+
+.headerFirst {
+  background-color: xtraLightGrey;
+}
+
+.headerLastSticky {
+  position: sticky;
+  right: 0;
+  background-color: xtraLightGrey;
+}
+
+.headerLast {
+  background-color: xtraLightGrey;
+}
+
+.col {
+  text-align: left; 
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: cm_grey_700;
+  border-top: 1px solid light;
+  padding-left: 56px;
+  max-width: 364px;
+}
+
+.columnFirst {
+  padding-left: 16px;
+  background-color: white;
+}
+
+.columnFirst .columFirstWrapper,
+.columnFirstSticky .columFirstWrapper {
+  display: flex;
+  justify-content: start;
+  gap: 16px;
+}
+
+.columnFirst .columFirstWrapper .expandButtonWrapper,
+.columnFirstSticky .columFirstWrapper .expandButtonWrapper {
+  min-width: 24px;
+}
+
+.columnFirstSticky {
+  position: sticky;
+  left: 0;
+  padding-left: 16px;
+  background-color: white;
+}
+
+.columnLast {
+  text-align: left; 
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-weight: 600; 
+  font-size: 14px;
+  line-height: 20px;
+  color: cm_grey_700;
+  border-top: 1px solid light;
+  display: flex;
+  justify-content: end;
+}
+
+.columnLastSticky {
+  composes: columnLast;
+  position: sticky;
+  right: 0;
+ }
+
+.inspectButton{
+  padding-right: 20px;
+  background-color: white;
+}
+
+.nestedRowCellule{
+padding: 10px;
+border-top: 1px solid light;  
+}

package/lib/molecule/expandible-actionable-table/types.d.ts

@@ -0,0 +1,116 @@
+import PropTypes from 'prop-types';
+import { BulletPointMenuButtonProps } from '../bullet-point-menu-button/types';
+import { ButtonLinkProps } from '../../atom/button-link/types';
+import { StatusItemProps } from '../../atom/status-item/types';
+import { Props as ErrorsTableProps } from '../errors-table/types';
+import { Props as BulkProgressBarProps } from '../bulk-progress-bar/types';
+export declare const propTypes: {
+    columns: PropTypes.Requireable<(PropTypes.InferProps<{
+        title: PropTypes.Validator<string>;
+    }> | null | undefined)[]>;
+    rows: PropTypes.Requireable<(PropTypes.InferProps<{
+        fields: PropTypes.Requireable<(NonNullable<string | PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+            current: PropTypes.Requireable<boolean>;
+            icon: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+        }> | null | undefined> | null | undefined)[]>;
+        isRowExpandible: PropTypes.Requireable<boolean>;
+        lastField: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            buttonAriaLabel: PropTypes.Requireable<string>;
+            menuAriaLabel: PropTypes.Requireable<string>;
+            buttons: PropTypes.Validator<(PropTypes.InferProps<{
+                'data-name': PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                label: PropTypes.Validator<string>;
+                onClick: PropTypes.Validator<(...args: any[]) => any>;
+                type: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            menuButtonClassName: PropTypes.Requireable<string>;
+            isBulkMenu: PropTypes.Requireable<boolean>;
+        }> | null | undefined>>;
+    }> | null | undefined)[]>;
+    stickyFirstColumn: PropTypes.Requireable<boolean>;
+    stickyLastColumn: PropTypes.Requireable<boolean>;
+    columnWidth: PropTypes.Requireable<string>;
+    ariaDescribedby: PropTypes.Requireable<string>;
+    lastField: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
+        componentType: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
+        'data-name': PropTypes.Requireable<string>;
+        'data-testid': PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<{
+            position: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+        }>>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        link: PropTypes.Requireable<PropTypes.InferProps<{
+            href: PropTypes.Requireable<string>;
+            download: PropTypes.Requireable<boolean>;
+            target: PropTypes.Requireable<string>;
+        }>>;
+        disabled: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+    }> | PropTypes.InferProps<{
+        componentType: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        buttonAriaLabel: PropTypes.Requireable<string>;
+        menuAriaLabel: PropTypes.Requireable<string>;
+        buttons: PropTypes.Validator<(PropTypes.InferProps<{
+            'data-name': PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            label: PropTypes.Validator<string>;
+            onClick: PropTypes.Validator<(...args: any[]) => any>;
+            type: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        menuButtonClassName: PropTypes.Requireable<string>;
+        isBulkMenu: PropTypes.Requireable<boolean>;
+    }> | null | undefined>>;
+    isNestedTable: PropTypes.Requireable<boolean>;
+};
+export declare type Field = string | (StatusItemProps & {
+    componentType: 'status';
+}) | (BulkProgressBarProps & {
+    componentType: 'progress-bar';
+});
+export declare type LastField = (ButtonLinkProps & {
+    componentType: 'button-link';
+}) | (BulletPointMenuButtonProps & {
+    componentType: 'menu';
+});
+export declare type NestedRow = (ErrorsTableProps & {
+    componentType: 'errors-table';
+}) | (Props & {
+    componentType: 'expandible-errors-table';
+});
+export declare type Column = {
+    title: string;
+};
+export declare type Row = {
+    fields: Field[];
+    nestedRow?: NestedRow;
+    isRowExpandible?: boolean;
+};
+export declare type Columns = Column[];
+export declare type Rows = Row[];
+export declare type Props = {
+    columns: Columns;
+    rows?: Rows;
+    stickyFirstColumn?: boolean;
+    stickyLastColumn?: boolean;
+    columnWidth?: `${number}${'px' | '%'}`;
+    ariaDescribedby?: string;
+    lastField?: LastField;
+    isNestedTable?: boolean;
+};
+export declare type ExpandState = {
+    [key: number]: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/molecule/expandible-actionable-table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,KAAK,IAAI,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAC,KAAK,IAAI,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AA0BzE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBrB,CAAC;AAEF,oBAAY,KAAK,GACb,MAAM,GACN,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,QAAQ,CAAC;CACzB,CAAC,GACF,CAAC,oBAAoB,GAAG;IACtB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC,GACF,CAAC,0BAA0B,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,gBAAgB,GAAG;IAClB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,GACF,CAAC,KAAK,GAAG;IACP,aAAa,EAAE,yBAAyB,CAAC;CAC1C,CAAC,CAAC;AAEP,oBAAY,MAAM,GAAG;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC;AACrC,oBAAY,GAAG,GAAG;IAChB,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AACF,oBAAY,OAAO,GAAG,MAAM,EAAE,CAAC;AAC/B,oBAAY,IAAI,GAAG,GAAG,EAAE,CAAC;AAEzB,oBAAY,KAAK,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,CAAC"}

package/lib/molecule/expandible-actionable-table/types.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _statusItem = _interopRequireDefault(require("../../atom/status-item"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _bulletPointMenuButton = _interopRequireDefault(require("../bullet-point-menu-button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+const columnProptypes = _propTypes.default.shape({
+  title: _propTypes.default.string.isRequired
+});
+
+const rowProptypes = _propTypes.default.shape({
+  fields: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape(_extends({}, _statusItem.default.propTypes, {
+    type: _propTypes.default.oneOf(['status'])
+  }))])),
+  isRowExpandible: _propTypes.default.bool,
+  lastField: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape(_extends({}, _bulletPointMenuButton.default.propTypes, {
+    type: _propTypes.default.oneOf(['menu'])
+  }))])
+});
+
+const propTypes = {
+  columns: _propTypes.default.arrayOf(columnProptypes),
+  rows: _propTypes.default.arrayOf(rowProptypes),
+  stickyFirstColumn: _propTypes.default.bool,
+  stickyLastColumn: _propTypes.default.bool,
+  columnWidth: _propTypes.default.string,
+  ariaDescribedby: _propTypes.default.string,
+  lastField: _propTypes.default.oneOfType([_propTypes.default.shape(_extends({}, _buttonLink.default.propTypes, {
+    componentType: _propTypes.default.oneOf(['button-link'])
+  })), _propTypes.default.shape(_extends({}, _bulletPointMenuButton.default.propTypes, {
+    componentType: _propTypes.default.oneOf(['menu'])
+  }))]),
+  isNestedTable: _propTypes.default.bool
+};
+exports.propTypes = propTypes;
+//# sourceMappingURL=types.js.map