@papillonarts/components 0.8.0 → 0.9.0

package/build/primer/Grid/FlexGrid/FlexGrid.js

@@ -1,244 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FlexGrid = FlexGrid;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _uuid = require("uuid");
-var _string = require("@papillonarts/library/string");
-var _sort = require("@papillonarts/library/sort");
-var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
-var _flexbox = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/flexbox.scss"));
-var _borders = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/borders.scss"));
-var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
-var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
-var _typography = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/typography.scss"));
-var _layout = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/layout.scss"));
-var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
-var _index = _interopRequireDefault(require("@papillonarts/css/build/primer/truncate/index.scss"));
-var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
-var _FlexGrid = require("./FlexGrid.prop");
-var _FlexGrid2 = _interopRequireDefault(require("./FlexGrid.scss"));
-var _Radio = require("../../Form/Radio");
-var _Checkbox = require("../../Form/Checkbox");
-var _Icon = require("../../Icon");
-var _jsxRuntime = require("react/jsx-runtime");
-function FlexGrid(_ref) {
-  var _items$;
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _FlexGrid.defaultProps.className : _ref$className,
-    items = _ref.items,
-    _ref$idIndex = _ref.idIndex,
-    idIndex = _ref$idIndex === void 0 ? _FlexGrid.defaultProps.idIndex : _ref$idIndex,
-    _ref$isSelectedIndex = _ref.isSelectedIndex,
-    isSelectedIndex = _ref$isSelectedIndex === void 0 ? _FlexGrid.defaultProps.isSelectedIndex : _ref$isSelectedIndex,
-    _ref$selection = _ref.selection,
-    selection = _ref$selection === void 0 ? _FlexGrid.defaultProps.selection : _ref$selection,
-    sort = _ref.sort,
-    _ref$onChange = _ref.onChange,
-    _onChange = _ref$onChange === void 0 ? _FlexGrid.defaultProps.onChange : _ref$onChange,
-    _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? _FlexGrid.defaultProps.onClick : _ref$onClick,
-    _ref$onDoubleClick = _ref.onDoubleClick,
-    _onDoubleClick = _ref$onDoubleClick === void 0 ? _FlexGrid.defaultProps.onDoubleClick : _ref$onDoubleClick,
-    _ref$iconColor = _ref.iconColor,
-    iconColor = _ref$iconColor === void 0 ? _FlexGrid.defaultProps.iconColor : _ref$iconColor,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? _FlexGrid.defaultProps.state : _ref$state;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _FlexGrid2["default"]['flexGrid-inactive'], state === _FlexGrid.flexGridState.inactive)),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _colors["default"]['bg-blue-light'], (0, _defineProperty2["default"])({}, _borders["default"].border, items === null || items === void 0 ? void 0 : items[0])),
-      children: items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 || (_items$ = _items$.names) === null || _items$ === void 0 ? void 0 : _items$.map(function (name, nameIndex) {
-        var _items$2;
-        var isIdColumn = nameIndex === idIndex;
-        var isSelectedColumn = nameIndex === isSelectedIndex;
-        var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-          ariaAttr: {
-            describedBy: name
-          },
-          isChecked: items.map(function (item) {
-            return item.values[1];
-          }).every(function (isSelected) {
-            return isSelected === true;
-          }),
-          onChange: function onChange(event) {
-            var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref2) {
-              var values = _ref2.values;
-              return values === null || values === void 0 ? void 0 : values.map(function (value, valueIndex) {
-                return valueIndex === isSelectedIndex ? event.target.checked : value;
-              });
-            }).map(function (newItem) {
-              return {
-                id: newItem[idIndex],
-                isSelected: newItem[isSelectedIndex]
-              };
-            });
-            _onChange(newItems);
-          }
-        });
-        var sortComponent;
-        if (sort.index === nameIndex && sort.value === name) {
-          if (sort.order === _sort.sortOrder.ascending) {
-            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-              icon: _Icon.iconName.TriangleUp16,
-              size: _Icon.iconSize.small,
-              fill: iconColor.sort
-            });
-          } else {
-            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-              icon: _Icon.iconName.TriangleDown16,
-              size: _Icon.iconSize.small,
-              fill: iconColor.sort
-            });
-          }
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-          children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames["default"])(_typography["default"].h6, _visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _FlexGrid2["default"].item, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-between'], !isSelectedColumn)),
-            onClick: function onClick() {
-              if (!isSelectedColumn) {
-                _onClick({
-                  index: nameIndex,
-                  value: name,
-                  order: sort.order
-                });
-              }
-            },
-            onKeyPress: function onKeyPress() {},
-            role: "button",
-            tabIndex: 0,
-            children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _layout["default"]['width-full']),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
-                children: (0, _string.getCapizalizedString)({
-                  string: name
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-items-start'], _margin["default"]['ml-1']),
-                children: [sortComponent, nameIndex < (items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ?
-                /*#__PURE__*/
-                // eslint-disable-line no-unsafe-optional-chaining
-                (0, _jsxRuntime.jsx)("span", {
-                  className: (0, _classnames["default"])(_margin["default"]['ml-1'], _colors["default"]['text-gray-light']),
-                  children: " |"
-                }) : null]
-              })]
-            })
-          })
-        }, (0, _uuid.v1)());
-      })
-    }), items === null || items === void 0 ? void 0 : items.map(function (item, itemIndex) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _borders["default"].border, _FlexGrid2["default"].item, _FlexGrid2["default"].row),
-        onClick: function onClick() {
-          var bubleUpNewItems = true;
-          var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref3, newItemIndex) {
-            var values = _ref3.values;
-            return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
-              if ((0, _typeof2["default"])(newValue) === 'object' && ['FileDirectory16', 'File16'].includes(newValue === null || newValue === void 0 ? void 0 : newValue.icon)) {
-                bubleUpNewItems = false;
-              }
-              return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? !newValue : newValue;
-            });
-          }).map(function (newItem) {
-            return {
-              id: newItem[idIndex],
-              isSelected: newItem[isSelectedIndex]
-            };
-          });
-          if (bubleUpNewItems) {
-            _onChange(newItems);
-          }
-        },
-        onKeyPress: function onKeyPress() {},
-        role: "button",
-        tabIndex: 0,
-        onDoubleClick: function onDoubleClick() {
-          _onDoubleClick(itemIndex);
-        },
-        children: item.values.map(function (value, valueIndex) {
-          var isIdColumn = valueIndex === idIndex;
-          var isSelectedColumn = valueIndex === isSelectedIndex;
-          var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.Radio, {
-            name: "isSelected",
-            isChecked: item.values[isSelectedIndex] === true,
-            onChange: function onChange(event) {
-              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref4, newItemIndex) {
-                var names = _ref4.names,
-                  values = _ref4.values;
-                return {
-                  names: names,
-                  values: values.map(function (newValue, newValueIndex) {
-                    if (newItemIndex === itemIndex && newValueIndex === isSelectedIndex) {
-                      return event.target.checked;
-                    }
-                    if (newItemIndex === itemIndex && newValueIndex !== isSelectedIndex) {
-                      return newValue;
-                    }
-                    if (newItemIndex !== itemIndex && newValueIndex === isSelectedIndex) {
-                      return false;
-                    }
-                    if (newItemIndex !== itemIndex && newValueIndex !== isSelectedIndex) {
-                      return newValue;
-                    }
-                    return newValue;
-                  })
-                };
-              });
-              _onChange(newItems);
-            }
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-            ariaAttr: {
-              describedBy: 'isSelected'
-            },
-            isChecked: item.values[isSelectedIndex] === true,
-            onChange: function onChange(event) {
-              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref5, newItemIndex) {
-                var values = _ref5.values;
-                return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
-                  return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? event.target.checked : newValue;
-                });
-              }).map(function (newItem) {
-                return {
-                  id: newItem[idIndex],
-                  isSelected: newItem[isSelectedIndex]
-                };
-              });
-              _onChange(newItems);
-            }
-          });
-          var iconComponent = value !== null && value !== void 0 && value.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-            icon: _Icon.iconName[value.icon],
-            size: _Icon.iconSize.small,
-            fill: iconColor.object
-          }) : null;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-            children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _typography["default"]['no-wrap'], (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-start'], !isSelectedColumn)),
-              children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
-                children: [(value === null || value === void 0 ? void 0 : value.icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-                  children: [iconComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    className: _margin["default"]['ml-2'],
-                    children: value.value
-                  })]
-                }), value instanceof Date && "".concat(value.toLocaleDateString(), " ").concat(value.toLocaleTimeString()), Array.isArray(value) && value.find(function (_ref6) {
-                  var isSelected = _ref6.isSelected;
-                  return isSelected === true;
-                }).text, !(value !== null && value !== void 0 && value.icon) && !(value instanceof Date) && !Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.toString())]
-              })
-            }, (0, _uuid.v1)())
-          }, (0, _uuid.v1)());
-        })
-      }, (0, _uuid.v1)());
-    })]
-  });
-}
-FlexGrid.propTypes = _FlexGrid.propTypes;

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

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.flexGridState = exports.flexGridSelection = exports.defaultProps = void 0;
-var _propTypes = require("prop-types");
-var flexGridState = exports.flexGridState = {
-  active: 'active',
-  inactive: 'inactive'
-};
-var flexGridSelection = exports.flexGridSelection = {
-  checkbox: 'checkbox',
-  radio: 'radio'
-};
-var propTypes = exports.propTypes = {
-  className: _propTypes.string,
-  items: _propTypes.array.isRequired,
-  idIndex: _propTypes.number,
-  isSelectedIndex: _propTypes.number,
-  selection: (0, _propTypes.oneOf)(Object.keys(flexGridSelection)),
-  sort: (0, _propTypes.shape)({
-    index: _propTypes.number,
-    value: _propTypes.string,
-    order: _propTypes.string
-  }).isRequired,
-  onChange: _propTypes.func,
-  onClick: _propTypes.func,
-  onDoubleClick: _propTypes.func,
-  iconColor: (0, _propTypes.shape)({
-    sort: _propTypes.string,
-    object: _propTypes.string
-  }),
-  state: (0, _propTypes.oneOf)(Object.keys(flexGridState))
-};
-var defaultProps = exports.defaultProps = {
-  className: null,
-  idIndex: -1,
-  isSelectedIndex: -1,
-  selection: flexGridSelection.checkbox,
-  onChange: function onChange() {},
-  onClick: function onClick() {},
-  onDoubleClick: function onDoubleClick() {},
-  iconColor: {
-    sort: '#990000',
-    object: '#79b8ff'
-  },
-  state: flexGridState.active
-};

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

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "FlexGrid", {
-  enumerable: true,
-  get: function get() {
-    return _FlexGrid.FlexGrid;
-  }
-});
-Object.defineProperty(exports, "flexGridSelection", {
-  enumerable: true,
-  get: function get() {
-    return _FlexGrid2.flexGridSelection;
-  }
-});
-Object.defineProperty(exports, "flexGridState", {
-  enumerable: true,
-  get: function get() {
-    return _FlexGrid2.flexGridState;
-  }
-});
-var _FlexGrid = require("./FlexGrid");
-var _FlexGrid2 = require("./FlexGrid.prop");

