[add] Click Boundary component

[optimize] some CSS details
[optimize] update Upstream packages

.npmignore

@@ -1,3 +1,4 @@
 docs/
+preview/
 .husky/
 .github/

ReadMe.md

@@ -19,7 +19,7 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 />
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/[email protected].1/font/bootstrap-icons.css"
+    href="https://cdn.jsdelivr.net/npm/[email protected].3/font/bootstrap-icons.css"
 />
 <link
     rel="stylesheet"
@@ -39,23 +39,24 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 4. [Avatar](source/Avatar.tsx)
 5. [Nameplate](source/Nameplate.tsx)
 6. [Type Echo](source/TypeEcho.tsx)
-7. [Select](source/Select.tsx)
-8. [Filter Input](source/FilterInput/index.tsx)
-9. [File Picker](source/FilePicker/index.tsx)
-10. [File Uploader](source/FileUploader/)
-11. [Multiple File Uploader](source/MultipleFileUploader/)
-12. [Code Block](source/CodeBlock.tsx)
-13. [Editor](source/Editor.tsx)
-14. [Editor HTML](source/EditorHTML.tsx)
-15. [Address Picker](source/AddressPicker.tsx)
-16. [Idea Info](source/IdeaInfo.tsx)
-17. [Idea Table](source/IdeaTable.tsx)
-18. [Table Spinner](source/TableSpinner.tsx)
-19. [Loading](source/Loading.tsx)
-20. [Pagination Bar](source/PaginationBar.tsx)
-21. [Idea Form](source/IdeaForm.tsx)
-22. [Idea Popover](source/IdeaPopover.tsx)
-23. [Idea Dialog](source/IdeaDialog.tsx)
+7. [Click Boundary](source/ClickBoundary.tsx)
+8. [Select](source/Select.tsx)
+9. [Filter Input](source/FilterInput/index.tsx)
+10. [File Picker](source/FilePicker/index.tsx)
+11. [File Uploader](source/FileUploader/)
+12. [Multiple File Uploader](source/MultipleFileUploader/)
+13. [Code Block](source/CodeBlock.tsx)
+14. [Editor](source/Editor.tsx)
+15. [Editor HTML](source/EditorHTML.tsx)
+16. [Address Picker](source/AddressPicker.tsx)
+17. [Idea Info](source/IdeaInfo.tsx)
+18. [Idea Table](source/IdeaTable.tsx)
+19. [Table Spinner](source/TableSpinner.tsx)
+20. [Loading](source/Loading.tsx)
+21. [Pagination Bar](source/PaginationBar.tsx)
+22. [Idea Form](source/IdeaForm.tsx)
+23. [Idea Popover](source/IdeaPopover.tsx)
+24. [Idea Dialog](source/IdeaDialog.tsx)
 
 ## Utilities
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "0.23.1",
+    "version": "0.24.0",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
@@ -34,21 +34,21 @@
         "react-dom": "^17.0.2",
         "react-editor-js": "^2.0.6",
         "react-element-to-jsx-string": "^15.0.0",
-        "web-utility": "^3.6.5"
+        "web-utility": "^3.7.3"
     },
     "devDependencies": {
         "@types/lodash": "^4.14.182",
         "@types/prismjs": "^1.26.0",
         "@types/react-dom": "^17.0.17",
         "husky": "^8.0.1",
-        "less": "^4.1.2",
-        "lint-staged": "^12.4.1",
+        "less": "^4.1.3",
+        "lint-staged": "^13.0.1",
         "microbundle": "^0.14.2",
         "open-cli": "^7.0.1",
-        "prettier": "^2.6.2",
-        "typedoc": "^0.22.15",
+        "prettier": "^2.7.0",
+        "typedoc": "^0.22.17",
         "typedoc-plugin-mdn-links": "^1.0.6",
-        "typescript": "~4.3.5"
+        "typescript": "~4.7.3"
     },
     "prettier": {
         "singleQuote": true,

source/ClickBoundary.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren, PureComponent, createRef } from 'react';
+
+export type ClickBoundaryProps = PropsWithChildren<{
+    className?: string;
+    onInnerClick?: (event: MouseEvent) => any;
+    onOuterClick?: (event: MouseEvent) => any;
+}>;
+
+export class ClickBoundary extends PureComponent<ClickBoundaryProps> {
+    root = createRef<HTMLDivElement>();
+
+    switchClick = (event: MouseEvent) => {
+        const { onInnerClick, onOuterClick } = this.props;
+
+        if (this.root.current?.contains(event.target as Node))
+            onInnerClick?.(event);
+        else onOuterClick?.(event);
+    };
+
+    componentDidMount() {
+        window.addEventListener('click', this.switchClick, true);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('click', this.switchClick, true);
+    }
+
+    render() {
+        const { className, children } = this.props;
+
+        return (
+            <div className={className} ref={this.root}>
+                {children}
+            </div>
+        );
+    }
+}

source/Loading.tsx

@@ -3,10 +3,10 @@ import { Spinner } from 'react-bootstrap';
 
 export type LoadingProps = PropsWithChildren<{}>;
 
-export const Loading: FC<LoadingProps> = ({ children }) => (
+export const Loading: FC<LoadingProps> = ({ children = 'Loading...' }) => (
     <div className="fixed-top h-100 w-100 d-flex justify-content-center align-items-center opacity-25 bg-black">
         <Spinner animation="border" variant="success" />
-        <span className="ml-3 text-white"> {children || '加载中...'} </span>
+        <span className="ml-3 text-white">{children}</span>
     </div>
 );
 

source/Select.tsx

@@ -5,30 +5,37 @@ import React, {
     ReactElement,
     isValidElement,
     PropsWithChildren,
-    FC
+    FC,
+    CSSProperties
 } from 'react';
 import { Dropdown, DropdownButtonProps } from 'react-bootstrap';
 
 export type OptionProps = PropsWithChildren<{
+    className?: string;
+    style?: CSSProperties;
     value?: string;
 }>;
 
-export const Option: FC<OptionProps> = ({ value, children }) => (
-    <Dropdown.Item data-value={value}>{children}</Dropdown.Item>
+export const Option: FC<OptionProps> = ({ value, children, ...props }) => (
+    <Dropdown.Item {...props} data-value={value}>
+        {children}
+    </Dropdown.Item>
 );
 
 Option.displayName = 'Option';
 
 export type SelectProps = PropsWithChildren<
     Pick<DropdownButtonProps, 'variant' | 'menuVariant'> & {
         className?: string;
+        style?: CSSProperties;
         value?: string;
         onChange?: (value: string) => any;
     }
 >;
 
 export const Select: FC<SelectProps> = ({
     className,
+    style,
     variant,
     menuVariant,
     children,
@@ -64,7 +71,7 @@ export const Select: FC<SelectProps> = ({
                     !variant && 'bg-white text-dark',
                     className
                 )}
-                variant={variant}
+                {...{ style, variant }}
             >
                 <div>{current?.props.children}</div>
             </Dropdown.Toggle>

source/index.ts

@@ -5,6 +5,7 @@ export * from './Avatar';
 export * from './Nameplate';
 export * from './TableSpinner';
 export * from './TypeEcho';
+export * from './ClickBoundary';
 export * from './Select';
 export * from './FilterInput';
 export * from './FilePicker';