@papillonarts/components 0.10.0 → 0.11.0

package/build/primer/Dropdown/Dropdown.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = Dropdown;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _details = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/details.scss"));
+var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
+var _layout = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/layout.scss"));
+var _flexbox = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/flexbox.scss"));
+var _array = require("@papillonarts/library/array");
+var _hooks = require("@papillonarts/library/hooks");
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+var _Dropdown = require("./Dropdown.prop");
+var _Dropdown2 = _interopRequireDefault(require("./Dropdown.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Dropdown(_ref) {
+  var _ariaAttr$haspopup;
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Dropdown.defaultProps.className : _ref$className,
+    summary = _ref.summary,
+    _ref$ariaAttr = _ref.ariaAttr,
+    ariaAttr = _ref$ariaAttr === void 0 ? _Dropdown.defaultProps.ariaAttr : _ref$ariaAttr,
+    items = _ref.items,
+    _onClick = _ref.onClick,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Dropdown.defaultProps.state : _ref$state;
+  var details = (0, _hooks.useRef)(null);
+  if (!items) {
+    return null;
+  }
+  var indexItems = (0, _array.getIndexItems)(items);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+      ref: details,
+      className: (0, _classnames["default"])(_Dropdown2["default"].dropdown, _details["default"]['details-reset'], _details["default"]['details-overlay'], _visibilityDisplay["default"]['d-inline-block'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
+        className: (0, _classnames["default"])(_Button["default"].btn),
+        "aria-haspopup": (_ariaAttr$haspopup = ariaAttr === null || ariaAttr === void 0 ? void 0 : ariaAttr.haspopup) !== null && _ariaAttr$haspopup !== void 0 ? _ariaAttr$haspopup : false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _flexbox["default"]['flex-items-center'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: summary
+          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _Dropdown2["default"]['dropdown-caret']
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _classnames["default"])(_Dropdown2["default"]['dropdown-menu'], _Dropdown2["default"]['dropdown-menu-se'], _layout["default"]['width-full']),
+        children: indexItems.map(function (indexItem) {
+          var href = indexItem.href,
+            text = indexItem.text;
+
+          // const itemOtherProps = isSelected ? { ...{ 'aria-current': ariaAttr?.current } } : null
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              onClick: function onClick(e) {
+                e.preventDefault();
+                var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+                _onClick({
+                  summary: text,
+                  ariaAttr: ariaAttr,
+                  items: newIndexItems.map(function (newIndexItem) {
+                    return function (_ref2) {
+                      var newIndexItemId = _ref2.id,
+                        newIndexItemHref = _ref2.href,
+                        newIndexItemText = _ref2.text,
+                        dateModified = _ref2['date-modified'],
+                        dateCreated = _ref2['date-created'],
+                        newIndexItemIsSelected = _ref2.isSelected;
+                      return {
+                        id: newIndexItemId,
+                        href: newIndexItemHref,
+                        text: newIndexItemText,
+                        'date-modified': dateModified,
+                        'date-created': dateCreated,
+                        isSelected: newIndexItemIsSelected
+                      };
+                    }(newIndexItem);
+                  })
+                });
+                details.current.removeAttribute('open');
+              },
+              className: _Dropdown2["default"]['dropdown-item'],
+              href: href
+              // @ts-ignore
+              // {...itemOtherProps}
+              ,
+              children: text
+            })
+          }, (0, _uuid.v1)());
+        })
+      })]
+    })
+  });
+}

package/build/primer/Dropdown/Dropdown.prop.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dropdownState = exports.defaultProps = void 0;
+var dropdownState = exports.dropdownState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  ariaAttr: {
+    haspopup: false,
+    current: 'page'
+  },
+  state: dropdownState.active
+};

package/build/primer/Dropdown/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.Dropdown;
+  }
+});
+Object.defineProperty(exports, "dropdownState", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown2.dropdownState;
+  }
+});
+var _Dropdown = require("./Dropdown");
+var _Dropdown2 = require("./Dropdown.prop");

