@terraware/web-components 2.1.3 → 2.1.5

package/components/MultiSelect/MultiSelect.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MultiSelect.test.d.ts.map

package/components/MultiSelect/MultiSelect.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.test.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.test.tsx"],"names":[],"mappings":""}

package/components/MultiSelect/MultiSelect.test.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+test('show options when placeholder is clicked', function () {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
+    onAdd: function onAdd() {
+      return undefined;
+    },
+    onRemove: function onRemove() {
+      return undefined;
+    },
+    options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
+    selectedOptions: [],
+    placeHolder: "Select..."
+  })); // we should find the placeholder text
+
+  var placeHolder = _react.screen.getByText('Select...');
+
+  expect(placeHolder).toBeInTheDocument(); // we should not find the options yet
+
+  expect(_react.screen.queryByText('foo')).not.toBeInTheDocument();
+  expect(_react.screen.queryByText('bar')).not.toBeInTheDocument();
+  expect(_react.screen.queryByText('baz')).not.toBeInTheDocument(); // click the placeholder
+
+  _react.fireEvent.click(placeHolder); // now the options should be visible
+
+
+  expect(_react.screen.queryByText('foo')).toBeInTheDocument();
+  expect(_react.screen.queryByText('bar')).toBeInTheDocument();
+  expect(_react.screen.queryByText('baz')).toBeInTheDocument();
+});
+test('clicking an option calls the onAdd handler', function () {
+  var handleAdd = jest.fn();
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
+    onAdd: handleAdd,
+    onRemove: function onRemove() {
+      return undefined;
+    },
+    options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
+    selectedOptions: [],
+    placeHolder: "Select..."
+  })); // click the dropdown chevron
+
+  var dropdown = _react.screen.getByLabelText('show-options');
+
+  _react.fireEvent.click(dropdown); // click one of the options
+
+
+  var option = _react.screen.getByText('bar');
+
+  _react.fireEvent.click(option); // addHandler should have been called with id 2
+
+
+  expect(handleAdd).toBeCalledWith(2);
+});
+test('clicking the pill remove button calls the onRemove handler', function () {
+  var handleRemove = jest.fn();
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
+    onAdd: function onAdd() {
+      return undefined;
+    },
+    onRemove: handleRemove,
+    options: new Map([[1, 'foo']]),
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
+    selectedOptions: [1]
+  })); // find a pill with the 'foo' text
+
+  expect(_react.screen.queryByText('foo')).toBeInTheDocument(); // click the remove button
+
+  var removeButton = _react.screen.getByLabelText('remove');
+
+  _react.fireEvent.click(removeButton); // handleRemove should have been called with id 1
+
+
+  expect(handleRemove).toBeCalledWith(1);
+});

package/components/MultiSelect/index.d.ts

@@ -0,0 +1,21 @@
+import './styles.scss';
+import { TooltipProps } from '@mui/material';
+export type MultiSelectProps<K, V> = {
+    className?: string;
+    fullWidth?: boolean;
+    helperText?: string;
+    id?: string;
+    label?: string;
+    missingValuePlaceholder?: string;
+    onAdd: (item: K) => void;
+    onRemove: (item: K) => void;
+    onPillClick?: (item: K) => void;
+    options: Map<K, V>;
+    pillListClassName?: string;
+    placeHolder?: string;
+    valueRenderer: (value: V) => string;
+    selectedOptions: K[];
+    tooltipTitle?: TooltipProps['title'];
+};
+export default function MultiSelect<K, V>(props: MultiSelectProps<K, V>): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/MultiSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAa,YAAY,EAAC,MAAM,eAAe,CAAC;AAIvD,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAyFpF"}

