@terraware/web-components 2.0.6 → 2.0.8

package/components/DatePicker/DatePicker.d.ts

@@ -3,6 +3,7 @@ import React, { KeyboardEventHandler } from 'react';
 import './styles.scss';
 export interface Props {
     id: string;
+    autoFocus?: boolean;
     label: React.ReactNode;
     value?: string | null;
     onChange: (id: string, value?: string | null) => void;

package/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAY,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAK9D,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoD5D"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAY,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAK9D,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqD5D"}

package/components/DatePicker/DatePicker.js

@@ -43,6 +43,7 @@ function DatePicker(props) {
   var renderInput = function renderInput(params) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
       id: props.id,
+      autoFocus: props.autoFocus,
       onKeyPress: props.onKeyPress
     })), props.errorText && /*#__PURE__*/_react.default.createElement("div", {
       className: "textfield-error-text-container"

package/components/Navbar/NavItem.d.ts

@@ -1,11 +1,14 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { IconName } from '../Icon/icons';
 import './styles.scss';
+import { SubNavbarProps } from './SubNavbar';
 export interface NavItemProps {
     label: string;
     icon?: IconName;
+    children?: ReactElement<SubNavbarProps>;
     selected?: boolean;
-    onClick?: () => void;
+    isSubItem?: boolean;
+    onClick?: (open: boolean | undefined) => void;
     id?: string;
     isFooter?: boolean;
 }

package/components/Navbar/NavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavItem.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAuBhE"}
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAmDhE"}

package/components/Navbar/NavItem.js

@@ -7,28 +7,65 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = NavItem;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 
 require("./styles.scss");
 
+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 NavItem(props) {
   var label = props.label,
       icon = props.icon,
+      children = props.children,
       selected = props.selected,
       onClick = props.onClick,
       id = props.id,
       isFooter = props.isFooter;
+  var hasChildrenSelected = (0, _react.useCallback)(function () {
+    if (children) {
+      if (children.props.children) {
+        var subChildren = children.props.children;
+
+        if (Array.isArray(subChildren)) {
+          return subChildren.some(function (subChild) {
+            return subChild.props.selected;
+          });
+        }
+
+        return subChildren.props.selected;
+      }
+    }
+
+    return false;
+  }, [children]);
+
+  _react.default.useEffect(function () {
+    if (children && hasChildrenSelected()) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [children, hasChildrenSelected, selected]);
+
+  var _React$useState = _react.default.useState(hasChildrenSelected()),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
 
   var onClickHandler = function onClickHandler() {
     if (onClick) {
-      onClick();
+      onClick(!open);
     }
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n        nav-item\n        ".concat(selected ? 'nav-item--selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n      ")
+    className: "\n        nav-item\n        ".concat(selected ? 'nav-item--selected' : '', "\n        ").concat(hasChildrenSelected() ? 'nav-item--children-selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n      ")
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "nav-item-content",
     onClick: onClickHandler,
@@ -38,5 +75,8 @@ function NavItem(props) {
     className: "nav-item--icon"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "nav-item--label"
-  }, label)));
+  }, label), children && !open && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: 'chevronDown',
+    className: "nav-item--arrow"
+  })), children && open && children);
 }

package/components/Navbar/SubNavbar.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { NavItemProps } from './NavItem';
+import './styles.scss';
+export interface SubNavbarProps {
+    children: ReactElement<NavItemProps> | ReactElement<NavItemProps>[];
+}
+export default function SubNavbar(props: SubNavbarProps): JSX.Element;
+//# sourceMappingURL=SubNavbar.d.ts.map

package/components/Navbar/SubNavbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/SubNavbar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAIpE"}

package/components/Navbar/SubNavbar.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SubNavbar;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./styles.scss");
+
+function SubNavbar(props) {
+  var children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "subnavbar"
+  }, children);
+}

package/components/Navbar/styles.scss

@@ -9,7 +9,7 @@
 .navbar {
   height: 100%;
   position: fixed;
-  z-index: 1100;
+  z-index: 1101;
   width: $tw-sz-nvgtn-side-nav-width;
   display: flex;
   flex-direction: column;
@@ -80,13 +80,13 @@
     }
 
     &--children-selected {
-      background-color: $tw-clr-bg-secondary-hover;
+      background-color: transparent;
 
       &:hover {
-        background-color: $tw-clr-bg-secondary-hover;
+        background-color: transparent;
 
         & > .nav-item-content {
-          background-color: $tw-clr-bg-secondary;
+          background-color: transparent;
         }
       }
 
@@ -96,6 +96,11 @@
         &:hover {
           background-color: $tw-clr-bg-ghost-hover;
         }
+
+        &--selected {
+          background-color: $tw-clr-bg-ghost-hover;
+          position: relative;
+        }
       }
     }
 
@@ -123,8 +128,8 @@
     }
 
     .subnavbar .nav-item {
+      padding-left: $tw-spc-base-small;
       padding-right: $tw-spc-base-small;
-      background-color: $tw-clr-bg-secondary-hover;
 
       &-content {
         padding-left: calc(#{$tw-spc-base-small} * 2);

package/components/Textfield/Textfield.d.ts

@@ -5,6 +5,7 @@ import './styles.scss';
 declare type TextfieldType = 'text' | 'textarea' | 'number';
 declare type Handler = (id: string, value: unknown) => void;
 export interface Props {
+    autoFocus?: boolean;
     onChange?: Handler;
     label: string;
     disabled?: boolean;

package/components/Textfield/Textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAW,YAAY,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAIvB,aAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,aAAK,OAAO,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8H3D"}
+{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAW,YAAY,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAIvB,aAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,aAAK,OAAO,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiI3D"}

package/components/Textfield/Textfield.js

@@ -21,6 +21,7 @@ var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
 
 function TextField(props) {
   var value = props.value,
+      autoFocus = props.autoFocus,
       onChange = props.onChange,
       label = props.label,
       disabled = props.disabled,
@@ -109,12 +110,14 @@ function TextField(props) {
     name: iconLeft,
     className: "textfield-value--icon-left"
   }), /*#__PURE__*/_react.default.createElement("input", Object.assign({
+    autoFocus: autoFocus,
     value: value || '',
     disabled: readonly || disabled,
     placeholder: placeholder,
     onChange: textfieldOnChange,
     onKeyDown: onKeyDownHandler
   }, typeProps)), iconRight ? renderRightIcon() : null) : /*#__PURE__*/_react.default.createElement("textarea", {
+    autoFocus: autoFocus,
     className: textfieldClass,
     value: value,
     disabled: readonly || disabled,

package/package.json

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

package/stories/Navbar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Navbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,EAAE,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;;;;;;AAI3E,wBAIE;AAkCF,eAAO,MAAM,OAAO,oBAAoB,CAAC"}
+{"version":3,"file":"Navbar.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Navbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,EAAE,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;;;;;;AAK3E,wBAIE;AAsCF,eAAO,MAAM,OAAO,oBAAoB,CAAC"}