@twreporter/react-components 8.15.0-rc.4 → 8.15.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.15.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.4...@twreporter/react-components@8.15.0-rc.5) (2022-11-07)
+
+
+### Bug Fixes
+
+* address defects ([a33aa3b](https://github.com/twreporter/twreporter-npm-packages/commit/a33aa3bf55fd9b1bf5472a4a13de942a9f8757ca))
+
+
+
+
+
 # [8.15.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.3...@twreporter/react-components@8.15.0-rc.4) (2022-10-31)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/textButton.js

@@ -31,6 +31,8 @@ var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -94,11 +96,11 @@ var TextButton = function TextButton(_ref) {
     text: text,
     weight: "bold"
   });
-  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     color: color,
     hoverColor: hoverColor,
     iconSize: iconSize
-  }, textJSX, iconComponent);
+  }, props), textJSX, iconComponent);
 };
 
 TextButton.propTypes = {

package/lib/input/components/search-bar.js

@@ -27,7 +27,7 @@ var _theme2 = require("@twreporter/core/lib/constants/theme");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _excluded = ["placeholder", "theme", "releaseBranch", "onSearch", "onClose"];
+var _excluded = ["placeholder", "theme", "releaseBranch", "onSearch", "onClose", "handleBlur", "autofocus"];
 
 var _templateObject, _templateObject2;
 
@@ -80,7 +80,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].form.withConfig({
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "search-bar__Input",
   componentId: "sc-1mjh7mz-2"
-})(["color:", ";margin-right:8px;height:24px;&,&:focus,&:focus-visible{border:none;background-color:transparent;outline:none;}&:focus,&:focus-visible{&::placeholder{color:", ";}}&::placeholder{color:", ";}&::-webkit-search-cancel-button{display:none;}"], function (props) {
+})(["color:", ";margin-right:8px;height:24px;font-size:14px;&,&:focus,&:focus-visible{border:none;background-color:transparent;outline:none;}&:focus,&:focus-visible{&::placeholder{color:", ";}}&::placeholder{color:", ";}&::-webkit-search-cancel-button{display:none;}"], function (props) {
   return props.color;
 }, function (props) {
   return props.focusColor;
@@ -106,6 +106,10 @@ var SearchBar = function SearchBar(_ref) {
       onSearch = _ref$onSearch === void 0 ? defaultFunc : _ref$onSearch,
       _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? defaultFunc : _ref$onClose,
+      _ref$handleBlur = _ref.handleBlur,
+      handleBlur = _ref$handleBlur === void 0 ? defaultFunc : _ref$handleBlur,
+      _ref$autofocus = _ref.autofocus,
+      autofocus = _ref$autofocus === void 0 ? true : _ref$autofocus,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -141,6 +145,7 @@ var SearchBar = function SearchBar(_ref) {
 
   var onBlur = function onBlur() {
     setFocus(false);
+    handleBlur();
   };
 
   var onSubmit = function onSubmit(e) {
@@ -166,7 +171,6 @@ var SearchBar = function SearchBar(_ref) {
     onSubmit: onSubmit,
     onReset: onReset,
     onFocus: onFocus,
-    onBlur: onBlur,
     focus: focus,
     focusBgColor: focusBgColor,
     desktopBgColor: desktopBgColor,
@@ -181,7 +185,8 @@ var SearchBar = function SearchBar(_ref) {
     placeholderColor: placeholderColor,
     value: keywords,
     onChange: onChange,
-    autoFocus: true
+    onBlur: onBlur,
+    autoFocus: autofocus
   }), /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: SearchIcon,
     theme: "normal",
@@ -198,7 +203,9 @@ SearchBar.propTypes = {
   theme: _theme2.THEME_PROP_TYPES,
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
   onSearch: _propTypes["default"].func,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  handleBlur: _propTypes["default"].func,
+  autofocus: _propTypes["default"].bool
 };
 var _default = SearchBar;
 exports["default"] = _default;

package/lib/title-bar/components/tab.js

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _headline = require("../../text/headline");
 
-var _paragraph = require("../../text/paragraph");
+var _button = require("../../button");
 
 var _divider = _interopRequireDefault(require("../../divider"));
 
@@ -43,8 +43,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -62,19 +60,22 @@ var tabPropType = _propTypes["default"].shape({
 var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__BarContainer",
   componentId: "ywb8e-0"
-})(["display:flex;width:100%;flex-direction:column;color:", ";& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"], _color.colorGrayscale.gray800);
+})(["display:flex;width:100%;flex-direction:column;color:", ";"], _color.colorGrayscale.gray800);
 
 var TabItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__TabItemContainer",
   componentId: "ywb8e-1"
-})(["display:flex;flex-shrink:0;color:", ";a{color:unset;text-decoration:none;}"], function (props) {
-  return props.isActive ? _color.colorBrand.heavy : 'inherit';
-});
+})(["display:flex;flex-shrink:0;margin-right:24px;&:last-child{margin-right:0;}a{text-decoration:none;}"]);
+
+var StyledTextButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.TextButton).withConfig({
+  displayName: "tab__StyledTextButton",
+  componentId: "ywb8e-2"
+})(["padding:16px 0;"]);
 
 var MobileTabContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__MobileTabContainer",
-  componentId: "ywb8e-2"
-})(["display:flex;overflow:scroll;scrollbar-width:none;&::-webkit-scrollbar{display:none;}-webkit-mask-image:", ";& > div{margin-right:24px;}"], function (props) {
+  componentId: "ywb8e-3"
+})(["display:flex;overflow:scroll;scrollbar-width:none;&::-webkit-scrollbar{display:none;}-webkit-mask-image:", ";"], function (props) {
   return props.showGradientMask ? gradientMask : 'none';
 });
 
@@ -87,14 +88,13 @@ var TabItem = function TabItem(_ref) {
       link = tab.link,
       isExternal = tab.isExternal,
       isActive = tab.isActive;
-  return /*#__PURE__*/_react["default"].createElement(TabItemContainer, _extends({
-    isActive: isActive
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+  return /*#__PURE__*/_react["default"].createElement(TabItemContainer, restProps, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
     to: link,
     isExternal: isExternal
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+  }, /*#__PURE__*/_react["default"].createElement(StyledTextButton, {
     text: text,
-    weight: "bold"
+    active: isActive,
+    size: "L"
   })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.15.0-rc.4",
+  "version": "8.15.0-rc.5",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.8.0-rc.4",
-    "@twreporter/redux": "^7.4.1-rc.4",
+    "@twreporter/core": "^1.8.0-rc.5",
+    "@twreporter/redux": "^7.4.1-rc.5",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "2d647f37f6f708d6314117ef49fab278a85cc0af"
+  "gitHead": "bf226b81aae93197d4cad8519a574ef6f85acc9b"
 }