@terraware/web-components 1.0.11 → 1.0.12

package/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAGA,OAAO,eAAe,CAAC;AAGvB,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsN9D"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAGA,OAAO,eAAe,CAAC;AAIvB,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAY9D"}

package/components/Select/Select.js

@@ -7,242 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Select;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _react = _interopRequireDefault(require("react"));
 
 require("./styles.scss");
 
-var _utils = require("../../utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var _SelectT = _interopRequireDefault(require("./SelectT"));
 
 function Select(props) {
-  var selectedValue = props.selectedValue,
-      onChange = props.onChange,
-      label = props.label,
-      disabled = props.disabled,
-      id = props.id,
-      className = props.className,
-      helperText = props.helperText,
-      placeholder = props.placeholder,
-      errorText = props.errorText,
-      warningText = props.warningText,
-      _props$readonly = props.readonly,
-      readonly = _props$readonly === void 0 ? true : _props$readonly,
-      options = props.options,
-      fullWidth = props.fullWidth,
-      hideArrow = props.hideArrow,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      fixedMenu = props.fixedMenu;
-  var selectClass = (0, _classnames.default)({
-    'textfield-value': true,
-    'textfield-value--disabled': disabled,
-    'textfield-value--error': !!errorText,
-    'textfield-value--warning': !!warningText,
-    'textfield-value--readonly': readonly
-  });
-  var itemClass = (0, _classnames.default)({
-    'select-value': true,
-    'select-value--disabled': disabled
-  });
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      openedOptions = _useState2[0],
-      setOpenedOptions = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(-1),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      selectedIndex = _useState4[0],
-      setSelectedIndex = _useState4[1];
-
-  var inputRef = (0, _react.useRef)(null);
-  var dropdownRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (options && selectedValue && selectedIndex === -1) {
-      var newIndex = options.indexOf(selectedValue);
-
-      if (newIndex !== -1) {
-        setSelectedIndex(newIndex);
-      }
-    } else if (!options) {
-      setSelectedIndex(-1);
-    }
-  }, [options, selectedValue, selectedIndex]);
-  (0, _react.useEffect)(function () {
-    window.addEventListener('click', handleClick);
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('click', handleClick);
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  var handleClick = function handleClick(event) {
-    // Don't respond to user clicks inside the input box because those are
-    // already handled by toggleOptions()
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
-      setOpenedOptions(false);
-    }
-  };
-
-  var handleResize = function handleResize() {
-    setOpenedOptions(false);
-  };
-
-  (0, _react.useEffect)(function () {
-    if (openedOptions) {
-      scrollToSelectedElement();
-
-      if (fixedMenu && inputRef.current && dropdownRef.current) {
-        dropdownRef.current.style.width = "".concat(inputRef.current.offsetWidth, "px");
-        var bbox = inputRef.current.getBoundingClientRect();
-        dropdownRef.current.style.top = "".concat(bbox.top + bbox.height, "px");
-        var dropdownBottom = dropdownRef.current.clientHeight + bbox.top + bbox.height;
-        var windowHeightThreshold = window.innerHeight - bbox.height;
-
-        if (dropdownBottom > windowHeightThreshold) {
-          dropdownRef.current.style.maxHeight = "".concat(dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold), "px");
-        }
-      }
-    }
-  }, [fixedMenu, openedOptions]);
-
-  var toggleOptions = function toggleOptions() {
-    setOpenedOptions(function (isOpen) {
-      return !isOpen;
-    });
-  };
-
-  var onOptionSelected = function onOptionSelected(option, index) {
-    if (onChange) {
-      onChange(option);
-    }
-
-    setOpenedOptions(false);
-    setSelectedIndex(index);
-  };
-
-  var onChangeHandler = function onChangeHandler(e) {
-    var textValue = e.target.value;
-
-    if ((0, _utils.isWhitespaces)(textValue)) {
-      return;
-    }
-
-    if (onChange) {
-      onChange(textValue);
-    }
-
-    setOpenedOptions(true);
-  };
-
-  var onKeyDownHandler = function onKeyDownHandler(e) {
-    var _dropdownRef$current;
-
-    var pressedLetter = e.key.toUpperCase();
-    var items = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getElementsByTagName('li');
-
-    if (items) {
-      var arrayOfItems = Array.from(items);
-
-      for (var _i = 0, _arrayOfItems = arrayOfItems; _i < _arrayOfItems.length; _i++) {
-        var item = _arrayOfItems[_i];
-
-        if (item.dataset.key === pressedLetter) {
-          item.scrollIntoView();
-          return;
-        }
-      }
-    }
+  var toString = function toString(option) {
+    return option;
   };
 
-  var scrollToSelectedElement = function scrollToSelectedElement() {
-    var _dropdownRef$current2;
-
-    var items = (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.getElementsByTagName('li');
-
-    if (items) {
-      var arrayOfItems = Array.from(items);
-
-      for (var _i2 = 0, _arrayOfItems2 = arrayOfItems; _i2 < _arrayOfItems2.length; _i2++) {
-        var item = _arrayOfItems2[_i2];
-
-        if (item.dataset.selected === 'true') {
-          if (dropdownRef.current) {
-            var topPos = item.offsetTop;
-            dropdownRef.current.scrollTop = topPos;
-            return;
-          }
-        }
-      }
+  return /*#__PURE__*/_react.default.createElement(_SelectT.default, Object.assign({}, props, {
+    isEqual: function isEqual(A, B) {
+      return A === B;
+    },
+    renderOption: toString,
+    toT: toString,
+    displayLabel: function displayLabel(option) {
+      return option || '';
     }
-  };
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "select ".concat(className)
-  }, label && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-label"
-  }, label), /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-container ".concat(fullWidth ? 'textfield-container--fullWidth' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: id,
-    className: selectClass,
-    onClick: toggleOptions,
-    ref: inputRef
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    value: selectedValue || '',
-    readOnly: readonly,
-    placeholder: placeholder,
-    onChange: onChangeHandler,
-    onKeyDown: onKeyDownHandler,
-    onBlur: onBlur,
-    onFocus: onFocus
-  }), !hideArrow && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: 'chevronDown',
-    className: "textfield-value--icon-right"
-  })), options && options.length > 0 && openedOptions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fixedMenu && /*#__PURE__*/_react.default.createElement("div", {
-    className: "scroll-block"
-  }), /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'options-container' + (fixedMenu ? ' fixed-menu' : ''),
-    ref: dropdownRef
-  }, options.map(function (option, index) {
-    return /*#__PURE__*/_react.default.createElement("li", {
-      "data-key": option.charAt(0).toUpperCase(),
-      "data-selected": selectedIndex === index,
-      key: index,
-      onClick: function onClick() {
-        return onOptionSelected(option, index);
-      },
-      className: "".concat(itemClass, " ").concat(selectedIndex === index ? 'select-value--selected' : '', " ")
-    }, option);
-  })))), errorText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-label-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "error",
-    className: "textfield-error-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-error-text"
-  }, errorText)), warningText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-label-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "warning",
-    className: "textfield-warning-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-warning-text"
-  }, warningText)), helperText && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-help-text"
-  }, helperText));
+  }));
 }

