@nulogy/components 10.2.1 → 10.2.3

package/dist/main.js

@@ -21970,6 +21970,32 @@
       };
     };
 
+    var getSubset = function getSubset(o, propObj) {
+      var fields = Object.keys(propObj);
+      return pick.apply(void 0, [o].concat(fields));
+    };
+    var omitSubset = function omitSubset(o, propObj) {
+      var fields = Object.keys(propObj);
+      var objectProps = Object.keys(o);
+      return objectProps.reduce(function (a, x) {
+        if (!fields.includes(x)) a[x] = o[x];
+        return a;
+      }, {});
+    };
+
+    var pick = function pick(o) {
+      var objectProps = Object.keys(o);
+
+      for (var _len = arguments.length, fields = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        fields[_key - 1] = arguments[_key];
+      }
+
+      return fields.reduce(function (a, x) {
+        if (objectProps.includes(x)) a[x] = o[x];
+        return a;
+      }, {});
+    };
+
     var StyledOption = styled__default["default"].div.withConfig({
       displayName: "SelectOption__StyledOption",
       componentId: "sc-i7ae6z-0"
@@ -22012,41 +22038,16 @@
         }
       }, size);
     });
-    function SelectOption(props) {
+    function SelectOption$1(props) {
+      var size = useComponentSize(props.size);
       return /*#__PURE__*/React__default["default"].createElement(StyledOption, {
         isSelected: props.isSelected,
         isFocused: props.isFocused,
-        size: props.size,
+        size: size,
         "data-testid": "select-option"
-      }, /*#__PURE__*/React__default["default"].createElement(WindowedSelect.components.Option, Object.assign({}, props)));
+      }, /*#__PURE__*/React__default["default"].createElement(WindowedSelect.components.Option, Object.assign({}, props), props.children));
     }
 
-    var getSubset = function getSubset(o, propObj) {
-      var fields = Object.keys(propObj);
-      return pick.apply(void 0, [o].concat(fields));
-    };
-    var omitSubset = function omitSubset(o, propObj) {
-      var fields = Object.keys(propObj);
-      var objectProps = Object.keys(o);
-      return objectProps.reduce(function (a, x) {
-        if (!fields.includes(x)) a[x] = o[x];
-        return a;
-      }, {});
-    };
-
-    var pick = function pick(o) {
-      var objectProps = Object.keys(o);
-
-      for (var _len = arguments.length, fields = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        fields[_key - 1] = arguments[_key];
-      }
-
-      return fields.reduce(function (a, x) {
-        if (objectProps.includes(x)) a[x] = o[x];
-        return a;
-      }, {});
-    };
-
     var SelectControl$1 = function SelectControl(props) {
       // eslint-disable-next-line react/prop-types
       var isFocused = props.isFocused;
@@ -22055,32 +22056,32 @@
       }, /*#__PURE__*/React__default["default"].createElement(components.Control, Object.assign({
         className: isFocused ? "nds-select--is-focused" : null,
         isFocused: isFocused
-      }, props)));
+      }, props), props.children));
     };
     var SelectMultiValue$1 = function SelectMultiValue(props) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "select-multivalue"
-      }, /*#__PURE__*/React__default["default"].createElement(components.MultiValue, Object.assign({}, props)));
+      }, /*#__PURE__*/React__default["default"].createElement(components.MultiValue, Object.assign({}, props), props.children));
     };
     var SelectClearIndicator$1 = function SelectClearIndicator(props) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "select-clear"
-      }, /*#__PURE__*/React__default["default"].createElement(components.ClearIndicator, Object.assign({}, props)));
+      }, /*#__PURE__*/React__default["default"].createElement(components.ClearIndicator, Object.assign({}, props), props.children));
     };
     var SelectDropdownIndicator$1 = function SelectDropdownIndicator(props) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "select-arrow"
-      }, /*#__PURE__*/React__default["default"].createElement(components.DropdownIndicator, Object.assign({}, props)));
+      }, /*#__PURE__*/React__default["default"].createElement(components.DropdownIndicator, Object.assign({}, props), props.children));
     };
     var SelectContainer$1 = function SelectContainer(props) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "select-container"
-      }, /*#__PURE__*/React__default["default"].createElement(components.SelectContainer, Object.assign({}, props)));
+      }, /*#__PURE__*/React__default["default"].createElement(components.SelectContainer, Object.assign({}, props), props.children));
     };
     var SelectInput$1 = function SelectInput(props) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "select-input"
