@longline/aqua-ui 1.0.209 → 1.0.211

package/containers/Form/Field.d.ts

@@ -35,10 +35,12 @@ interface IFieldProps {
     forceupdate?: boolean;
     /**
      * If true, display an asterisk for required fields.
+     * @default false
      */
     asterisk?: boolean;
     /**
      * If true, apply ghost state to Field and the control in it.
+     * @default false
      */
     ghost?: boolean;
     /**

package/controls/ListView/elements/Table.js

@@ -94,6 +94,9 @@ var TableBase = function (_a) {
             }
         }
     }, [activeRef]);
+    // Show no-data element only after an additional render tick. Race conditions
+    // in evaluating multiple states in ListView's user can result in a situation
+    // where data is present, and yet "no data" appears.
     React.useEffect(function () {
         var _a;
         if ((!Array.isArray(props.data) || ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0) && !props.ghost) {

package/controls/TabBar/Tab.d.ts

@@ -16,6 +16,11 @@ interface ITabProps {
      * Fired when tab is clicked.
      */
     onClick?: () => void;
+    /**
+     * If true, apply ghost state to Tab.
+     * @default false
+     */
+    ghost?: boolean;
 }
 declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;
 export { Tab, ITabProps };

package/controls/TabBar/Tab.js

@@ -13,13 +13,30 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+import { Ghost } from '../Ghost';
 var TabBase = React.forwardRef(function (props, ref) {
-    return React.createElement("div", { role: "tab", "aria-selected": props.active, className: props.className, ref: ref, onClick: props.onClick }, props.children);
+    return React.createElement("div", { className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: props.onClick },
+        props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '6px', right: '5px', bottom: '6px', zIndex: 100 } }),
+        React.createElement("div", null, props.children));
+});
+var TabStyled = styled(TabBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost state:\n  ", "  \n"], ["\n  position: relative;\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost state:\n  ", "  \n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    pointer-events: none;\n    user-select: none;\n    & > *:not(:first-child) {\n      border: solid 1px red;\n      visibility: hidden;\n    }  \n  "], ["\n    pointer-events: none;\n    user-select: none;\n    & > *:not(:first-child) {\n      border: solid 1px red;\n      visibility: hidden;\n    }  \n  "]))); });
+var Tab = React.forwardRef(function (_a, ref) {
+    var _b = _a.ghost, ghost = _b === void 0 ? false : _b, props = __rest(_a, ["ghost"]);
+    return React.createElement(TabStyled, __assign({ ref: ref, ghost: ghost }, props));
 });
-var TabStyled = styled(TabBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n"], ["\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; });
-var Tab = React.forwardRef(function (props, ref) { return React.createElement(TabStyled, __assign({ ref: ref }, props)); });
 Tab.displayName = "TabBar.Tab";
 export { Tab };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/TabBar/TabBar.d.ts

@@ -29,6 +29,11 @@ interface ITabBarProps {
      * @param idx - The index of the new active tab.
      */
     onChange?: (idx: number) => void;
+    /**
+     * If true, apply ghost state to TabBar and Tabs in it.
+     * @default false
+     */
+    ghost?: boolean;
 }
 /**
  * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
@@ -38,7 +43,7 @@ interface ITabBarProps {
  * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
  */
 declare const TabBar: {
-    ({ active, ...props }: ITabBarProps): React.JSX.Element;
+    ({ active, ghost, ...props }: ITabBarProps): React.JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./Tab").ITabProps & React.RefAttributes<HTMLDivElement>>;
     displayName: string;
 };

package/controls/TabBar/TabBar.js

@@ -198,6 +198,7 @@ var TabBarBase = function (props) {
                     ref: function (el) { return tabRefs.current[idx] = el; },
                     active: active === idx,
                     tabWidth: props.tabWidth,
+                    ghost: props.ghost,
                     onClick: function () { return handleTabClick(idx); }
                 });
             }),
@@ -221,8 +222,8 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
  * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
  */
 var TabBar = function (_a) {
-    var _b = _a.active, active = _b === void 0 ? 0 : _b, props = __rest(_a, ["active"]);
-    return React.createElement(TabBarStyled, __assign({ active: active }, props));
+    var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, props = __rest(_a, ["active", "ghost"]);
+    return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost }, props));
 };
 TabBar.Tab = Tab;
 TabBar.displayName = "TabBar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.209",
+  "version": "1.0.211",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",

package/styles/StyleBase.js

@@ -3,6 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { createGlobalStyle } from 'styled-components';
-var StyleBase = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"], ["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"])), function (p) { return p.theme.colors.font; });
+var StyleBase = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  a, a:visited, a:active, a:link {\n    color: ", ";\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"], ["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  a, a:visited, a:active, a:link {\n    color: ", ";\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"])), function (p) { return p.theme.colors.font; }, function (p) { return p.theme.colors.primary[1]; });
 export { StyleBase };
 var templateObject_1;