@terraware/web-components 1.0.14 → 1.0.15

package/components/{Autocomplete.d.ts → Autocomplete/Autocomplete.d.ts}

@@ -1,16 +1,19 @@
 /// <reference types="react" />
+import './styles.scss';
 export interface Props {
     id: string;
     label: string;
     values: string[];
     onChange: (id: string, value: string) => void;
     selected: string | undefined;
-    disabled?: boolean;
     freeSolo: boolean;
+    disabled?: boolean;
+    className?: string;
+    isV1?: boolean;
 }
 export declare type DropdownItem = {
     label: string;
     value: string;
 };
-export default function Autocomplete({ id, label, values, onChange, selected, disabled, freeSolo, }: Props): JSX.Element;
+export default function Autocomplete({ id, label, values, onChange, selected, freeSolo, disabled, className, isV1, }: Props): JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

package/components/Autocomplete/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,GACL,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoCrB"}

package/components/{Autocomplete.js → Autocomplete/Autocomplete.js}

@@ -11,14 +11,18 @@ var _material = require("@mui/material");
 
 var _react = _interopRequireDefault(require("react"));
 
+require("./styles.scss");
+
 function Autocomplete(_ref) {
   var id = _ref.id,
       label = _ref.label,
       values = _ref.values,
       onChange = _ref.onChange,
       selected = _ref.selected,
+      freeSolo = _ref.freeSolo,
       disabled = _ref.disabled,
-      freeSolo = _ref.freeSolo;
+      className = _ref.className,
+      isV1 = _ref.isV1;
 
   var onChangeHandler = function onChangeHandler(event, value) {
     if (event) {
@@ -30,6 +34,21 @@ function Autocomplete(_ref) {
     }
   };
 
+  var renderInput = function renderInput(params) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "auto-complete ".concat(className)
+    }, label && isV1 !== true && /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: id,
+      className: "textfield-label"
+    }, label), /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({
+      label: isV1 ? label : undefined
+    }, params, {
+      variant: "outlined",
+      size: "small",
+      placeholder: label
+    })));
+  };
+
   return /*#__PURE__*/_react.default.createElement(_material.Autocomplete, {
     disabled: disabled,
     id: id,
@@ -42,12 +61,6 @@ function Autocomplete(_ref) {
     inputValue: selected,
     freeSolo: freeSolo,
     forcePopupIcon: true,
-    renderInput: function renderInput(params) {
-      return /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
-        label: label,
-        variant: "outlined",
-        size: "small"
-      }));
-    }
+    renderInput: renderInput
   });
 }

package/components/Autocomplete/styles.scss

@@ -0,0 +1,23 @@
+@import '../../style-dictionary-dist/textfield_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.auto-complete {
+  display: flex;
+  flex-flow: row wrap;
+
+  .textfield-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-frm-fld-label;
+    margin-bottom: $tw-spc-base-xx-small;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+}

package/index.d.ts

@@ -1,4 +1,4 @@
-import Autocomplete from './components/Autocomplete';
+import Autocomplete from './components/Autocomplete/Autocomplete';
 import Button from './components/Button/Button';
 import Checkbox from './components/Checkbox';
 import DatePicker from './components/DatePicker/DatePicker';

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,oCAAoC,CAAC;AAC5D,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"}
+{"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,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

@@ -175,7 +175,7 @@ Object.defineProperty(exports, "Message", {
 });
 exports.Svg = void 0;
 
-var _Autocomplete = _interopRequireDefault(require("./components/Autocomplete"));
+var _Autocomplete = _interopRequireDefault(require("./components/Autocomplete/Autocomplete"));
 
 var _Button = _interopRequireDefault(require("./components/Button/Button"));
 

package/package.json

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

package/stories/Autocomplete.stories.d.ts

@@ -1,9 +1,10 @@
 import { Story } from '@storybook/react';
-import Autocomplete, { Props as AutocompleteProps } from '../components/Autocomplete';
+import Autocomplete, { Props as AutocompleteProps } from '../components/Autocomplete/Autocomplete';
 declare const _default: {
     title: string;
     component: typeof Autocomplete;
 };
 export default _default;
 export declare const Default: Story<AutocompleteProps>;
+export declare const V1: Story<AutocompleteProps>;
 //# sourceMappingURL=Autocomplete.stories.d.ts.map

package/stories/Autocomplete.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Autocomplete.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,YAAY,EAAE,EACnB,KAAK,IAAI,iBAAiB,EAC3B,MAAM,4BAA4B,CAAC;;;;;AAEpC,wBAGE;AAYF,eAAO,MAAM,OAAO,0BAAoB,CAAC"}
+{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Autocomplete.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,YAAY,EAAE,EACnB,KAAK,IAAI,iBAAiB,EAC3B,MAAM,yCAAyC,CAAC;;;;;AASjD,wBAGE;AAaF,eAAO,MAAM,OAAO,0BAAoB,CAAC;AAEzC,eAAO,MAAM,EAAE,0BAAoB,CAAC"}

package/components/Autocomplete.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyBrB"}