-      }, /*#__PURE__*/React__default["default"].createElement(components.Input, Object.assign({}, props)));
+      }, /*#__PURE__*/React__default["default"].createElement(components.Input, Object.assign({}, props), props.children));
     };
     var SelectMenu$1 = function SelectMenu(props) {
       if (!props.selectProps.inputValue && props.options.length === 0) {
@@ -22089,8 +22090,17 @@
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "select-dropdown"
-      }, /*#__PURE__*/React__default["default"].createElement(components.Menu, Object.assign({}, props)));
+      }, /*#__PURE__*/React__default["default"].createElement(components.Menu, Object.assign({}, props), props.children));
     };
+    function SelectOption(props) {
+      var size = useComponentSize(props.size);
+      return /*#__PURE__*/React__default["default"].createElement(StyledOption, {
+        isSelected: props.isSelected,
+        isFocused: props.isFocused,
+        size: size,
+        "data-testid": "select-option"
+      }, /*#__PURE__*/React__default["default"].createElement(components.Option, Object.assign({}, props), props.children));
+    }
 
     var AsyncSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var autocomplete = _a.autocomplete,
@@ -22176,7 +22186,7 @@
           Option: function Option(props) {
             return /*#__PURE__*/React__default["default"].createElement(SelectOption, Object.assign({
               size: componentSize
-            }, props));
+            }, props), props.children);
           },
           Control: SelectControl$1,
           MultiValue: SelectMultiValue$1,
@@ -49303,7 +49313,7 @@
         isMulti: multiselect,
         components: Object.assign({
           Option: function Option(props) {
-            return /*#__PURE__*/React__default["default"].createElement(SelectOption, Object.assign({
+            return /*#__PURE__*/React__default["default"].createElement(SelectOption$1, Object.assign({
               size: componentSize
             }, props));
           },
@@ -49430,27 +49440,34 @@
       };
     });
 
-    var defaultheaderFormatter = function defaultheaderFormatter(_ref2) {
-      var label = _ref2.label;
-      return label;
-    };
-
-    var renderHeaderCellContent = function renderHeaderCellContent(_ref3) {
-      var _ref3$headerFormatter = _ref3.headerFormatter,
-          headerFormatter = _ref3$headerFormatter === void 0 ? defaultheaderFormatter : _ref3$headerFormatter,
-          align = _ref3.align,
-          label = _ref3.label,
-          dataKey = _ref3.dataKey,
-          width = _ref3.width;
-      return headerFormatter({
+    function renderHeaderCellContent(_ref2) {
+      var _ref2$headerFormatter = _ref2.headerFormatter,
+          headerFormatter = _ref2$headerFormatter === void 0 ? function (_ref3) {
+        var label = _ref3.label;
+        return label;
+      } : _ref2$headerFormatter,
+          align = _ref2.align,
+          label = _ref2.label,
+          width = _ref2.width,
+          metadata = _ref2.metadata,
+          dataKey = _ref2.dataKey,
+          key = _ref2.key;
+      return key ? headerFormatter({
+        align: align,
+        label: label,
+        width: width,
+        metadata: metadata,
+        key: key
+      }) : headerFormatter({
         align: align,
         label: label,
-        dataKey: dataKey,
-        width: width
+        width: width,
+        metadata: metadata,
+        dataKey: dataKey
       });
-    };
+    }
 
-    var TableHead = function TableHead(_ref4) {
+    function TableHead(_ref4) {
       var columns = _ref4.columns,
           compact = _ref4.compact,
           sticky = _ref4.sticky;
@@ -49471,7 +49488,7 @@
       };
 
       return /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderRow, null, renderColumns(columns)));
-    };
+    }
 
     var columnPropType = PropTypes__default["default"].shape({
       align: PropTypes__default["default"].oneOf(["right", "left", "center"]),
@@ -49760,14 +49777,14 @@
       compact: PropTypes__default["default"].bool.isRequired
     };
 
-    var TableFoot = function TableFoot(_ref3) {
+    function TableFoot(_ref3) {
       var columns = _ref3.columns,
           rows = _ref3.rows,
           keyField = _ref3.keyField,
           loading = _ref3.loading,
           compact = _ref3.compact;
       return /*#__PURE__*/React__default["default"].createElement("tfoot", null, renderRows(rows, columns, keyField, loading, compact));
-    };
+    }
 
     TableFoot.propTypes = {
       columns: columnsPropType.isRequired,
@@ -49792,7 +49809,7 @@
       position: "relative"
     });
 
-    var BaseTable = function BaseTable(_a) {
+    function BaseTable(_a) {
       var columns = _a.columns,
           rows = _a.rows,
           _a$noRowsContent = _a.noRowsContent,
@@ -49838,7 +49855,7 @@
         loading: loading,
         compact: compact
       }));
