@tedconf/react-ted-bootstrap - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

build/Button/index.js

@@ -12,3 +12,3 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var button = emotion_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n"], ["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n"])));
+var button = emotion_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  &:focus,\n  &:active {\n    border-color: #66afe9;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),\n      0 0 8px rgba(102, 175, 233, 0.6);\n    outline: 0;\n  }\n"], ["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  &:focus,\n  &:active {\n    border-color: #66afe9;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),\n      0 0 8px rgba(102, 175, 233, 0.6);\n    outline: 0;\n  }\n"])));
 var theme = {
@@ -15,0 +15,0 @@ primary: emotion_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: #4e4e4e;\n  "], ["\n    background-color: #4e4e4e;\n  "]))),

build/DataTable/index.js

@@ -34,3 +34,3 @@ "use strict";
 var styledTable = emotion_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: transparent;\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-family: inherit;\n  font-size: 14px;\n  margin-bottom: 20px;\n  max-width: 100%;\n  width: 100%;\n"], ["\n  background-color: transparent;\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-family: inherit;\n  font-size: 14px;\n  margin-bottom: 20px;\n  max-width: 100%;\n  width: 100%;\n"])));
-var styledThead = emotion_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid #808080;\n  border-color: inherit;\n  border-top: 2px solid #808080;\n  display: table-header-group;\n  vertical-align: middle;\n"], ["\n  border-bottom: 1px solid #808080;\n  border-color: inherit;\n  border-top: 2px solid #808080;\n  display: table-header-group;\n  vertical-align: middle;\n"])));
+var styledThead = emotion_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-color: inherit;\n  border-top: 1px solid #e3e3e3;\n  display: table-header-group;\n  vertical-align: middle;\n"], ["\n  border-color: inherit;\n  border-top: 1px solid #e3e3e3;\n  display: table-header-group;\n  vertical-align: middle;\n"])));
 var styledRow = {
@@ -44,6 +44,6 @@ base: emotion_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: transparent;\n  "], ["\n    background-color: transparent;\n  "]))),
 };
-var styledTh = emotion_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-weight: 700;\n  padding: 15px 10px;\n  text-align: left;\n"], ["\n  font-weight: 700;\n  padding: 15px 10px;\n  text-align: left;\n"])));
+var styledTh = emotion_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-weight: 700;\n  padding: 0.75em 1em;\n  text-align: left;\n"], ["\n  font-weight: 700;\n  padding: 0.75em 1em;\n  text-align: left;\n"])));
 var sortable = emotion_1.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var styledTd = emotion_1.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-top: 1px solid #e3e3e3;\n  line-height: 1.42857;\n  padding: 15px 10px;\n  vertical-align: top;\n"], ["\n  border-top: 1px solid #e3e3e3;\n  line-height: 1.42857;\n  padding: 15px 10px;\n  vertical-align: top;\n"])));
-var flexDiv = emotion_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var styledTd = emotion_1.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-top: 1px solid #e3e3e3;\n  line-height: 1.42857;\n  padding: 1.25em 1em;\n  vertical-align: top;\n"], ["\n  border-top: 1px solid #e3e3e3;\n  line-height: 1.42857;\n  padding: 1.25em 1em;\n  vertical-align: top;\n"])));
+var flexDiv = emotion_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  span {\n    margin-right: 0.4em;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  span {\n    margin-right: 0.4em;\n  }\n"])));
 var DataTable = /** @class */ (function (_super) {
@@ -88,3 +88,3 @@ __extends(DataTable, _super);
                     react_1.default.createElement("div", { className: flexDiv },
-                        h.label,
+                        react_1.default.createElement("span", null, h.label),
                         _this.renderCaret(index))));
@@ -91,0 +91,0 @@ })));

build/Dropdown/index.d.ts

@@ -16,3 +16,3 @@ import React, { Component } from 'react';
     componentWillUnmount(): void;
-    onClick: (e: React.MouseEvent<Element, MouseEvent>, value: string) => void;
+    onClick: (e: React.MouseEvent<Element, MouseEvent>, value: string) => void | null;
     handleClickOutside: (e: Event) => void;
@@ -19,0 +19,0 @@ toggleExpanded: () => void;

build/Dropdown/index.js

@@ -48,3 +48,3 @@ "use strict";
             _this.setState({ expanded: false });
-            _this.props.onClick ? _this.props.onClick(value) : null;
+            return _this.props.onClick ? _this.props.onClick(value) : null;
         };