package/components/Select/SelectT.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import './styles.scss';
+export interface SelectTProps<T> {
+    onChange: (newValue: T) => void;
+    label?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    helperText?: string | string[];
+    placeholder?: string;
+    errorText?: string | string[];
+    warningText?: string | string[];
+    selectedValue?: T;
+    readonly?: boolean;
+    options?: T[];
+    fullWidth?: boolean;
+    hideArrow?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    fixedMenu?: boolean;
+    isEqual: (A: T, B: T) => boolean;
+    renderOption: (option: T) => React.ReactNode;
+    toT: (input: string) => T;
+    displayLabel: (option: any) => string;
+}
+export default function SelectT<T>(props: SelectTProps<T>): JSX.Element;
+//# sourceMappingURL=SelectT.d.ts.map

package/components/Select/SelectT.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectT.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectT.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,eAAe,CAAC;AAGvB,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACjC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,MAAM,CAAC;CACvC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmOtE"}

package/components/Select/SelectT.js

@@ -0,0 +1,260 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectT;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./styles.scss");
+
+var _utils = require("../../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 SelectT(props) {
+  var selectedValue = props.selectedValue,
+      onChange = props.onChange,
+      label = props.label,
+      disabled = props.disabled,
+      id = props.id,
+      className = props.className,
+      helperText = props.helperText,
+      placeholder = props.placeholder,
+      errorText = props.errorText,
+      warningText = props.warningText,
+      _props$readonly = props.readonly,
+      readonly = _props$readonly === void 0 ? true : _props$readonly,
+      options = props.options,
+      fullWidth = props.fullWidth,
+      hideArrow = props.hideArrow,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      fixedMenu = props.fixedMenu,
+      isEqual = props.isEqual,
+      renderOption = props.renderOption,
+      toT = props.toT,
+      displayLabel = props.displayLabel;
+  var selectClass = (0, _classnames.default)({
+    'textfield-value': true,
+    'textfield-value--disabled': disabled,
+    'textfield-value--error': !!errorText,
+    'textfield-value--warning': !!warningText,
+    'textfield-value--readonly': readonly
+  });
+  var itemClass = (0, _classnames.default)({
+    'select-value': true,
+    'select-value--disabled': disabled
+  });
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      openedOptions = _useState2[0],
+      setOpenedOptions = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(-1),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      selectedIndex = _useState4[0],
+      setSelectedIndex = _useState4[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  var dropdownRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (options && selectedValue && selectedIndex === -1) {
+      var newIndex = -1;
+      options.find(function (option, index) {
+        if (newIndex === -1 && isEqual(option, selectedValue)) {
+          newIndex = index;
+          return true;
+        }
+
+        return false;
+      });
+
+      if (newIndex !== -1) {
+        setSelectedIndex(newIndex);
+      }
+    } else if (!options) {
+      setSelectedIndex(-1);
+    }
+  }, [options, selectedValue, selectedIndex]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('click', handleClick);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('click', handleClick);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  var handleClick = function handleClick(event) {
+    // Don't respond to user clicks inside the input box because those are
+    // already handled by toggleOptions()
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+      setOpenedOptions(false);
+    }
+  };
+
+  var handleResize = function handleResize() {
+    setOpenedOptions(false);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (openedOptions) {
+      scrollToSelectedElement();
+
+      if (fixedMenu && inputRef.current && dropdownRef.current) {
+        dropdownRef.current.style.width = "".concat(inputRef.current.offsetWidth, "px");
+        var bbox = inputRef.current.getBoundingClientRect();
+        dropdownRef.current.style.top = "".concat(bbox.top + bbox.height, "px");
+        var dropdownBottom = dropdownRef.current.clientHeight + bbox.top + bbox.height;
+        var windowHeightThreshold = window.innerHeight - bbox.height;
+
+        if (dropdownBottom > windowHeightThreshold) {
+          dropdownRef.current.style.maxHeight = "".concat(dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold), "px");
+        }
+      }
+    }
+  }, [fixedMenu, openedOptions]);
+
+  var toggleOptions = function toggleOptions() {
+    setOpenedOptions(function (isOpen) {
+      return !isOpen;
+    });
+  };
+
+  var onOptionSelected = function onOptionSelected(option, index) {
+    if (onChange) {
+      onChange(option);
+    }
+
+    setOpenedOptions(false);
+    setSelectedIndex(index);
+  };
+
+  var onChangeHandler = function onChangeHandler(e) {
+    var textValue = e.target.value;
+
+    if ((0, _utils.isWhitespaces)(textValue)) {
+      return;
+    }
+
+    if (onChange) {
+      onChange(toT(textValue));
+    }
+
+    setOpenedOptions(true);
+  };
+
+  var onKeyDownHandler = function onKeyDownHandler(e) {
+    var _dropdownRef$current;
+
+    var pressedLetter = e.key.toUpperCase();
+    var items = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getElementsByTagName('li');
+
+    if (items) {
+      var arrayOfItems = Array.from(items);
+
+      for (var _i = 0, _arrayOfItems = arrayOfItems; _i < _arrayOfItems.length; _i++) {
+        var item = _arrayOfItems[_i];
+
+        if (item.dataset.key === pressedLetter) {
+          item.scrollIntoView();
+          return;
+        }
+      }
+    }
+  };
+
+  var scrollToSelectedElement = function scrollToSelectedElement() {
+    var _dropdownRef$current2;
+
+    var items = (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.getElementsByTagName('li');
+
+    if (items) {
+      var arrayOfItems = Array.from(items);
+
+      for (var _i2 = 0, _arrayOfItems2 = arrayOfItems; _i2 < _arrayOfItems2.length; _i2++) {
+        var item = _arrayOfItems2[_i2];
+
+        if (item.dataset.selected === 'true') {
+          if (dropdownRef.current) {
+            var topPos = item.offsetTop;
+            dropdownRef.current.scrollTop = topPos;
+            return;
+          }
+        }
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "select ".concat(className)
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-label"
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-container ".concat(fullWidth ? 'textfield-container--fullWidth' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: selectClass,
+    onClick: toggleOptions,
+    ref: inputRef
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    value: displayLabel(selectedValue),
+    readOnly: readonly,
+    placeholder: placeholder,
+    onChange: onChangeHandler,
+    onKeyDown: onKeyDownHandler,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }), !hideArrow && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: 'chevronDown',
+    className: "textfield-value--icon-right"
+  })), options && options.length > 0 && openedOptions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fixedMenu && /*#__PURE__*/_react.default.createElement("div", {
+    className: "scroll-block"
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: 'options-container' + (fixedMenu ? ' fixed-menu' : ''),
+    ref: dropdownRef
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      "data-key": displayLabel(option).charAt(0).toUpperCase(),
+      "data-selected": selectedIndex === index,
+      key: index,
+      onClick: function onClick() {
+        return onOptionSelected(option, index);
+      },
+      className: "".concat(itemClass, " ").concat(selectedIndex === index ? 'select-value--selected' : '', " ")
+    }, renderOption(option));
+  })))), errorText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-label-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "error",
+    className: "textfield-error-text--icon"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-error-text"
+  }, errorText)), warningText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-label-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "warning",
+    className: "textfield-warning-text--icon"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-warning-text"
+  }, warningText)), helperText && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-help-text"
+  }, helperText));
+}