-    };
+    }
 
     BaseTable.propTypes = Object.assign(Object.assign({}, propTypes.space), {
       columns: PropTypes__default["default"].any,
@@ -50347,7 +50364,7 @@
       active: false
     };
 
-    var Table = function Table(_a) {
+    function Table(_a) {
       var hasSelectableRows = _a.hasSelectableRows,
           rowsPerPage = _a.rowsPerPage,
           hasExpandableRows = _a.hasExpandableRows,
@@ -50374,7 +50391,7 @@
         paginationCss: paginationCss,
         paginationProps: paginationProps
       }, props)) : /*#__PURE__*/React__default["default"].createElement(BaseTable, Object.assign({}, props));
-    };
+    }
 
     Table.SortingHeader = SortingColumnHeader;
 
@@ -50385,7 +50402,7 @@
       });
     };
 
-    var applySort = function applySort(rows, sortColumn, columns) {
+    function applySort(rows, sortColumn, columns) {
       return [].concat(rows).sort(function (a, b) {
         var column = columns.find(function (col) {
           return col.dataKey === sortColumn;
@@ -50393,14 +50410,14 @@
         var numeric = column.numeric;
         return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
       });
-    };
+    }
 
-    var sortRows = function sortRows(rows, columns, sortState) {
+    function sortRows(rows, columns, sortState) {
       var sortedRows = applySort(rows, sortState.sortColumn, columns);
       return sortState.ascending ? sortedRows : sortedRows.reverse();
-    };
+    }
 
-    var SortingTable = function SortingTable(_a) {
+    function SortingTable(_a) {
       var incomingColumns = _a.columns,
           incomingRows = _a.rows,
           initialSortColumn = _a.initialSortColumn,
@@ -50459,7 +50476,7 @@
         columns: columns,
         rows: rows
       }, props));
-    };
+    }
 
     var StatusIndicatorValues = {
       neutral: "neutral",
@@ -52432,7 +52449,7 @@
     exports.SelectInput = SelectInput;
     exports.SelectMenu = SelectMenu;
     exports.SelectMultiValue = SelectMultiValue;
-    exports.SelectOption = SelectOption;
+    exports.SelectOption = SelectOption$1;
     exports.Sidebar = Sidebar;
     exports.SmallNavBar = SmallNavBar$1;
     exports.SortingTable = SortingTable;

package/dist/main.module.js

@@ -21953,6 +21953,32 @@ var customStyles = function customStyles(_ref6) {
   };
 };
 
+var getSubset = function getSubset(o, propObj) {
+  var fields = Object.keys(propObj);
+  return pick.apply(void 0, [o].concat(fields));
+};
+var omitSubset = function omitSubset(o, propObj) {
+  var fields = Object.keys(propObj);
+  var objectProps = Object.keys(o);
+  return objectProps.reduce(function (a, x) {
+    if (!fields.includes(x)) a[x] = o[x];
+    return a;
+  }, {});
+};
+
+var pick = function pick(o) {
+  var objectProps = Object.keys(o);
+
+  for (var _len = arguments.length, fields = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    fields[_key - 1] = arguments[_key];
+  }
+
+  return fields.reduce(function (a, x) {
+    if (objectProps.includes(x)) a[x] = o[x];
+    return a;
+  }, {});
+};
+
 var StyledOption = styled.div.withConfig({
   displayName: "SelectOption__StyledOption",
   componentId: "sc-i7ae6z-0"
@@ -21995,41 +22021,16 @@ var StyledOption = styled.div.withConfig({
     }
   }, size);
 });
-function SelectOption(props) {
+function SelectOption$1(props) {
+  var size = useComponentSize(props.size);
   return /*#__PURE__*/React__default.createElement(StyledOption, {
     isSelected: props.isSelected,
     isFocused: props.isFocused,
-    size: props.size,
+    size: size,
     "data-testid": "select-option"
-  }, /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props)));
+  }, /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props), props.children));
 }
 