package/build/primer/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundary = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable no-unused-vars, no-console */
+var ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_Component) {
+  function ErrorBoundary(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ErrorBoundary);
+    _this = _callSuper(this, ErrorBoundary, [props]);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(ErrorBoundary, _Component);
+  return (0, _createClass2["default"])(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // You can also log the error to an error reporting service
+      console.log('~error~', error);
+      console.log('~errorInfo~', errorInfo);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      // @ts-ignore
+      var hasError = this.state.hasError;
+      // @ts-ignore
+      var children = this.props.children;
+      if (hasError) {
+        // You can render any custom fallback UI
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+          children: "Something went wrong."
+        });
+      }
+      return children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      // Update state so the next render will show the fallback UI.
+      return {
+        hasError: true
+      };
+    }
+  }]);
+}(_react.Component);

package/build/primer/ErrorBoundary/ErrorBoundary.prop.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = exports.defaultProps = {};

package/build/primer/ErrorBoundary/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ErrorBoundary", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorBoundary.ErrorBoundary;
+  }
+});
+var _ErrorBoundary = require("./ErrorBoundary");

package/build/primer/Form/Checkbox/Checkbox.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = Checkbox;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
+var _Checkbox = require("./Checkbox.prop");
+var _Checkbox2 = _interopRequireDefault(require("./Checkbox.scss"));
+var _index = _interopRequireDefault(require("../index.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Checkbox(_ref) {
+  var _ref$dataTest = _ref.dataTest,
+    dataTest = _ref$dataTest === void 0 ? _Checkbox.defaultProps.dataTest : _ref$dataTest,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Checkbox.defaultProps.className : _ref$className,
+    _ref$htmlFor = _ref.htmlFor,
+    htmlFor = _ref$htmlFor === void 0 ? _Checkbox.defaultProps.htmlFor : _ref$htmlFor,
+    ariaAttr = _ref.ariaAttr,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? _Checkbox.defaultProps.inputType : _ref$inputType,
+    _ref$isChecked = _ref.isChecked,
+    isChecked = _ref$isChecked === void 0 ? _Checkbox.defaultProps.isChecked : _ref$isChecked,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? _Checkbox.defaultProps.text : _ref$text,
+    _onChange = _ref.onChange,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Checkbox.defaultProps.state : _ref$state;
+  var describedBy = ariaAttr.describedBy;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-test": dataTest,
+    className: (0, _classnames["default"])(className, _margin["default"]['m-0'], _index["default"]['form-checkbox'], (0, _defineProperty2["default"])({}, _Checkbox2["default"]['checkbox-inactive'], state === _Checkbox.checkboxState.inactive)),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      htmlFor: htmlFor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: inputType,
+        "aria-describedby": describedBy,
+        onChange: function onChange(event) {
+          _onChange(event);
+        },
+        checked: isChecked
+      }), text]
+    })
+  });
+}

package/build/primer/Form/Checkbox/Checkbox.prop.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inputType = exports.defaultProps = exports.checkboxState = void 0;
+var checkboxState = exports.checkboxState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var inputType = exports.inputType = {
+  checkbox: 'checkbox'
+};
+var defaultProps = exports.defaultProps = {
+  dataTest: null,
+  className: null,
+  htmlFor: 'checkbox',
+  inputType: inputType.checkbox,
+  isChecked: false,
+  text: null,
+  state: checkboxState.active
+};

package/build/primer/Form/Checkbox/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "checkboxState", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox2.checkboxState;
+  }
+});
+var _Checkbox = require("./Checkbox");
+var _Checkbox2 = require("./Checkbox.prop");