package/index.d.ts

@@ -16,6 +16,7 @@ import Note from './components/Note';
 import ProgressCircle from './components/ProgressCircle/ProgressCircle';
 import RadioButton from './components/RadioButton';
 import Select from './components/Select/Select';
+import SelectT from './components/Select/SelectT';
 import SummaryBox from './components/SummaryBox';
 import Textfield from './components/Textfield/Textfield';
 import Table from './components/table';
@@ -27,5 +28,5 @@ import Message from './components/Message/Message';
 export type { IconName } from './components/Icon/icons/';
 export type { Size } from './components/Size';
 export type { EnhancedTableDetailsRow, RendererProps, TableColumnType, TableRowType, SortOrder };
-export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, ErrorBox, getComparator, icons, Icon, Message, NavFooter, NavItem, NavSection, Navbar, Note, ProgressCircle, RadioButton, Select, stableSort, SummaryBox, Svg, Textfield, Table, };
+export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, ErrorBox, getComparator, icons, Icon, Message, NavFooter, NavItem, NavSection, Navbar, Note, ProgressCircle, RadioButton, Select, SelectT, stableSort, SummaryBox, Svg, Textfield, Table, };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,SAAS,MAAM,+BAA+B,CAAC;AACtD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,YAAY,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,KAAK,GAAG,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAC;AAEnD,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAEjG,OAAO,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,KAAK,GACN,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,SAAS,MAAM,+BAA+B,CAAC;AACtD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAElD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,YAAY,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,KAAK,GAAG,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAC;AAEnD,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAEjG,OAAO,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,KAAK,GACN,CAAC"}

