Merge pull request #733 from vrk-kpa/develop

[Release] 10.0.3

.gitignore

@@ -4,7 +4,7 @@
 
 # build output
 dist
-build
+./build
 tmp
 .cache
 .awcache

.styleguidist/StyleGuideRenderer.tsx

@@ -0,0 +1,134 @@
+/**
+ * Copied from react-styleguidist v.13.1.1 (identical to v.11.2.1)
+ * and modified to add conditional InlineAlert about documentation version
+ * https://github.com/styleguidist/react-styleguidist/blob/master/src/client/rsg-components/StyleGuide/StyleGuideRenderer.tsx
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Logo from 'react-styleguidist/lib/client/rsg-components/Logo';
+import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
+import cx from 'clsx';
+import { Classes } from 'jss';
+import Ribbon from 'react-styleguidist/lib/client/rsg-components/Ribbon';
+import Version from 'react-styleguidist/lib/client/rsg-components/Version';
+import * as Rsg from 'react-styleguidist/lib/typings';
+import { Alert } from '../src/core/Alert/';
+
+const styles = ({
+  color,
+  fontFamily,
+  fontSize,
+  sidebarWidth,
+  mq,
+  space,
+  maxWidth,
+}: Rsg.Theme) => ({
+  root: {
+    minHeight: '100vh',
+    backgroundColor: color.baseBackground,
+  },
+  hasSidebar: {
+    paddingLeft: sidebarWidth,
+    [mq.small]: {
+      paddingLeft: 0,
+    },
+  },
+  content: {
+    maxWidth,
+    padding: [[space[2], space[4]]],
+    margin: [[0, 'auto']],
+    [mq.small]: {
+      padding: space[2],
+    },
+    display: 'block',
+  },
+  sidebar: {
+    backgroundColor: color.sidebarBackground,
+    border: [[color.border, 'solid']],
+    borderWidth: [[0, 1, 0, 0]],
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: sidebarWidth,
+    overflow: 'auto',
+    WebkitOverflowScrolling: 'touch',
+    [mq.small]: {
+      position: 'static',
+      width: 'auto',
+      borderWidth: [[1, 0, 0, 0]],
+      paddingBottom: space[0],
+    },
+  },
+  logo: {
+    padding: space[2],
+    borderBottom: [[1, color.border, 'solid']],
+  },
+  footer: {
+    display: 'block',
+    color: color.light,
+    fontFamily: fontFamily.base,
+    fontSize: fontSize.small,
+  },
+});
+
+export interface JssInjectedProps {
+  classes: Classes;
+}
+
+interface StyleGuideRendererProps extends JssInjectedProps {
+  title: string;
+  version?: string;
+  homepageUrl: string;
+  children: React.ReactNode;
+  toc?: React.ReactNode;
+  hasSidebar?: boolean;
+}
+
+export const StyleGuideRenderer: React.FunctionComponent<
+  StyleGuideRendererProps
+> = ({ classes, title, version, children, toc, hasSidebar }) => {
+  const [showAlert, setShowAlert] = useState(true);
+
+  return (
+    <div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
+      <main className={classes.content}>
+        {process.env.BUILD_TYPE === 'ASSETS' && showAlert && (
+          <Alert
+            style={{ marginBottom: '20px' }}
+            closeText="Close"
+            onCloseButtonClick={() => setShowAlert(false)}
+          >
+            You are browsing documentation for an old library version. See{' '}
+            <a href={process.env.BASE_PATH}>latest documentation</a>.
+          </Alert>
+        )}
+        {children}
+        <footer className={classes.footer}></footer>
+      </main>
+      {hasSidebar && (
+        <div className={classes.sidebar} data-testid="sidebar">
+          <header className={classes.logo}>
+            <Logo>{title}</Logo>
+            {version && <Version>{version}</Version>}
+          </header>
+          {toc}
+        </div>
+      )}
+      <Ribbon />
+    </div>
+  );
+};
+
+StyleGuideRenderer.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
+  title: PropTypes.string.isRequired,
+  version: PropTypes.string,
+  homepageUrl: PropTypes.string.isRequired,
+  children: PropTypes.any.isRequired,
+  toc: PropTypes.any.isRequired,
+  hasSidebar: PropTypes.bool,
+};
+
+export default Styled<StyleGuideRendererProps>(styles)(StyleGuideRenderer);

.styleguidist/styleguidist.sections.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const glob = require('glob');
+const versions = require('../styleguide.versions');
 
 const primitiveComponents = [
   'Block',
@@ -39,6 +40,21 @@ const getComponentWithVariants = (component) => (variants) =>
     ),
   ];
 
+const getVersions = () => {
+  const href = process.env.BASE_PATH || './';
+  const basePath = process.env.BASE_PATH || '';
+  return [
+    {
+      name: 'Latest',
+      href,
+    },
+    ...versions.map((version) => ({
+      ...version,
+      href: basePath + version.href,
+    })),
+  ];
+};
+
 module.exports = {
   sections: [
     {
@@ -82,6 +98,11 @@ module.exports = {
       sectionDepth: 2,
       expand: true,
     },
+    {
+      name: 'Versions',
+      content: './.styleguidist/versions.md',
+      sections: getVersions(),
+    },
     {
       name: 'Components',
       content: './.styleguidist/components.md',

.styleguidist/versions.md

@@ -0,0 +1,5 @@
+Documentation for latest major versions can be accessed from the sidebar.
+
+```js noeditor
+
+```

.styleguidist/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = (env) => ({
   mode: env.production ? 'production' : 'development',
@@ -12,6 +13,12 @@ module.exports = (env) => ({
       fs: false,
     },
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.BUILD_TYPE': JSON.stringify(process.env.BUILD_TYPE),
+      'process.env.BASE_PATH': JSON.stringify(process.env.BASE_PATH),
+    }),
+  ],
   module: {
     rules: [
       // Run the typescript compilier on .ts files before webpack
@@ -31,4 +38,3 @@ module.exports = (env) => ({
     ],
   },
 });
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "10.0.2",
+  "version": "10.0.3",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -66,7 +66,8 @@
     "build:cleantmp": "rimraf ./dist/tmp",
     "bundle-analyzer": "size-limit --why",
     "styleguide": "styleguidist server",
-    "styleguide:build": "styleguidist build",
+    "styleguide:build": "cross-env BASE_PATH=/suomifi-ui-components styleguidist build",
+    "styleguide:assets": "node styleguide.add.version.js && cross-env BUILD_TYPE=ASSETS BASE_PATH=/suomifi-ui-components styleguidist build && node styleguide.move.build.js",
     "deploy": "gh-pages -d styleguide -m \"[skip ci] Updates\"",
     "deploy-dev": "gh-pages -d styleguide -e dev -m \"[skip ci] Updates\""
   },
@@ -110,6 +111,7 @@
     "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-tree-shaking": "1.10.0",
+    "fs-extra": "11.1.1",
     "gh-pages": "4.0.0",
     "husky": "8.0.1",
     "jest": "28.1.3",

src/core/Dropdown/Dropdown/Dropdown.tsx

@@ -12,7 +12,6 @@ import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
 import {
   forkRefs,
   getOwnerDocument,
-  getRecursiveChildText,
   HTMLAttributesIncludingDataAttributes,
 } from '../../../utils/common/common';
 import { Popover } from '../../../core/Popover/Popover';
@@ -77,7 +76,7 @@ const { Provider: DropdownProvider, Consumer: DropdownConsumer } =
 
 interface DropdownState {
   selectedValue: string | undefined | null;
-  selectedValueText: string | undefined | null;
+  selectedValueNode: ReactNode | undefined | null;
   ariaExpanded: boolean;
   showPopover: boolean;
   focusedDescendantId: string | null | undefined;
@@ -168,7 +167,7 @@ class BaseDropdown extends Component<DropdownProps> {
         : 'defaultValue' in this.props
         ? this.props.defaultValue
         : undefined,
-    selectedValueText: BaseDropdown.parseSelectedValueText(
+    selectedValueNode: BaseDropdown.getSelectedValueNode(
       'value' in this.props
         ? this.props.value
         : 'defaultValue' in this.props
@@ -207,7 +206,7 @@ class BaseDropdown extends Component<DropdownProps> {
     if ('value' in nextProps && value !== prevState.selectedValue) {
       return {
         selectedValue: value,
-        selectedValueText: BaseDropdown.parseSelectedValueText(
+        selectedValueNode: BaseDropdown.getSelectedValueNode(
           value,
           nextProps.children,
         ),
@@ -216,24 +215,24 @@ class BaseDropdown extends Component<DropdownProps> {
     return null;
   }
 
-  static parseSelectedValueText(
+  static getSelectedValueNode(
     selectedValue: string | undefined,
     children:
       | Array<ReactElement<DropdownItemProps>>
       | ReactElement<DropdownItemProps>
       | undefined,
-  ): string | undefined {
+  ): ReactNode | undefined {
     if (selectedValue === undefined || children === undefined) return undefined;
 
     if (Array.isArray(children)) {
       for (let index = 0; index < children.length; index += 1) {
         const element = children[index];
         if (element.props.value === selectedValue) {
-          return getRecursiveChildText(element);
+          return element.props.children;
         }
       }
     } else {
-      return getRecursiveChildText(children);
+      return children.props.children;
     }
   }
 
@@ -258,7 +257,7 @@ class BaseDropdown extends Component<DropdownProps> {
     }
     this.setState({
       selectedValue: itemValue,
-      selectedValueText: BaseDropdown.parseSelectedValueText(
+      selectedValueNode: BaseDropdown.getSelectedValueNode(
         itemValue,
         this.props.children,
       ),
@@ -429,7 +428,7 @@ class BaseDropdown extends Component<DropdownProps> {
     if (this.props.alwaysShowVisualPlaceholder) {
       return this.props.visualPlaceholder;
     }
-    return this.state.selectedValueText ?? this.props.visualPlaceholder;
+    return this.state.selectedValueNode ?? this.props.visualPlaceholder;
   }
 
   private focusToButtonAndClosePopover() {

src/core/Pagination/PageInput/PageInput.tsx

@@ -124,7 +124,11 @@ class BasePageInput extends Component<
           ? parsedValue
           : null;
 
-      if (verifiedValue === null && event.target.value !== '') {
+      if (
+        event.target.value !== '' &&
+        (verifiedValue === null ||
+          verifiedValue.toString().length !== event.target.value.length)
+      ) {
         this.setState({ status: 'error' });
       } else {
         this.setState({ status: 'default' });

src/utils/common/common.ts

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, ReactElement, Ref } from 'react';
+import React, { MutableRefObject, Ref } from 'react';
 import { getLogger } from '../../utils/log';
 
 export function windowAvailable() {
@@ -47,34 +47,6 @@ export const forkRefs =
     });
   };
 
-export const getRecursiveChildText = (reactNode: ReactElement): any => {
-  const children = reactNode.props?.children || undefined;
-  if (Array.isArray(reactNode)) {
-    // Multiple children
-    const joinedNodes: Array<ReactElement | string> = [];
-    reactNode.forEach((node) => {
-      if (typeof node === 'object') {
-        joinedNodes.push(getRecursiveChildText(node));
-      } else if (typeof node === 'string') {
-        joinedNodes.push(node);
-      }
-    });
-    return joinedNodes.join(' ');
-  }
-  if (children === undefined) {
-    if (typeof reactNode === 'string') return reactNode;
-    return '';
-  }
-  if (typeof children === 'object') {
-    // Found direct child
-    return getRecursiveChildText(children);
-  }
-  if (typeof children === 'string' || typeof children === 'number') {
-    // Found searchable string
-    return children;
-  }
-};
-
 /**
  * The following interface allows data-* attributes.
  * The basic React.HTMLAttributes interface throws errors when trying to do something like