@scm-manager/ui-components 2.27.3-20211114-175217 → 2.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.27.3-20211114-175217",
+  "version": "2.27.3",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.27.3-20211114-175217",
+    "@scm-manager/ui-tests": "^2.27.3",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -37,6 +37,7 @@
     "@types/fetch-mock": "^7.3.1",
     "@types/jest": "^24.0.19",
     "@types/lowlight": "^0.0.0",
+    "@types/query-string": "5",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
     "@types/react-router-dom": "^5.1.0",
@@ -60,21 +61,22 @@
     "sass-loader": "^12.3.0",
     "storybook-addon-i18next": "^1.3.0",
     "storybook-addon-themes": "^6.1.0",
+    "tabbable": "^5.2.1",
     "to-camel-case": "^1.0.0",
     "webpack": "^5.61.0",
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.27.3-20211114-175217",
-    "@scm-manager/ui-extensions": "^2.27.3-20211114-175217",
-    "@scm-manager/ui-types": "^2.27.3-20211114-175217",
+    "@scm-manager/ui-api": "^2.27.3",
+    "@scm-manager/ui-extensions": "^2.27.3",
+    "@scm-manager/ui-types": "^2.27.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "lowlight": "^1.13.0",
     "prism-themes": "^1.4.0",
-    "query-string": "6.14.1",
+    "query-string": "5",
     "react": "^17.0.1",
     "react-diff-view": "^2.4.1",
     "react-dom": "^17.0.1",
@@ -91,7 +93,6 @@
     "remark-gfm": "^1.0.0",
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
-    "tabbable": "^5.2.1",
     "unified": "^9.2.1"
   },
   "babel": {

package/src/BranchSelector.tsx

@@ -61,8 +61,8 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
             <MinWidthControl className="control">
               <Select
                 className="is-fullwidth"
-                options={branches.map(b => ({ label: b.name, value: b.name }))}
-                onChange={branch => onSelectBranch(branches.filter(b => b.name === branch)[0])}
+                options={branches.map((b) => ({ label: b.name, value: b.name }))}
+                onChange={(branch) => onSelectBranch(branches.filter((b) => b.name === branch)[0])}
                 disabled={!!disabled}
                 value={selectedBranch}
                 addValueToOptions={true}

package/src/CardColumnGroup.tsx

@@ -84,7 +84,7 @@ class CardColumnGroup extends React.Component<Props, State> {
 
     return (
       <div className="mb-4">
-        <h3>
+        <h2>
           <span className={classNames("is-size-4", "is-clickable")} onClick={this.toggleCollapse}>
             {icon}
           </span>{" "}
@@ -95,7 +95,7 @@ class CardColumnGroup extends React.Component<Props, State> {
           ) : (
             name
           )}
-        </h3>
+        </h2>
         <hr />
         <div className={classNames("columns", "card-columns", "is-multiline", "mx-3", "my-0")}>{content}</div>
         <div className="is-clearfix" />

package/src/DateFromNow.tsx

@@ -36,9 +36,8 @@ const DateFromNow: FC<Props> = ({ className, ...dateProps }) => {
     return null;
   }
 
-  const dateTime = formatter.formatFull();
   return (
-    <DateElement className={className} dateTime={dateTime} title={dateTime}>
+    <DateElement className={className} title={formatter.formatFull()}>
       {formatter.formatDistance()}
     </DateElement>
   );

package/src/DateShort.tsx

@@ -36,9 +36,8 @@ const DateShort: FC<Props> = ({ className, ...dateProps }) => {
     return null;
   }
 
-  const dateTime = formatter.formatFull();
   return (
-    <DateElement className={className} dateTime={dateTime} title={dateTime}>
+    <DateElement className={className} title={formatter.formatFull()}>
       {formatter.formatShort()}
     </DateElement>
   );

package/src/ErrorBoundary.tsx

@@ -113,7 +113,7 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
 
   const fallbackProps = {
     error,
-    errorInfo
+    errorInfo,
   };
 
   return <FallbackComponent {...fallbackProps} />;
@@ -135,7 +135,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
       error,
-      errorInfo
+      errorInfo,
     });
   }
 

package/src/Icon.tsx

@@ -46,14 +46,14 @@ const Icon: FC<Props> = ({
   className,
   onClick,
   testId,
-  tabIndex,
+  tabIndex = -1,
   onEnter,
-  alt = title
+  alt = title,
 }) => {
   return (
     <i
       onClick={onClick}
-      onKeyPress={event => event.key === "Enter" && onEnter && onEnter(event)}
+      onKeyPress={(event) => event.key === "Enter" && onEnter && onEnter(event)}
       title={title}
       className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)}
       tabIndex={tabIndex}

package/src/OverviewPageActions.tsx

@@ -52,7 +52,7 @@ const OverviewPageActions: FC<Props> = ({
   groupSelected,
   label,
   testId,
-  searchPlaceholder
+  searchPlaceholder,
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -63,7 +63,7 @@ const OverviewPageActions: FC<Props> = ({
     <div className="column is-flex">
       <Select
         className="is-fullwidth"
-        options={groups.map(g => ({ value: g, label: g }))}
+        options={groups.map((g) => ({ value: g, label: g }))}
         value={currentGroup}
         onChange={groupSelected}
       />

package/src/SplitAndReplace.tsx

@@ -33,10 +33,9 @@ export type Replacement = {
 type Props = {
   text: string;
   replacements: Replacement[];
-  textWrapper?: (s: string) => ReactNode;
 };
 
-const defaultTextWrapper = (s: string) => {
+const textWrapper = (s: string) => {
   const first = s.startsWith(" ") ? <>&nbsp;</> : "";
   const last = s.endsWith(" ") ? <>&nbsp;</> : "";
   return (
@@ -48,7 +47,7 @@ const defaultTextWrapper = (s: string) => {
   );
 };
 
-const SplitAndReplace: FC<Props> = ({ text, replacements, textWrapper = defaultTextWrapper }) => {
+const SplitAndReplace: FC<Props> = ({ text, replacements }) => {
   const parts = textSplitAndReplace<ReactNode>(text, replacements, textWrapper);
   if (parts.length === 0) {
     return <>{parts[0]}</>;

package/src/SyntaxHighlighter.stories.tsx

@@ -48,7 +48,7 @@ storiesOf("SyntaxHighlighter", module)
   ))
   .add("Go", () => (
     <Spacing>
-      <SyntaxHighlighter language="go" value={GoHttpServer} />
+      <SyntaxHighlighter language="golang" value={GoHttpServer} />
     </Spacing>
   ))
   .add("Javascript", () => (

package/src/Tooltip.tsx

@@ -36,7 +36,7 @@ export type TooltipLocation = "bottom" | "right" | "top" | "left";
 
 class Tooltip extends React.Component<Props> {
   static defaultProps = {
-    location: "right"
+    location: "right",
   };
 
   render() {