package/index.js

@@ -113,6 +113,12 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "SelectT", {
+  enumerable: true,
+  get: function get() {
+    return _SelectT.default;
+  }
+});
 Object.defineProperty(exports, "SummaryBox", {
   enumerable: true,
   get: function get() {
@@ -205,6 +211,8 @@ var _RadioButton = _interopRequireDefault(require("./components/RadioButton"));
 
 var _Select = _interopRequireDefault(require("./components/Select/Select"));
 
+var _SelectT = _interopRequireDefault(require("./components/Select/SelectT"));
+
 var _SummaryBox = _interopRequireDefault(require("./components/SummaryBox"));
 
 var _Textfield = _interopRequireDefault(require("./components/Textfield/Textfield"));

package/license-report.html

@@ -45,6 +45,6 @@ th, td {
     padding: 15px;
 }
 </style>
-<table><thead><tr><th class="string">department</th><th class="string">related to</th><th class="string">name</th><th class="string">license period</th><th class="string">material / not material</th><th class="string">license type</th><th class="string">link</th><th class="string">remote version</th><th class="string">installed version</th><th class="string">defined version</th><th class="string">author</th></tr></thead><tbody><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@date-io/date-fns</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/dmtrKovalenko/date-io.git</td><td class="string">2.15.0</td><td class="string">2.15.0</td><td class="string">^2.14.0</td><td class="string">Dmitriy Kovalenko dmtr.kovalenko@outlook.com</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@date-io/moment</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/dmtrKovalenko/date-io.git</td><td class="string">2.15.0</td><td class="string">2.10.11</td><td class="string">^2.10.11</td><td class="string">Dmitriy Kovalenko dmtr.kovalenko@outlook.com</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@dnd-kit/core</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">6.0.5</td><td class="string">6.0.5</td><td class="string">^6.0.5</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@dnd-kit/sortable</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">7.0.1</td><td class="string">7.0.1</td><td class="string">^7.0.1</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@emotion/react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/emotion-js/emotion.git#main</td><td class="string">11.10.4</td><td class="string">11.10.0</td><td class="string">^11.9.3</td><td class="string">Emotion Contributors</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/icons-material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">5.10.3</td><td class="string">5.8.4</td><td class="string">^5.8.4</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">5.10.3</td><td class="string">5.10.1</td><td class="string">^5.8.7</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/styles</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">5.10.3</td><td class="string">5.9.3</td><td class="string">^5.8.7</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/x-date-pickers</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui-org/material-ui-x.git</td><td class="string">5.0.0-beta.7</td><td class="string">5.0.0-beta.6</td><td class="string">^5.0.0-alpha.7</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">classnames</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/JedWatson/classnames.git</td><td class="string">2.3.1</td><td class="string">2.3.1</td><td class="string">^2.3.1</td><td class="string">Jed Watson</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">date-fns</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/date-fns/date-fns.git</td><td class="string">2.29.2</td><td class="string">2.29.2</td><td class="string">^2.28.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">moment</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/moment/moment.git</td><td class="string">2.29.4</td><td class="string">2.29.1</td><td class="string">^2.29.1</td><td class="string">Iskren Ivov Chernev <iskren.chernev@gmail.com> (https://github.com/ichernev)</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">17.0.2</td><td class="string">17.0.2</td><td class="string">^17.0.2</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react-dom</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">17.0.2</td><td class="string">17.0.2</td><td class="string">^17.0.2</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react-responsive</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git://github.com/contra/react-responsive.git</td><td class="string">9.0.0-beta.10</td><td class="string">9.0.0-beta.10</td><td class="string">^9.0.0-beta.6</td><td class="string">Contra <yo@contra.io> (https://contra.io)</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react-sortable-hoc</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/react-sortable-hoc.git</td><td class="string">2.0.0</td><td class="string">2.0.0</td><td class="string">^2.0.0</td><td class="string">Clauderic Demers me@ced.io</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">sass</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/sass/dart-sass.git</td><td class="string">1.54.6</td><td class="string">1.35.1</td><td class="string">^1.35.1</td><td class="string">Natalie Weizenbaum nweiz@google.com https://github.com/nex3</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">tinycolor2</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/bgrins/TinyColor.git</td><td class="string">1.4.2</td><td class="string">1.4.2</td><td class="string">^1.4.2</td><td class="string">Brian Grinstead <briangrinstead@gmail.com> (http://briangrinstead.com)</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">web-vitals</td><td class="string">perpetual</td><td class="string">material</td><td class="string">Apache-2.0</td><td class="string">git+https://github.com/GoogleChrome/web-vitals.git</td><td class="string">1.1.2</td><td class="string">1.1.2</td><td class="string">^1.0.1</td><td class="string">Philip Walton philip@philipwalton.com http://philipwalton.com</td></tr></tbody></table>
+<table><thead><tr><th class="string">department</th><th class="string">related to</th><th class="string">name</th><th class="string">license period</th><th class="string">material / not material</th><th class="string">license type</th><th class="string">link</th><th class="string">remote version</th><th class="string">installed version</th><th class="string">defined version</th><th class="string">author</th></tr></thead><tbody><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@date-io/date-fns</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/dmtrKovalenko/date-io.git</td><td class="string">2.15.0</td><td class="string">2.15.0</td><td class="string">^2.14.0</td><td class="string">Dmitriy Kovalenko dmtr.kovalenko@outlook.com</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@date-io/moment</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/dmtrKovalenko/date-io.git</td><td class="string">2.15.0</td><td class="string">2.10.11</td><td class="string">^2.10.11</td><td class="string">Dmitriy Kovalenko dmtr.kovalenko@outlook.com</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@dnd-kit/core</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">6.0.5</td><td class="string">6.0.5</td><td class="string">^6.0.5</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@dnd-kit/sortable</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">7.0.1</td><td class="string">7.0.1</td><td class="string">^7.0.1</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@emotion/react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/emotion-js/emotion.git#main</td><td class="string">11.10.4</td><td class="string">11.10.0</td><td class="string">^11.9.3</td><td class="string">Emotion Contributors</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/icons-material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">5.10.3</td><td class="string">5.8.4</td><td class="string">^5.8.4</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">5.10.3</td><td class="string">5.10.1</td><td class="string">^5.8.7</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/styles</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">5.10.3</td><td class="string">5.9.3</td><td class="string">^5.8.7</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">@mui/x-date-pickers</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui-org/material-ui-x.git</td><td class="string">5.0.0-beta.7</td><td class="string">5.0.0-beta.6</td><td class="string">^5.0.0-alpha.7</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">classnames</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/JedWatson/classnames.git</td><td class="string">2.3.1</td><td class="string">2.3.1</td><td class="string">^2.3.1</td><td class="string">Jed Watson</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">date-fns</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/date-fns/date-fns.git</td><td class="string">2.29.2</td><td class="string">2.29.2</td><td class="string">^2.28.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">moment</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/moment/moment.git</td><td class="string">2.29.4</td><td class="string">2.29.1</td><td class="string">^2.29.1</td><td class="string">Iskren Ivov Chernev <iskren.chernev@gmail.com> (https://github.com/ichernev)</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">17.0.2</td><td class="string">17.0.2</td><td class="string">^17.0.2</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react-dom</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">17.0.2</td><td class="string">17.0.2</td><td class="string">^17.0.2</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react-responsive</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git://github.com/contra/react-responsive.git</td><td class="string">9.0.0-beta.10</td><td class="string">9.0.0-beta.10</td><td class="string">^9.0.0-beta.6</td><td class="string">Contra <yo@contra.io> (https://contra.io)</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">react-sortable-hoc</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/react-sortable-hoc.git</td><td class="string">2.0.0</td><td class="string">2.0.0</td><td class="string">^2.0.0</td><td class="string">Clauderic Demers me@ced.io</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">sass</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/sass/dart-sass.git</td><td class="string">1.54.7</td><td class="string">1.35.1</td><td class="string">^1.35.1</td><td class="string">Natalie Weizenbaum nweiz@google.com https://github.com/nex3</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">tinycolor2</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/bgrins/TinyColor.git</td><td class="string">1.4.2</td><td class="string">1.4.2</td><td class="string">^1.4.2</td><td class="string">Brian Grinstead <briangrinstead@gmail.com> (http://briangrinstead.com)</td></tr><tr><td class="string">terraware</td><td class="string">stuff</td><td class="string">web-vitals</td><td class="string">perpetual</td><td class="string">material</td><td class="string">Apache-2.0</td><td class="string">git+https://github.com/GoogleChrome/web-vitals.git</td><td class="string">1.1.2</td><td class="string">1.1.2</td><td class="string">^1.0.1</td><td class="string">Philip Walton philip@philipwalton.com http://philipwalton.com</td></tr></tbody></table>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

package/stories/Select.stories.d.ts

@@ -1,9 +1,15 @@
 import { Story } from '@storybook/react';
 import Select, { SelectProps } from '../components/Select/Select';
+import { SelectTProps } from '../components/Select/SelectT';
 declare const _default: {
     title: string;
     component: typeof Select;
 };
 export default _default;
 export declare const Default: Story<SelectProps>;
+declare type Value = {
+    name?: string;
+    age?: number;
+};
+export declare const ComplexSelect: Story<SelectTProps<Value>>;
 //# sourceMappingURL=Select.stories.d.ts.map

package/stories/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;;;;;AAElE,wBAGE;AAYF,eAAO,MAAM,OAAO,oBAAoB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAgB,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;;;;;AAErE,wBAGE;AAYF,eAAO,MAAM,OAAO,oBAAoB,CAAC;AAazC,aAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AA0CF,eAAO,MAAM,aAAa,4BAA2B,CAAC"}