package/components/MultiSelect/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MultiSelect;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./styles.scss");
+
+var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+var _PillList = _interopRequireDefault(require("../PillList"));
+
+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 MultiSelect(props) {
+  var className = props.className,
+      fullWidth = props.fullWidth,
+      helperText = props.helperText,
+      id = props.id,
+      label = props.label,
+      missingValuePlaceholder = props.missingValuePlaceholder,
+      onAdd = props.onAdd,
+      onRemove = props.onRemove,
+      onPillClick = props.onPillClick,
+      options = props.options,
+      pillListClassName = props.pillListClassName,
+      placeHolder = props.placeHolder,
+      valueRenderer = props.valueRenderer,
+      selectedOptions = props.selectedOptions,
+      tooltipTitle = props.tooltipTitle;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      openedOptions = _useState2[0],
+      setOpenedOptions = _useState2[1];
+
+  var toggleOptions = function toggleOptions() {
+    setOpenedOptions(function (isOpen) {
+      return !isOpen;
+    });
+  };
+
+  var closeOptions = function closeOptions() {
+    setOpenedOptions(false);
+  };
+
+  var unselectedOptions = Array.from(options.keys()).filter(function (key) {
+    return !selectedOptions.includes(key);
+  });
+  var valuesPillData = selectedOptions.map(function (item) {
+    var value = options.get(item);
+    return {
+      id: item,
+      value: value ? valueRenderer(value) : missingValuePlaceholder || ''
+    };
+  }).filter(function (data) {
+    return data.value;
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "multi-select ".concat(className)
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "multi-select__label"
+  }, label, " ", tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
+    title: tooltipTitle
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "multi-select__container ".concat(fullWidth ? 'multi-select__container--fullWidth' : ''),
+    onBlur: closeOptions,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: "multi-select__values",
+    onClick: toggleOptions
+  }, selectedOptions.length > 0 ? /*#__PURE__*/_react.default.createElement(_PillList.default, {
+    data: valuesPillData,
+    onRemove: onRemove,
+    onClick: onPillClick,
+    className: pillListClassName
+  }) : /*#__PURE__*/_react.default.createElement("p", {
+    className: "multi-select__placeholder-text"
+  }, placeHolder), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'multi-select__values__icon-button',
+    "aria-label": "show-options"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: openedOptions ? 'chevronUp' : 'chevronDown',
+    className: "multi-select__values__icon-right"
+  }))), options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/_react.default.createElement("div", {
+    className: "multi-select__options-container"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: 'multi-select__options'
+  }, unselectedOptions.map(function (optionKey, index) {
+    var optionValue = options.get(optionKey);
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: index,
+      className: "select-value",
+      onClick: function onClick() {
+        return onAdd(optionKey);
+      }
+    }, optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || '');
+  })))), helperText && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "multi-select__help-text"
+  }, helperText));
+}

package/components/MultiSelect/styles.scss