package/build/primer/Grid/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Grid = void 0;
-var _DisplayTable = require("./DisplayTable");
-var _FlexGrid = require("./FlexGrid");
-var Grid = exports.Grid = {
-  DisplayTable: _DisplayTable.DisplayTable,
-  FlexGrid: _FlexGrid.FlexGrid,
-  flexGridSelection: _FlexGrid.flexGridSelection,
-  flexGridState: _FlexGrid.flexGridState
-};

package/build/primer/Icon/Icon.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Icon = Icon;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _Icon = require("./Icon.prop");
-var _Icon2 = require("./Icon.part");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "ariaLabel", "icon", "height", "width", "size", "fill", "verticalAlign"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var defaultSize = [16, 16];
-function Icon(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _Icon.defaultProps.className : _ref$className,
-    _ref$ariaLabel = _ref.ariaLabel,
-    ariaLabel = _ref$ariaLabel === void 0 ? _Icon.defaultProps.ariaLabel : _ref$ariaLabel,
-    icon = _ref.icon,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? _Icon.defaultProps.height : _ref$height,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? _Icon.defaultProps.width : _ref$width,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? _Icon.defaultProps.size : _ref$size,
-    _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? _Icon.defaultProps.fill : _ref$fill,
-    _ref$verticalAlign = _ref.verticalAlign,
-    verticalAlign = _ref$verticalAlign === void 0 ? _Icon.defaultProps.verticalAlign : _ref$verticalAlign,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var widthHeight = defaultSize;
-  var attrs = {
-    className: className,
-    'aria-hidden': ariaLabel ? 'false' : 'true',
-    'aria-label': ariaLabel,
-    height: height,
-    role: 'img',
-    viewBox: [0, 0].concat((0, _toConsumableArray2["default"])(widthHeight)).join(' ')
-  };
-  if (width && height) {
-    Object.assign(attrs, {
-      width: width,
-      height: height
-    });
-  } else {
-    var dims = {
-      width: widthHeight[0],
-      height: widthHeight[1]
-    };
-    var given = width ? 'width' : 'height';
-    var computed = given === 'width' ? 'height' : 'width';
-    attrs[given] = width || height || _Icon.iconSize[size] || size;
-    attrs[computed] = attrs[given] * (dims[computed] / dims[given]);
-  }
-  attrs.style = {
-    display: 'inline-block',
-    fill: fill,
-    userSelect: 'none',
-    verticalAlign: _Icon.iconAlign[verticalAlign] || verticalAlign
-  };
-  var Element = _Icon2.iconComponents[icon];
-  return Element != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, _objectSpread(_objectSpread({
-    className: className
-  }, attrs), otherProps)) : null;
-}
-Icon.propTypes = _Icon.propTypes;