@@ -51,0 +51,0 @@ _this.handleClickOutside = function (e) {

build/NavFlaps/index.js

@@ -29,3 +29,3 @@ "use strict";
 var react_1 = __importStar(require("react"));
-var navRow = emotion_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid #ddd;\n  display: flex;\n  font-family: inherit;\n  font-size: 18px;\n  font-weight: bold;\n  list-style: none;\n  padding: 0;\n  margin-bottom: 25px;\n  width: 100%;\n"], ["\n  border-bottom: 1px solid #ddd;\n  display: flex;\n  font-family: inherit;\n  font-size: 18px;\n  font-weight: bold;\n  list-style: none;\n  padding: 0;\n  margin-bottom: 25px;\n  width: 100%;\n"])));
+var navRow = emotion_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid #ddd;\n  display: flex;\n  font-family: inherit;\n  font-size: 18px;\n  font-weight: bold;\n  list-style: none;\n  padding: 0;\n  width: 100%;\n"], ["\n  border-bottom: 1px solid #ddd;\n  display: flex;\n  font-family: inherit;\n  font-size: 18px;\n  font-weight: bold;\n  list-style: none;\n  padding: 0;\n  width: 100%;\n"])));
 var subNavRow = emotion_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid #ddd;\n  display: flex;\n  font-size: 16px;\n  list-style: none;\n  padding: 0;\n  margin-bottom: 25px;\n  width: 100%;\n"], ["\n  border-bottom: 1px solid #ddd;\n  display: flex;\n  font-size: 16px;\n  list-style: none;\n  padding: 0;\n  margin-bottom: 25px;\n  width: 100%;\n"])));
@@ -32,0 +32,0 @@ var navLabel = emotion_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: 3px solid transparent;\n  color: #333333;\n  cursor: pointer;\n  margin-right: 30px;\n  padding: 7px 0 4px;\n"], ["\n  border-bottom: 3px solid transparent;\n  color: #333333;\n  cursor: pointer;\n  margin-right: 30px;\n  padding: 7px 0 4px;\n"])));

build/NavToggle/index.d.ts

@@ -7,5 +7,10 @@ import React, { Component } from 'react';
 export default class NavToggle extends Component<Props> {
+    private wrapperRef;
     state: {
         expanded: boolean;
     };
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleClickOutside: (e: Event) => void;
     toggle: () => void;
@@ -12,0 +17,0 @@ render(): JSX.Element;

build/NavToggle/index.js

@@ -36,7 +36,17 @@ "use strict";
     __extends(NavToggle, _super);
-    function NavToggle() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function NavToggle(props) {
+        var _this = _super.call(this, props) || this;
         _this.state = {
             expanded: false,
         };
+        _this.handleClickOutside = function (e) {
+            var targetNode = e.target instanceof Node ? e.target : null;
+            console.log('called');
+            if (_this.wrapperRef &&
+                _this.wrapperRef.current &&
+                !_this.wrapperRef.current.contains(targetNode) &&
+                _this.state.expanded) {
+                _this.toggle();
+            }
+        };
         _this.toggle = function () {
@@ -47,13 +57,21 @@ _this.setState(function (prevState) { return ({
         };
+        _this.wrapperRef = react_1.default.createRef();
         return _this;
     }
+    NavToggle.prototype.componentDidMount = function () {
+        document.addEventListener('click', this.handleClickOutside);
+    };
+    NavToggle.prototype.componentWillUnmount = function () {
+        document.removeEventListener('click', this.handleClickOutside);
+    };
     NavToggle.prototype.render = function () {
         var expanded = this.state.expanded;
         var openClass = expanded ? dropdownOpen : null;
-        return (react_1.default.createElement("ul", { className: container },
-            react_1.default.createElement("li", { className: "event-switcher dropdown" },
-                react_1.default.createElement("button", { "aria-expanded": expanded, className: emotion_1.cx(toggleButton, openClass), onClick: this.toggle, type: "button" },
-                    this.props.label,
-                    react_1.default.createElement("span", { className: caret })),
-                expanded ? (react_1.default.createElement("ul", { className: dropdownMenu, role: "menu" }, this.props.children)) : null)));
+        return (react_1.default.createElement("div", { ref: this.wrapperRef },
+            react_1.default.createElement("ul", { className: container },
+                react_1.default.createElement("li", { className: "event-switcher dropdown" },
+                    react_1.default.createElement("button", { "aria-expanded": expanded, className: emotion_1.cx(toggleButton, openClass), onClick: this.toggle, type: "button" },
+                        this.props.label,
+                        react_1.default.createElement("span", { className: caret })),
+                    expanded ? (react_1.default.createElement("ul", { className: dropdownMenu, role: "menu" }, this.props.children)) : null))));
     };
@@ -60,0 +78,0 @@ return NavToggle;

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A shared set of UI components for internal projects",
@@ -32,4 +32,4 @@ "main": "build/index.js",
     "emotion": ">= 10.0.5",
-    "react": ">= 16.3.3",
-    "react-dom": ">= 16.3.3"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0"
   },
@@ -65,4 +65,4 @@ "devDependencies": {
     "react-dom": "^16.8.0",
-    "react-scripts": "^2.1.8",
-    "react-testing-library": "^6.0.2",
+    "react-scripts": "^3.0.0",
+    "react-testing-library": "^7.0.0",
     "rimraf": "^2.6.2",
@@ -69,0 +69,0 @@ "ts-jest": "^24.0.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81368

increased by1.68%

Lines of code

1216

increased by2.01%

No dependency changes