package/build/primer/Form/Input/Input.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = Input;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Input = require("./Input.prop");
+var _Input2 = _interopRequireDefault(require("./Input.scss"));
+var _index = _interopRequireDefault(require("../index.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Input(_ref) {
+  var _ref$dataTest = _ref.dataTest,
+    dataTest = _ref$dataTest === void 0 ? _Input.defaultProps.dataTest : _ref$dataTest,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? _Input.defaultProps.id : _ref$id,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Input.defaultProps.className : _ref$className,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? _Input.defaultProps.placeholder : _ref$placeholder,
+    _ref$ariaAttr = _ref.ariaAttr,
+    ariaAttr = _ref$ariaAttr === void 0 ? _Input.defaultProps.ariaAttr : _ref$ariaAttr,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? _Input.defaultProps.inputType : _ref$inputType,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    _onKeyUp = _ref.onKeyUp,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? _Input.defaultProps.onFocus : _ref$onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? _Input.defaultProps.onBlur : _ref$onBlur,
+    autoFocus = _ref.autoFocus,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Input.defaultProps.state : _ref$state;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    "data-test": dataTest,
+    id: id,
+    className: (0, _classnames["default"])(className, _index["default"]['form-control'], (0, _defineProperty2["default"])({}, _Input2["default"]['input-inactive'], state === _Input.inputState.inactive)),
+    value: value,
+    onChange: function onChange(event) {
+      _onChange(event);
+    },
+    onKeyUp: function onKeyUp(event) {
+      _onKeyUp(event);
+    },
+    onFocus: onFocus,
+    onBlur: onBlur,
+    type: inputType,
+    placeholder: placeholder,
+    "aria-label": ariaAttr.label,
+    autoFocus: autoFocus // eslint-disable-line
+  });
+}

package/build/primer/Form/Input/Input.prop.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inputType = exports.inputState = exports.defaultProps = void 0;
+var inputState = exports.inputState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var inputType = exports.inputType = {
+  text: 'text',
+  password: 'password'
+};
+var defaultProps = exports.defaultProps = {
+  dataTest: null,
+  id: null,
+  className: null,
+  placeholder: null,
+  ariaAttr: {
+    label: ''
+  },
+  inputType: inputType.text,
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  state: inputState.active
+};

package/build/primer/Form/Input/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.Input;
+  }
+});
+Object.defineProperty(exports, "inputState", {
+  enumerable: true,
+  get: function get() {
+    return _Input2.inputState;
+  }
+});
+Object.defineProperty(exports, "inputType", {
+  enumerable: true,
+  get: function get() {
+    return _Input2.inputType;
+  }
+});
+var _Input = require("./Input");
+var _Input2 = require("./Input.prop");

package/build/primer/Form/Radio/Radio.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = Radio;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
+var _Radio = require("./Radio.prop");
+var _Radio2 = _interopRequireDefault(require("./Radio.scss"));
+var _index = _interopRequireDefault(require("../index.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Radio(_ref) {
+  var _ref$dataTest = _ref.dataTest,
+    dataTest = _ref$dataTest === void 0 ? _Radio.defaultProps.dataTest : _ref$dataTest,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Radio.defaultProps.className : _ref$className,
+    _ref$htmlFor = _ref.htmlFor,
+    htmlFor = _ref$htmlFor === void 0 ? _Radio.defaultProps.htmlFor : _ref$htmlFor,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? _Radio.defaultProps.inputType : _ref$inputType,
+    name = _ref.name,
+    _ref$isChecked = _ref.isChecked,
+    isChecked = _ref$isChecked === void 0 ? _Radio.defaultProps.isChecked : _ref$isChecked,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? _Radio.defaultProps.text : _ref$text,
+    _onChange = _ref.onChange,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Radio.defaultProps.state : _ref$state;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-test": dataTest,
+    className: (0, _classnames["default"])(className, _margin["default"]['m-0'], _index["default"]['form-checkbox'], (0, _defineProperty2["default"])({}, _Radio2["default"]['radio-inactive'], state === _Radio.radioState.inactive)),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      htmlFor: htmlFor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: inputType,
+        name: name,
+        onChange: function onChange(event) {
+          _onChange(event);
+        },
+        checked: isChecked
+      }), text]
+    })
+  });
+}