@@ -0,0 +1,124 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.multi-select {
+  display: flex;
+  flex-direction: column;
+
+  .multi-select__container {
+    position: relative;
+    width: 228px;
+    cursor: pointer;
+
+    &--fullWidth {
+      position: relative;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+
+  .multi-select__label {
+    font-family: $tw-fnt-frm-fld-label-font-family;
+    font-size: $tw-fnt-frm-fld-label-font-size;
+    font-weight: $tw-fnt-frm-fld-label-font-weight;
+    line-height: $tw-fnt-frm-fld-label-line-height;
+    color: $tw-clr-txt-secondary;
+    margin-bottom: $tw-spc-base-xx-small;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .multi-select__help-text {
+    font-family: $tw-fnt-frm-fld-help-text-font-family;
+    font-size: $tw-fnt-frm-fld-help-text-font-size;
+    font-weight: $tw-fnt-frm-fld-help-text-font-weight;
+    line-height: $tw-fnt-frm-fld-help-text-line-height;
+    color: $tw-clr-txt-secondary;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  .multi-select__placeholder-text {
+    font-family: $tw-fnt-frm-fld-text-value-font-family;
+    font-size: $tw-fnt-frm-fld-text-value-font-size;
+    font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+    line-height: $tw-fnt-frm-fld-text-value-line-height;
+    color: $tw-clr-txt;
+    margin: 0;
+  }
+
+  .multi-select__values {
+    background-color: $tw-clr-bg;
+    border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+    padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
+    border-radius: $tw-sz-base-x-small;
+    border-width: $tw-sz-frm-fld-text-input-stroke;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    &__icon-button {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      padding: 0;
+    }
+
+    &__icon-right {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-icn;
+      flex-shrink: 0;
+    }
+  }
+
+  .multi-select__options-container {
+    position: relative;
+    height: 0;
+    width: 100%;
+
+    .multi-select__options {
+      z-index: 3;
+      width: calc(100% - 2px);
+      position: absolute;
+      top: 0px;
+      list-style-type: none;
+      padding: $tw-spc-base-x-small 0;
+      background: $tw-clr-bg;
+      border: 1px solid $tw-clr-brdr-secondary;
+      margin: $tw-spc-base-xx-small 0 0;
+      border-radius: $tw-sz-base-x-small;
+      max-height: 140px;
+      overflow-y: auto;
+
+      .select-value {
+        font-family: $tw-fnt-frm-fld-select-value-font-family;
+        font-size: $tw-fnt-frm-fld-select-value-font-size;
+        font-weight: $tw-fnt-frm-fld-select-value-font-weight;
+        line-height: $tw-fnt-frm-fld-select-value-line-height;
+        padding: $tw-spc-base-x-small $tw-spc-base-small;
+        cursor: pointer;
+
+        &:hover {
+          background-color: $tw-clr-bg-selected-ghost-hover;
+          color: $tw-clr-txt;
+        }
+
+        &:active {
+          background-color: $tw-clr-bg-selected-ghost-active;
+          color: $tw-clr-txt;
+        }
+
+        &--disabled {
+          opacity: $tw-opcty-semantic-off;
+        }
+      }
+    }
+  }
+}

package/components/Pill/index.d.ts

@@ -1,11 +1,12 @@
 import './styles.scss';
 type PillProps<IdType> = {
     id: IdType;
-    label: string;
+    label?: string;
     value: string;
+    onClick?: (id: IdType) => void;
     onRemove?: (id: IdType) => void;
     className?: string;
 };
-export default function Pill<IdType>({ id, label, value, onRemove, className }: PillProps<IdType>): JSX.Element;
+export default function Pill<IdType>(props: PillProps<IdType>): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/components/Pill/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAc9G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAwB1E"}

package/components/Pill/index.js

@@ -15,23 +15,33 @@ var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 
 require("./styles.scss");
 
-function Pill(_ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      value = _ref.value,
-      onRemove = _ref.onRemove,
-      className = _ref.className;
+function Pill(props) {
+  var id = props.id,
+      label = props.label,
+      value = props.value,
+      _onClick = props.onClick,
+      onRemove = props.onRemove,
+      className = props.className;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "pill ".concat(className !== null && className !== void 0 ? className : '')
-  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pill ".concat(className !== null && className !== void 0 ? className : ''),
+    onClick: function onClick(ev) {
+      ev.stopPropagation();
+
+      if (_onClick) {
+        _onClick(id);
+      }
+    }
+  }, label && /*#__PURE__*/_react.default.createElement("p", {
     className: "label"
   }, label, ":"), /*#__PURE__*/_react.default.createElement("p", {
-    className: "value"
+    className: "value".concat(label ? '' : ' value--no-label')
   }, value), onRemove ? /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: function onClick() {
-      return onRemove(id);
+    onClick: function onClick(ev) {
+      ev.stopPropagation();
+      onRemove(id);
     },
-    className: "iconContainer"
+    className: "iconContainer",
+    "aria-label": "remove"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "close",
     className: "icon"

package/components/Pill/styles.scss

@@ -12,8 +12,6 @@
   display: flex;
   border-radius: 13px;
   align-items: center;
-  margin-right: $tw-spc-base-x-small;
-  margin-bottom: $tw-spc-base-x-small;
 
   .label {
     font-size: 12px;
@@ -28,6 +26,10 @@
     color: $tw-clr-txt;
     font-weight: 600;
     margin: 0;
+
+    &--no-label {
+      padding-left: 0;
+    }
   }
 
   .icon {

package/components/PillList/index.d.ts

@@ -1,12 +1,15 @@
+import './styles.scss';
 export type PillListItem<IdType> = {
     id: IdType;
-    label: string;
+    label?: string;
     value: string;
+    onClick?: (id: IdType) => void;
     onRemove?: (id: IdType) => void;
     className?: string;
 };
 export type PillListProps<IdType> = {
     data: PillListItem<IdType>[];
+    onClick?: (id: IdType) => void;
     onRemove?: (id: IdType) => void;
     className?: string;
 };

package/components/PillList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAiBlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBlF"}

package/components/PillList/index.js

@@ -11,21 +11,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Pill = _interopRequireDefault(require("../Pill"));
 
-var _material = require("@mui/material");
+require("./styles.scss");
 
 function PillList(props) {
   var data = props.data,
+      onClick = props.onClick,
       onRemove = props.onRemove,
       className = props.className;
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    display: "flex",
-    flexWrap: "wrap"
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pill-list"
   }, data.map(function (item, index) {
     return /*#__PURE__*/_react.default.createElement(_Pill.default, {
       key: index,
       id: item.id,
       label: item.label,
       value: item.value,
+      onClick: item.onClick || onClick,
       onRemove: item.onRemove || onRemove,
       className: item.className || className
     });

package/components/PillList/styles.scss

@@ -0,0 +1,12 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.pill-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $tw-spc-base-x-small;
+}

package/index.d.ts

@@ -9,6 +9,7 @@ import ErrorBox from './components/ErrorBox/ErrorBox';
 import Icon from './components/Icon/Icon';
 import IconTooltip from './components/IconTooltip';
 import icons from './components/Icon/icons';
+import MultiSelect from './components/MultiSelect';
 import Navbar from './components/Navbar/Navbar';
 import NavFooter from './components/Navbar/NavFooter';
 import NavItem from './components/Navbar/NavItem';
@@ -35,5 +36,5 @@ export type { IconName } from './components/Icon/icons/';
 export type { Size } from './components/Size';
 export type { DropdownItem } from './components/types';
 export type { EnhancedTableDetailsRow, RendererProps, TableColumnType, TableRowType, SortOrder };
-export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, ErrorBox, getComparator, icons, Icon, IconTooltip, Message, NavFooter, NavItem, NavSection, Navbar, Note, Pill, PillList, ProgressCircle, RadioButton, Select, SelectT, stableSort, SummaryBox, Svg, Textfield, TextTruncated, Table, theme, };
+export { Autocomplete, Button, CellRenderer, CellDateRenderer, Checkbox, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, ErrorBox, getComparator, icons, Icon, IconTooltip, Message, MultiSelect, NavFooter, NavItem, NavSection, Navbar, Note, Pill, PillList, ProgressCircle, RadioButton, Select, SelectT, stableSort, SummaryBox, Svg, Textfield, TextTruncated, Table, theme, };
 //# 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,wCAAwC,CAAC;AAClE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,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,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,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;AACnD,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,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,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,aAAa,EACb,KAAK,EACL,KAAK,GACN,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAClE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,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,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,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;AACnD,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,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,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,aAAa,EACb,KAAK,EACL,KAAK,GACN,CAAC"}

package/index.js

@@ -77,6 +77,12 @@ Object.defineProperty(exports, "icons", {
     return _icons.default;
   }
 });
+Object.defineProperty(exports, "MultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _MultiSelect.default;
+  }
+});
 Object.defineProperty(exports, "Navbar", {
   enumerable: true,
   get: function get() {
@@ -233,6 +239,8 @@ var _IconTooltip = _interopRequireDefault(require("./components/IconTooltip"));
 
 var _icons = _interopRequireDefault(require("./components/Icon/icons"));
 
+var _MultiSelect = _interopRequireDefault(require("./components/MultiSelect"));
+
 var _Navbar = _interopRequireDefault(require("./components/Navbar/Navbar"));
 
 var _NavFooter = _interopRequireDefault(require("./components/Navbar/NavFooter"));

package/package.json

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

package/stories/MultiSelect.stories.d.ts

@@ -0,0 +1,9 @@
+import { Story } from '@storybook/react';
+import MultiSelect, { MultiSelectProps } from '../components/MultiSelect';
+declare const _default: {
+    title: string;
+    component: typeof MultiSelect;
+};
+export default _default;
+export declare const Default: Story<MultiSelectProps<number, string>>;
+//# sourceMappingURL=MultiSelect.stories.d.ts.map

package/stories/MultiSelect.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MultiSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,WAAW,EAAE,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;;;;;AAE1E,wBAGE;AAoCF,eAAO,MAAM,OAAO,yCAAoB,CAAC"}