@longline/aqua-ui 1.0.211 → 1.0.212

package/controls/TabBar/Tab.d.ts

@@ -17,10 +17,15 @@ interface ITabProps {
      */
     onClick?: () => void;
     /**
-     * If true, apply ghost state to Tab.
+     * If true, applies ghost state to `Tab`.
      * @default false
      */
     ghost?: boolean;
+    /**
+     * A `disabled` `Tab` cannot be clicked.
+     * @default false
+     */
+    disabled?: boolean;
 }
 declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;
 export { Tab, ITabProps };

package/controls/TabBar/Tab.js

@@ -32,11 +32,11 @@ var TabBase = React.forwardRef(function (props, ref) {
         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 TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __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 and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\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 and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\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 || p.disabled) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.neutral[50]; }); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    & > *:not(:first-child) {\n      border: solid 1px red;\n      visibility: hidden;\n    }  \n  "], ["\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 _b = _a.ghost, ghost = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["ghost", "disabled"]);
+    return React.createElement(TabStyled, __assign({ ref: ref, ghost: ghost, disabled: disabled }, props));
 });
 Tab.displayName = "TabBar.Tab";
 export { Tab };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/controls/TabBar/TabBar.d.ts

@@ -34,6 +34,11 @@ interface ITabBarProps {
      * @default false
      */
     ghost?: boolean;
+    /**
+     * A `disabled` `TabBar`'s tabs cannot be clicked.
+     * @default false
+     */
+    disabled?: boolean;
 }
 /**
  * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
@@ -43,7 +48,7 @@ interface ITabBarProps {
  * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
  */
 declare const TabBar: {
-    ({ active, ghost, ...props }: ITabBarProps): React.JSX.Element;
+    ({ active, ghost, disabled, ...props }: ITabBarProps): React.JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./Tab").ITabProps & React.RefAttributes<HTMLDivElement>>;
     displayName: string;
 };

package/controls/TabBar/TabBar.js

@@ -199,13 +199,14 @@ var TabBarBase = function (props) {
                     active: active === idx,
                     tabWidth: props.tabWidth,
                     ghost: props.ghost,
+                    disabled: props.disabled,
                     onClick: function () { return handleTabClick(idx); }
                 });
             }),
-            React.createElement(Underliner, { ref: underlinerRef }))));
+            React.createElement(Underliner, { disabled: props.disabled || props.ghost, ref: underlinerRef }))));
 };
 var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n  height: 40px;\n  box-sizing: border-box;\n  display: block;\n  border-bottom: solid 1px ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n  height: 40px;\n  box-sizing: border-box;\n  display: block;\n  border-bottom: solid 1px ", ";\n"])), function (p) { return p.theme.colors.neutral[80]; });
-var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n"], ["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n"
+var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n  }\n"
     /**
      * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
      * with an underliner under the active child. The `onClick(idx)` event is fired
@@ -213,7 +214,7 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
      *
      * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
      */
-])));
+])), Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; });
 /**
  * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
  * with an underliner under the active child. The `onClick(idx)` event is fired
@@ -222,8 +223,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, _c = _a.ghost, ghost = _c === void 0 ? false : _c, props = __rest(_a, ["active", "ghost"]);
-    return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost }, props));
+    var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, props = __rest(_a, ["active", "ghost", "disabled"]);
+    return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled }, props));
 };
 TabBar.Tab = Tab;
 TabBar.displayName = "TabBar";

package/controls/TabBar/Underliner.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 interface IUnderlinerProps {
     /** @ignore */
     className?: string;
+    /** Is TabBar disabled? */
+    disabled?: boolean;
 }
 declare const Underliner: React.ForwardRefExoticComponent<IUnderlinerProps & React.RefAttributes<HTMLDivElement>>;
 export { Underliner };

package/controls/TabBar/Underliner.js

@@ -21,7 +21,7 @@ var UnderlinerBase = React.forwardRef(function (props, ref) {
 /**
  * Underliner passes a reference to itself back to its parent.
  */
-var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"])), function (p) { return p.theme.colors.primary[1]; });
+var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"])), function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[1]; });
 var Underliner = React.forwardRef(function (props, ref) {
     return React.createElement(UnderlinerStyled, __assign({ ref: ref }, props));
 });

package/package.json

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