package/build/primer/Form/Radio/Radio.prop.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.radioState = exports.inputType = exports.defaultProps = void 0;
+var radioState = exports.radioState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var inputType = exports.inputType = {
+  radio: 'radio'
+};
+var defaultProps = exports.defaultProps = {
+  dataTest: null,
+  className: null,
+  htmlFor: 'checkbox',
+  inputType: inputType.radio,
+  isChecked: false,
+  text: null,
+  state: radioState.active
+};

package/build/primer/Form/Radio/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _Radio.Radio;
+  }
+});
+Object.defineProperty(exports, "radioState", {
+  enumerable: true,
+  get: function get() {
+    return _Radio2.radioState;
+  }
+});
+var _Radio = require("./Radio");
+var _Radio2 = require("./Radio.prop");

package/build/primer/Form/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = void 0;
+var _Checkbox = require("./Checkbox");
+var _Input = require("./Input");
+var _Radio = require("./Radio");
+var Form = exports.Form = {
+  Checkbox: {
+    Checkbox: _Checkbox.Checkbox,
+    checkboxState: _Checkbox.checkboxState
+  },
+  Input: {
+    Input: _Input.Input,
+    inputType: _Input.inputType,
+    inputState: _Input.inputState
+  },
+  Radio: {
+    Radio: _Radio.Radio,
+    radioState: _Radio.radioState
+  }
+};

package/build/primer/Grid/DisplayTable/DisplayTable.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisplayTable = DisplayTable;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
+var _borders = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/borders.scss"));
+var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
+var _typography = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/typography.scss"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
+var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
+var _DisplayTable = require("./DisplayTable.prop");
+var _jsxRuntime = require("react/jsx-runtime");
+function DisplayTable(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _DisplayTable.defaultProps.className : _ref$className,
+    items = _ref.items,
+    _ref$idIndex = _ref.idIndex,
+    idIndex = _ref$idIndex === void 0 ? _DisplayTable.defaultProps.idIndex : _ref$idIndex,
+    _ref$isSelectedIndex = _ref.isSelectedIndex,
+    isSelectedIndex = _ref$isSelectedIndex === void 0 ? _DisplayTable.defaultProps.isSelectedIndex : _ref$isSelectedIndex;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(className, _visibilityDisplay["default"]['d-table'], _grid["default"]['col-12'], _colors["default"]['bg-blue-light']),
+      children: items[0].names.map(function (name, index) {
+        var isIdColumn = index === idIndex;
+        var isSelectedColumn = index === isSelectedIndex;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+          children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames["default"])(_grid["default"]['col-2'], _visibilityDisplay["default"]['d-table-cell'], _borders["default"].border, _padding["default"]['p-2'], _typography["default"].h6),
+            children: isSelectedColumn ? '' : name
+          }, (0, _uuid.v1)())
+        }, (0, _uuid.v1)());
+      })
+    }), items.map(function (item) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])(className, _visibilityDisplay["default"]['d-table'], _grid["default"]['col-12']),
+        children: item.values.map(function (value, valueIndex) {
+          var _value$value;
+          var isIdColumn = valueIndex === idIndex;
+          var isSelectedColumn = valueIndex === isSelectedIndex;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+            children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])(_grid["default"]['col-2'], _visibilityDisplay["default"]['d-table-cell'], _borders["default"].border, _padding["default"]['p-2']),
+              children: isSelectedColumn ? '' : (_value$value = value === null || value === void 0 ? void 0 : value.value) !== null && _value$value !== void 0 ? _value$value : value
+            }, (0, _uuid.v1)())
+          }, (0, _uuid.v1)());
+        })
+      }, (0, _uuid.v1)());
+    })]
+  });
+}

package/build/primer/Grid/DisplayTable/DisplayTable.prop.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = exports.defaultProps = {
+  className: null,
+  idIndex: -1,
+  isSelectedIndex: -1
+};

package/build/primer/Grid/DisplayTable/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DisplayTable", {
+  enumerable: true,
+  get: function get() {
+    return _DisplayTable.DisplayTable;
+  }
+});
+var _DisplayTable = require("./DisplayTable");