-var getSubset = function getSubset(o, propObj) {
-  var fields = Object.keys(propObj);
-  return pick.apply(void 0, [o].concat(fields));
-};
-var omitSubset = function omitSubset(o, propObj) {
-  var fields = Object.keys(propObj);
-  var objectProps = Object.keys(o);
-  return objectProps.reduce(function (a, x) {
-    if (!fields.includes(x)) a[x] = o[x];
-    return a;
-  }, {});
-};
-
-var pick = function pick(o) {
-  var objectProps = Object.keys(o);
-
-  for (var _len = arguments.length, fields = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    fields[_key - 1] = arguments[_key];
-  }
-
-  return fields.reduce(function (a, x) {
-    if (objectProps.includes(x)) a[x] = o[x];
-    return a;
-  }, {});
-};
-
 var SelectControl$1 = function SelectControl(props) {
   // eslint-disable-next-line react/prop-types
   var isFocused = props.isFocused;
@@ -22038,32 +22039,32 @@ var SelectControl$1 = function SelectControl(props) {
   }, /*#__PURE__*/React__default.createElement(components.Control, Object.assign({
     className: isFocused ? "nds-select--is-focused" : null,
     isFocused: isFocused
-  }, props)));
+  }, props), props.children));
 };
 var SelectMultiValue$1 = function SelectMultiValue(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "select-multivalue"
-  }, /*#__PURE__*/React__default.createElement(components.MultiValue, Object.assign({}, props)));
+  }, /*#__PURE__*/React__default.createElement(components.MultiValue, Object.assign({}, props), props.children));
 };
 var SelectClearIndicator$1 = function SelectClearIndicator(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "select-clear"
-  }, /*#__PURE__*/React__default.createElement(components.ClearIndicator, Object.assign({}, props)));
+  }, /*#__PURE__*/React__default.createElement(components.ClearIndicator, Object.assign({}, props), props.children));
 };
 var SelectDropdownIndicator$1 = function SelectDropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "select-arrow"
-  }, /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props)));
+  }, /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), props.children));
 };
 var SelectContainer$1 = function SelectContainer(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "select-container"
-  }, /*#__PURE__*/React__default.createElement(components.SelectContainer, Object.assign({}, props)));
+  }, /*#__PURE__*/React__default.createElement(components.SelectContainer, Object.assign({}, props), props.children));
 };
 var SelectInput$1 = function SelectInput(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "select-input"
-  }, /*#__PURE__*/React__default.createElement(components.Input, Object.assign({}, props)));
+  }, /*#__PURE__*/React__default.createElement(components.Input, Object.assign({}, props), props.children));
 };
 var SelectMenu$1 = function SelectMenu(props) {
   if (!props.selectProps.inputValue && props.options.length === 0) {
@@ -22072,8 +22073,17 @@ var SelectMenu$1 = function SelectMenu(props) {
 
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "select-dropdown"
-  }, /*#__PURE__*/React__default.createElement(components.Menu, Object.assign({}, props)));
+  }, /*#__PURE__*/React__default.createElement(components.Menu, Object.assign({}, props), props.children));
 };
+function SelectOption(props) {
+  var size = useComponentSize(props.size);
+  return /*#__PURE__*/React__default.createElement(StyledOption, {
+    isSelected: props.isSelected,
+    isFocused: props.isFocused,
+    size: size,
+    "data-testid": "select-option"
+  }, /*#__PURE__*/React__default.createElement(components.Option, Object.assign({}, props), props.children));
+}
 
 var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var autocomplete = _a.autocomplete,
@@ -22159,7 +22169,7 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       Option: function Option(props) {
         return /*#__PURE__*/React__default.createElement(SelectOption, Object.assign({
           size: componentSize
-        }, props));
+        }, props), props.children);
       },
       Control: SelectControl$1,
       MultiValue: SelectMultiValue$1,
@@ -49286,7 +49296,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     isMulti: multiselect,
     components: Object.assign({
       Option: function Option(props) {
-        return /*#__PURE__*/React__default.createElement(SelectOption, Object.assign({
+        return /*#__PURE__*/React__default.createElement(SelectOption$1, Object.assign({
           size: componentSize
         }, props));
       },
@@ -49413,27 +49423,34 @@ var StyledHeaderRow = styled.tr.withConfig({
   };
 });
 
-var defaultheaderFormatter = function defaultheaderFormatter(_ref2) {
-  var label = _ref2.label;
-  return label;
-};
-
-var renderHeaderCellContent = function renderHeaderCellContent(_ref3) {
-  var _ref3$headerFormatter = _ref3.headerFormatter,
-      headerFormatter = _ref3$headerFormatter === void 0 ? defaultheaderFormatter : _ref3$headerFormatter,
-      align = _ref3.align,
-      label = _ref3.label,
-      dataKey = _ref3.dataKey,
-      width = _ref3.width;
-  return headerFormatter({
+function renderHeaderCellContent(_ref2) {
+  var _ref2$headerFormatter = _ref2.headerFormatter,
+      headerFormatter = _ref2$headerFormatter === void 0 ? function (_ref3) {
+    var label = _ref3.label;
+    return label;
+  } : _ref2$headerFormatter,
+      align = _ref2.align,
+      label = _ref2.label,
+      width = _ref2.width,
+      metadata = _ref2.metadata,
+      dataKey = _ref2.dataKey,
+      key = _ref2.key;
+  return key ? headerFormatter({
+    align: align,
+    label: label,
+    width: width,
+    metadata: metadata,
+    key: key
+  }) : headerFormatter({
     align: align,
     label: label,
-    dataKey: dataKey,
-    width: width
+    width: width,
+    metadata: metadata,
+    dataKey: dataKey
   });
-};
+}
 
-var TableHead = function TableHead(_ref4) {
+function TableHead(_ref4) {
   var columns = _ref4.columns,
       compact = _ref4.compact,
       sticky = _ref4.sticky;
@@ -49454,7 +49471,7 @@ var TableHead = function TableHead(_ref4) {
   };
 
   return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement(StyledHeaderRow, null, renderColumns(columns)));
-};
+}
 
 var columnPropType = PropTypes.shape({
   align: PropTypes.oneOf(["right", "left", "center"]),
@@ -49743,14 +49760,14 @@ TableFooterRow.propTypes = {
   compact: PropTypes.bool.isRequired
 };
 
-var TableFoot = function TableFoot(_ref3) {
+function TableFoot(_ref3) {
   var columns = _ref3.columns,
       rows = _ref3.rows,
       keyField = _ref3.keyField,
       loading = _ref3.loading,
       compact = _ref3.compact;
   return /*#__PURE__*/React__default.createElement("tfoot", null, renderRows(rows, columns, keyField, loading, compact));
-};
+}
 
 TableFoot.propTypes = {
   columns: columnsPropType.isRequired,
@@ -49775,7 +49792,7 @@ var StyledTable = styled.table.withConfig({
   position: "relative"
 });
 
-var BaseTable = function BaseTable(_a) {
+function BaseTable(_a) {
   var columns = _a.columns,
       rows = _a.rows,
       _a$noRowsContent = _a.noRowsContent,
@@ -49821,7 +49838,7 @@ var BaseTable = function BaseTable(_a) {
     loading: loading,
     compact: compact
   }));
-};
+}
 
 BaseTable.propTypes = Object.assign(Object.assign({}, propTypes.space), {
   columns: PropTypes.any,
@@ -50330,7 +50347,7 @@ SortingColumnHeader.defaultProps = {
   active: false
 };
 
-var Table = function Table(_a) {
+function Table(_a) {
   var hasSelectableRows = _a.hasSelectableRows,
       rowsPerPage = _a.rowsPerPage,
       hasExpandableRows = _a.hasExpandableRows,
@@ -50357,7 +50374,7 @@ var Table = function Table(_a) {
     paginationCss: paginationCss,
     paginationProps: paginationProps
   }, props)) : /*#__PURE__*/React__default.createElement(BaseTable, Object.assign({}, props));
-};
+}
 
 Table.SortingHeader = SortingColumnHeader;
 
@@ -50368,7 +50385,7 @@ var numericAlphabeticalSort = function numericAlphabeticalSort(a, b, numeric) {
   });
 };
 
-var applySort = function applySort(rows, sortColumn, columns) {
+function applySort(rows, sortColumn, columns) {
   return [].concat(rows).sort(function (a, b) {
     var column = columns.find(function (col) {
       return col.dataKey === sortColumn;
@@ -50376,14 +50393,14 @@ var applySort = function applySort(rows, sortColumn, columns) {
     var numeric = column.numeric;
     return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
   });
-};
+}
 
-var sortRows = function sortRows(rows, columns, sortState) {
+function sortRows(rows, columns, sortState) {
   var sortedRows = applySort(rows, sortState.sortColumn, columns);
   return sortState.ascending ? sortedRows : sortedRows.reverse();
-};
+}
 
-var SortingTable = function SortingTable(_a) {
+function SortingTable(_a) {
   var incomingColumns = _a.columns,
       incomingRows = _a.rows,
       initialSortColumn = _a.initialSortColumn,
@@ -50442,7 +50459,7 @@ var SortingTable = function SortingTable(_a) {
     columns: columns,
     rows: rows
   }, props));
-};
+}
 
 var StatusIndicatorValues = {
   neutral: "neutral",
@@ -52342,4 +52359,4 @@ TruncatedText.defaultProps = {
   tooltipProps: undefined
 };
 
-export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, Box, BrandLogoContainer, NavBar$1 as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu$1 as DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger$1 as MenuTrigger, Modal, NDSProvider, NavBar, NavBarBackground$1 as NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar$1 as SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, toast, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, Box, BrandLogoContainer, NavBar$1 as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu$1 as DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger$1 as MenuTrigger, Modal, NDSProvider, NavBar, NavBarBackground$1 as NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar$1 as SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, toast, useWindowDimensions };

package/dist/src/AsyncSelect/AsyncSelectComponents.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps } from "react-select";
 import { GroupBase } from "react-select";
+import { OptionProps } from "react-windowed-select";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectMultiValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;
@@ -8,3 +10,6 @@ export declare const SelectDropdownIndicator: <Option, IsMulti extends boolean,
 export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectInput: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectMenu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => React.JSX.Element;
+export declare function SelectOption<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group> & {
+    size?: ComponentSize;
+}): React.JSX.Element;

package/dist/src/Select/SelectOption.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
 import { OptionProps } from "react-windowed-select";
-import { GroupBase } from "react-select";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
-export declare function SelectOption<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group> & {
+type SelectOptionProps = {
+    isSelected: boolean;
+    isFocused: boolean;
     size: ComponentSize;
-}): React.JSX.Element;
+};
+export declare const StyledOption: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SelectOptionProps, never>;
+interface CustomOptionProps extends OptionProps {
+    size?: ComponentSize;
+}
+export declare function SelectOption(props: CustomOptionProps): React.JSX.Element;
+export {};

package/dist/src/SortingTable/SortingTable.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { TableProps } from "../Table";
-type SortingTableProps = TableProps & {
+type SortingTableProps<ColumnMetadata> = TableProps<ColumnMetadata> & {
     initialSortColumn: string;
 };
-declare const SortingTable: React.FC<SortingTableProps>;
+declare function SortingTable<ColumnMetadata>({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }: SortingTableProps<ColumnMetadata>): React.JSX.Element;
 export default SortingTable;

package/dist/src/SortingTable/SortingTable.story.d.ts

@@ -1,25 +1,8 @@
 import React from "react";
+import { SortingTable } from ".";
 declare const _default: {
     title: string;
-    component: React.FC<import("../Table/BaseTable").BaseTableProps & {
-        selectedRows?: string[];
-        onRowSelectionChange?: (...args: any[]) => any;
-        onRowExpansionChange?: (...args: any[]) => any;
-        rowsPerPage?: number;
-        onPageChange?: (...args: any[]) => any;
-        selectAllAriaLabel?: string;
-        deselectAllAriaLabel?: string;
-        paginationCss?: any;
-        paginationProps?: any;
-        expandedRows?: any[];
-        hasSelectableRows?: boolean;
-        hasExpandableRows?: boolean;
-        onSelectRow?: (...args: any[]) => any;
-        onSelectHeader?: (...args: any[]) => any;
-        isHeaderSelected?: any;
-    } & {
-        initialSortColumn: string;
-    }>;
+    component: typeof SortingTable;
 };
 export default _default;
 export declare const _SortingTable: () => React.JSX.Element;

package/dist/src/Table/BaseTable.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { RowType, Columns } from "./Table.types";
-export type BaseTableProps = {
-    columns: Columns;
+export type BaseTableProps<ColumnMetaData> = {
+    columns: Columns<ColumnMetaData>;
     rows: RowType[];
     noRowsContent?: string;
     keyField?: string;
@@ -17,5 +17,21 @@ export type BaseTableProps = {
     onMouseEnter?: any;
     onMouseLeave?: any;
 };
-declare const BaseTable: React.FC<BaseTableProps>;
+declare function BaseTable<ColumnMetaData>({ columns, rows, noRowsContent, keyField, id, loading, footerRows, rowHovers, compact, className, stickyHeader, onRowMouseEnter, onRowMouseLeave, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
+declare namespace BaseTable {
+    var propTypes: any;
+    var defaultProps: {
+        noRowsContent: string;
+        keyField: string;
+        id: any;
+        loading: boolean;
+        footerRows: any[];
+        rowHovers: boolean;
+        compact: boolean;
+        className: any;
+        stickyHeader: boolean;
+        onRowMouseEnter: () => void;
+        onRowMouseLeave: () => void;
+    };
+}
 export default BaseTable;

package/dist/src/Table/BaseTable.story.d.ts

@@ -3,70 +3,16 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const WithData: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoData: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithStickyHeader: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithLotsOfRowsAndColumns: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomColumnWidths: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACustomCellComponent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCellAlignment: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACellFormatter: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACustomColumnLabelComponent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithFullWidthSection: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAFooter: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const WithData: () => React.JSX.Element;
+export declare const WithNoData: () => React.JSX.Element;
+export declare const WithStickyHeader: () => React.JSX.Element;
+export declare const WithLotsOfRowsAndColumns: () => React.JSX.Element;
+export declare const WithCustomColumnWidths: () => React.JSX.Element;
+export declare const WithACustomCellComponent: () => React.JSX.Element;
+export declare const WithCellAlignment: () => React.JSX.Element;
+export declare const WithACellFormatter: () => React.JSX.Element;
+export declare const WithACustomColumnLabelComponent: () => React.JSX.Element;
+export declare const WithMetadata: () => React.JSX.Element;
+export declare const WithFullWidthSection: () => React.JSX.Element;
+export declare const WithAFooter: () => React.JSX.Element;
 export declare const WithRowBorder: () => React.JSX.Element;

package/dist/src/Table/StatefulTable.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { BaseTableProps } from "./BaseTable";
-export type StatefulTableProps = BaseTableProps & {
+export type StatefulTableProps<ColumnMetaData> = BaseTableProps<ColumnMetaData> & {
     selectedRows?: string[];
     onRowSelectionChange?: (...args: any[]) => any;
     onRowExpansionChange?: (...args: any[]) => any;
@@ -24,7 +24,7 @@ type StatefulTableState = {
     currentPage: number;
     paginatedRows: any;
 };
-declare class StatefulTable extends Component<StatefulTableProps, StatefulTableState> {
+declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnMetaData>, StatefulTableState> {
     static defaultProps: {
         hasSelectableRows: boolean;
         selectedRows: any[];
@@ -34,21 +34,17 @@ declare class StatefulTable extends Component<StatefulTableProps, StatefulTableS
         deselectAllAriaLabel: any;
         paginationCss: any;
         paginationProps: {};
-        columns?: import("./Table.types").Columns;
-        rows?: unknown[];
-        noRowsContent?: string;
-        keyField?: string;
-        id?: string;
-        loading?: boolean;
-        footerRows?: any;
-        rowHovers?: boolean;
-        compact?: boolean;
-        className?: string;
-        stickyHeader?: boolean;
-        onRowMouseEnter?: (...args: any[]) => any;
-        onRowMouseLeave?: (...args: any[]) => any;
-        onMouseEnter?: any;
-        onMouseLeave?: any;
+        noRowsContent: string;
+        keyField: string;
+        id: any;
+        loading: boolean;
+        footerRows: any[];
+        rowHovers: boolean;
+        compact: boolean;
+        className: any;
+        stickyHeader: boolean;
+        onRowMouseEnter: () => void;
+        onRowMouseLeave: () => void;
     };
     constructor(props: any);
     static getDerivedStateFromProps(nextProps: any, prevState: any): {

package/dist/src/Table/Table.d.ts

@@ -1,13 +1,13 @@
 import React from "react";
 import { StatefulTableProps } from "./StatefulTable";
 import { ColumnType, RowType, CellInfoType } from "./Table.types";
-export type TableProps = StatefulTableProps;
-export type TableColumnType = ColumnType;
+export type TableProps<ColumnMetadata> = StatefulTableProps<ColumnMetadata>;
+export type TableColumnType<ColumnMetadata> = ColumnType<ColumnMetadata>;
 export type TableRowType = RowType;
-export type TableCellInfoType = CellInfoType;
-declare const Table: {
-    ({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps): React.JSX.Element;
-    SortingHeader: {
+export type TableCellInfoType<ColumnMetadata> = CellInfoType<ColumnMetadata>;
+declare function Table<ColumnMetadata>({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps<ColumnMetadata>): React.JSX.Element;
+declare namespace Table {
+    var SortingHeader: {
         ({ onChange, label, ascending, active, ariaLabel }: {
             onChange: any;
             label: any;
@@ -29,5 +29,5 @@ declare const Table: {
             active: boolean;
         };
     };
-};
+}
 export default Table;

package/dist/src/Table/Table.types.d.ts

@@ -1,26 +1,21 @@
 import type { Key } from "react";
 import PropTypes from "prop-types";
 export type RowType = unknown;
-export interface CellInfoType {
+export interface CellInfoType<ColumnMetadata> {
     cellData: unknown;
-    column: ColumnType;
+    column: ColumnType<ColumnMetadata>;
     row: RowType;
 }
-interface ColumnInfoType {
-    align?: ColumnAlignment;
-    label: string;
-    dataKey?: Key;
-    width?: string | number;
-}
 type ColumnAlignment = "left" | "right" | "center";
-export type ColumnType = {
+export type ColumnType<ColumnMetadata> = {
     align?: ColumnAlignment;
     label?: string;
-    cellFormatter?: (cell: CellInfoType) => React.ReactNode;
-    cellRenderer?: (cell: CellInfoType) => React.ReactNode;
-    headerRenderer?: (column: ColumnInfoType) => React.ReactNode;
-    headerFormatter?: (column: ColumnInfoType) => React.ReactNode;
+    cellFormatter?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
+    cellRenderer?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
+    headerRenderer?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
+    headerFormatter?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
     width?: string | number;
+    metadata?: ColumnMetadata;
 } & ({
     key: Key;
     dataKey?: never | undefined;
@@ -28,7 +23,7 @@ export type ColumnType = {
     dataKey: Key;
     key?: never | undefined;
 });
-export type Columns = ColumnType[];
+export type Columns<ColumnMetadata> = ColumnType<ColumnMetadata>[];
 export declare const columnPropType: PropTypes.Requireable<PropTypes.InferProps<{
     align: PropTypes.Requireable<string>;
     label: PropTypes.Requireable<string>;

package/dist/src/Table/TableFoot.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { RowType, Columns } from "./Table.types";
-declare const TableFoot: {
-    ({ columns, rows, keyField, loading, compact, }: {
-        columns: Columns;
-        rows: RowType[];
-        keyField?: string;
-        loading?: boolean;
-        compact?: boolean;
-    }): React.JSX.Element;
-    propTypes: {
+declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, compact, }: {
+    columns: Columns<ColumnMetadata>;
+    rows: RowType[];
+    keyField?: string;
+    loading?: boolean;
+    compact?: boolean;
+}): React.JSX.Element;
+declare namespace TableFoot {
+    var propTypes: {
         columns: PropTypes.Validator<PropTypes.InferProps<{
             align: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;
@@ -27,10 +27,10 @@ declare const TableFoot: {
         loading: PropTypes.Requireable<boolean>;
         compact: PropTypes.Requireable<boolean>;
     };
-    defaultProps: {
+    var defaultProps: {
         keyField: string;
         loading: boolean;
         compact: boolean;
     };
-};
+}
 export default TableFoot;

package/dist/src/Table/TableHead.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import type { Columns } from "./Table.types";
-interface TableHeadProps {
-    columns: Columns;
+interface TableHeadProps<ColumnMetadata> {
+    columns: Columns<ColumnMetadata>;
     compact?: boolean;
     sticky?: boolean;
 }
-declare const TableHead: ({ columns, compact, sticky }: TableHeadProps) => React.JSX.Element;
+declare function TableHead<ColumnMetadata>({ columns, compact, sticky }: TableHeadProps<ColumnMetadata>): React.JSX.Element;
 export default TableHead;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "10.2.1",
+  "version": "10.2.3",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {