funda-ui 4.5.682 → 4.5.712

package/lib/esm/Utils/hooks/useIsMobile.tsx

@@ -0,0 +1,56 @@
+/**
+ * Determine whether it is the mobile terminal of the specified breakpoint
+ * * 
+ * @usage:
+ * 
+
+const App = () => {
+
+    const isMobile = useIsMobile();
+
+    return (
+        <div>
+            {isMobile ? (
+                <p>This content is hidden on mobile devices.</p>
+            ) : (
+                <p>This content is visible on larger screens.</p>
+            )}
+        </div>
+    );
+}
+
+
+ */
+import { useEffect, useState } from 'react';
+
+
+const useIsMobile = (breakpoint: number = 768): boolean => {
+    const [isMobile, setIsMobile] = useState<boolean>(false);
+    const [isMounted, setIsMounted] = useState<boolean>(false);
+
+    useEffect(() => {
+        // Set the mounted state to true after the component has mounted
+        setIsMounted(true);
+
+        const handleResize = () => {
+            if (window) {
+                setIsMobile(window.innerWidth <= breakpoint);
+            }
+        };
+
+        // Add event listener for resize
+        window.addEventListener('resize', handleResize);
+        // Call the handler once to set the initial state
+        handleResize();
+
+        // Cleanup the event listener on component unmount
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [breakpoint]);
+
+    // Only return the isMobile state if the component is mounted
+    return isMounted ? isMobile : false;
+};
+
+export default useIsMobile;

package/package.json

@@ -1,45 +1,42 @@
 {
-  "author": "UIUX Lab",
-  "email": "uiuxlab@gmail.com",
-  "name": "funda-ui",
-  "version": "4.5.682",
-  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/xizon/funda-ui.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "bootstrap",
-    "react-bootstrap",
-    "react-components",
-    "components",
-    "components-react",
-    "react-bootstrap-components",
-    "react",
-    "funda-ui",
-    "fundaui",
-    "uikit",
-    "ui-kit",
-    "ui-components"
-  ],
-  "bugs": {
-    "url": "https://github.com/xizon/funda-ui/issues"
-  },
-  "homepage": "https://github.com/xizon/funda-ui#readme",
-  "main": "all.js",
-  "license": "MIT",
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "types": "all.d.ts",
-  "publishConfig": {
-    "directory": "lib"
-  },
-  "directories": {
-    "lib": "lib"
-  }
-}
+    "author": "UIUX Lab",
+    "email": "uiuxlab@gmail.com",
+    "name": "funda-ui",
+    "version": "4.5.712",
+    "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/xizon/funda-ui.git"
+    },
+    "scripts": {
+        "build:lib": "node scripts/build-lib.js",
+        "build:publish": "node scripts/build-publish.js"
+    },
+    "keywords": [
+        "bootstrap",
+        "react-bootstrap",
+        "react-components",
+        "components",
+        "components-react",
+        "react-bootstrap-components",
+        "react",
+        "funda-ui",
+        "fundaui",
+        "uikit",
+        "ui-kit",
+        "ui-components"
+    ],
+    "workspaces": [
+        "packages/*"
+    ],
+    "devDependencies": {
+        "lerna": "^6.5.1",
+        "nx": "15.7.2"
+    },
+    "bugs": {
+        "url": "https://github.com/xizon/funda-ui/issues"
+    },
+    "homepage": "https://github.com/xizon/funda-ui#readme",
+    "main": "none",
+    "license": "MIT"
+}

package/{DragDropList → publish/DragDropList}/index.d.ts

@@ -10,6 +10,7 @@ export interface ListItem {
     children?: ListItem[];
     disabled?: boolean;
     appendControl?: React.ReactNode;
+    [key: string]: any;
 }
 export interface DragDropListProps {
     wrapperClassName?: string;

package/{DragDropList → publish/DragDropList}/index.js

@@ -880,8 +880,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 ))}
             </ul>
         );
-        };
-        
         
          */
 
@@ -1274,11 +1272,11 @@ var DragDropList = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef
 
     // Handle object
     var clonedObj = {};
-    for (var key in obj) {
-      if (key === 'appendControl') {
-        clonedObj[key] = obj[key];
+    for (var _key in obj) {
+      if (_key === 'appendControl') {
+        clonedObj[_key] = obj[_key];
       } else {
-        clonedObj[key] = deepCloneWithReactNode(obj[key]);
+        clonedObj[_key] = deepCloneWithReactNode(obj[_key]);
       }
     }
     return clonedObj;

package/publish/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 UIUX Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAM AGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/{MultipleSelect → publish/MultipleSelect}/index.d.ts

@@ -10,6 +10,7 @@ export interface OptionConfig {
     children?: OptionConfig[];
     disabled?: boolean;
     extendedContent?: React.ReactNode;
+    [key: string]: any;
 }
 export declare type MultipleSelectProps = {
     contentRef?: React.ForwardedRef<any>;

package/{MultipleSelect → publish/MultipleSelect}/index.js

@@ -911,8 +911,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                           ))}
                       </ul>
                   );
-                  };
-                  
                   
                    */
 
@@ -1110,7 +1108,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       /******/ // The require function
       /******/
-      function __nested_webpack_require_54674__(moduleId) {
+      function __nested_webpack_require_54634__(moduleId) {
         /******/ // Check if module is in cache
         /******/var cachedModule = __webpack_module_cache__[moduleId];
         /******/
@@ -1129,7 +1127,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         /******/
         /******/ // Execute the module function
         /******/
-        __webpack_modules__[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_54674__);
+        __webpack_modules__[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_54634__);
         /******/
         /******/ // Flag the module as loaded
         /******/
@@ -1146,14 +1144,14 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       (function () {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/__nested_webpack_require_54674__.n = function (module) {
+        /******/__nested_webpack_require_54634__.n = function (module) {
           /******/var getter = module && module.__esModule ? /******/function () {
             return module['default'];
           } : /******/function () {
             return module;
           };
           /******/
-          __nested_webpack_require_54674__.d(getter, {
+          __nested_webpack_require_54634__.d(getter, {
             a: getter
           });
           /******/
@@ -1167,9 +1165,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       (function () {
         /******/ // define getter functions for harmony exports
-        /******/__nested_webpack_require_54674__.d = function (exports, definition) {
+        /******/__nested_webpack_require_54634__.d = function (exports, definition) {
           /******/for (var key in definition) {
-            /******/if (__nested_webpack_require_54674__.o(definition, key) && !__nested_webpack_require_54674__.o(exports, key)) {
+            /******/if (__nested_webpack_require_54634__.o(definition, key) && !__nested_webpack_require_54634__.o(exports, key)) {
               /******/Object.defineProperty(exports, key, {
                 enumerable: true,
                 get: definition[key]
@@ -1186,7 +1184,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/ /* webpack/runtime/hasOwnProperty shorthand */
       /******/
       (function () {
-        /******/__nested_webpack_require_54674__.o = function (obj, prop) {
+        /******/__nested_webpack_require_54634__.o = function (obj, prop) {
           return Object.prototype.hasOwnProperty.call(obj, prop);
         };
         /******/
@@ -1196,7 +1194,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       (function () {
         /******/ // define __esModule on exports
-        /******/__nested_webpack_require_54674__.r = function (exports) {
+        /******/__nested_webpack_require_54634__.r = function (exports) {
           /******/if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
             /******/Object.defineProperty(exports, Symbol.toStringTag, {
               value: 'Module'
@@ -1215,7 +1213,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/ /* webpack/runtime/node module decorator */
       /******/
       (function () {
-        /******/__nested_webpack_require_54674__.nmd = function (module) {
+        /******/__nested_webpack_require_54634__.nmd = function (module) {
           /******/module.paths = [];
           /******/
           if (!module.children) module.children = [];
@@ -1232,30 +1230,30 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       (function () {
         "use strict";
 
-        __nested_webpack_require_54674__.r(__webpack_exports__);
+        __nested_webpack_require_54634__.r(__webpack_exports__);
         /* harmony export */
-        __nested_webpack_require_54674__.d(__webpack_exports__, {
+        __nested_webpack_require_54634__.d(__webpack_exports__, {
           /* harmony export */"default": function _default() {
             return __WEBPACK_DEFAULT_EXPORT__;
           }
           /* harmony export */
         });
         /* harmony import */
-        var react__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_54674__(787);
+        var react__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_54634__(787);
         /* harmony import */
-        var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_54674__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+        var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_54634__.n(react__WEBPACK_IMPORTED_MODULE_0__);
         /* harmony import */
-        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_54674__(438);
+        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_54634__(438);
         /* harmony import */
-        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_54674__.n(funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__);
+        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_54634__.n(funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__);
         /* harmony import */
-        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__ = __nested_webpack_require_54674__(188);
+        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__ = __nested_webpack_require_54634__(188);
         /* harmony import */
-        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__nested_webpack_require_54674__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__);
+        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__nested_webpack_require_54634__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__);
         /* harmony import */
-        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__ = __nested_webpack_require_54674__(759);
+        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__ = __nested_webpack_require_54634__(759);
         /* harmony import */
-        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__nested_webpack_require_54674__.n(funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__);
+        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__nested_webpack_require_54634__.n(funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__);
         var _excluded = ["wrapperClassName", "prefix", "data", "draggable", "handleHide", "handleIcon", "handlePos", "dragMode", "editable", "itemStyle", "hierarchical", "indentation", "doubleIndent", "alternateCollapse", "arrow", "onUpdate"];
         function _extends() {
           _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1502,11 +1500,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             // Handle object
             var clonedObj = {};
-            for (var key in obj) {
-              if (key === 'appendControl') {
-                clonedObj[key] = obj[key];
+            for (var _key in obj) {
+              if (_key === 'appendControl') {
+                clonedObj[_key] = obj[_key];
               } else {
-                clonedObj[key] = deepCloneWithReactNode(obj[key]);
+                clonedObj[_key] = deepCloneWithReactNode(obj[_key]);
               }
             }
             return clonedObj;

package/publish/README.md

@@ -0,0 +1,126 @@
+# Funda UI
+
+React components using pure Bootstrap 5+ which has undergone complex business testing and is easy to integrate with any API. You can load Bootstrap css libraries separately in your project.
+
+All components have undergone complex business verification and provide multiple examples.
+
+
+---
+
+- [Documentation](https://uiux.cc/funda-ui-doc)
+
+---
+
+
+
+## Key Features
+
+1. Simplify the assignment method of diversified data.
+2. Components are compatible with `gRPC`, `REST APIs`, `GraphQL` self-packaging, uniformly use [Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) and their methods to introduce interfaces
+3. Enhanced user interaction, flexible use in asynchronous and synchronous states
+4. Introduce appropriate component `.css` files as needed, only for some components with special needs. Most of them can directly use Bootstrap's official style sheet.
+5. Do not embed css-in-js, directly use external CSS styles to completely change the component style.
+
+
+
+## Components List
+
+Here is a table of the components and their status.
+
+
+| WEB ELEMENTS | FORMS | INTERACTION | NAVIGATION | LAYOUTS |
+| --- | --- | --- | --- | --- |
+| [Accordion ✅](packages/Accordion/README.md) | [Input ✅](packages/Input/README.md) | [Infinite Scroll ❏](packages/InfiniteScroll/README.md) |[Multilevel Dropdown Menu ✅](packages/MultilevelDropdownMenu/README.md)  | [MasonryLayout ✅](packages/MasonryLayout/README.md) |
+| [Accordion Slider ❏](packages/AccordionSlider/README.md) | [Number Input ✅](packages/NumberInput/README.md) | [Image Perspective Hover ❏](packages/ImagePerspectiveHover/README.md) | [Dropdown Menu ✅](packages/DropdownMenu/README.md)  | [RootPortal ✅](packages/RootPortal/README.md)  |
+| [Back To Top ✅](packages/BackToTop/README.md) | [Merge Input ❏](packages/MergeInput/README.md) | [Mousewheel Interaction ❏](packages/MousewheelInteraction/README.md) | |   |
+| [Button ❏](packages/Button/README.md) | [Tag Input ✅](packages/TagInput/README.md) | [Parallax ❏](packages/Parallax/README.md) |  |   |
+| [Card ❏](packages/Card/README.md) | [Textarea  ✅](packages/Textarea/README.md) | [Scroll Reveal ✅](packages/ScrollReveal/README.md) |  |   |
+| [Content Placeholder ❏](packages/ContentPlaceholder/README.md) | [NativeSelect ✅](packages/NativeSelect/README.md) | [Sticky Elements ❏](packages/StickyElements/README.md) |  |  |
+| [Counter ❏](packages/Counter/README.md) | [Cascading Select ✅](packages/CascadingSelect/README.md) | [Mode Switch ✅](packages/ModeSwitch/README.md) |  |  |
+| [Hybrid Content Slider ❏](packages/HybridContentSlider/README.md) | [Cascading Select End-to-end ✅🔥](packages/CascadingSelectE2E/README.md) | [Custom Scrollbar ✅](packages/Scrollbar/README.md) |  |  |
+| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) | [Horizontal Scroll Content ✅](packages/HorizontalScrollContent/README.md) |  |  |
+| [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) | [DragDrop List ✅🔥](packages/DragDropList/README.md)  |  |  |
+| [List Bulleted ❏](packages/ListBulleted/README.md) | [Select ✅🔥](packages/Select/README.md) |  |  |  |
+| [Modal Dialog ✅🔥](packages/ModalDialog/README.md) | [Live Search ✅](packages/LiveSearch/README.md) |  |  |  |
+| [Pagination ✅](packages/Pagination/README.md) | [Number ❏](packages/Number/README.md) |  |  |  |
+| [Table ✅🔥](packages/Table/README.md) | [SearchBar ✅](packages/SearchBar/README.md) |  |  |  |
+| [Periodical Scroll ❏](packages/PeriodicalScroll/README.md) | [Switch ✅](packages/Switch/README.md) |  |  |  |
+| [Progress Bar ❏](packages/ProgressBar/README.md) | [Dynamic Fields ✅🔥](packages/DynamicFields/README.md) |  |  |  |
+| [Rating ❏](packages/Rating/README.md) | [File ✅](packages/File/README.md) |  |  |  |
+| [Seamless Scrolling Element ❏](packages/SeamlessScrollingElement/README.md) | [File Field ❏](packages/FileField/README.md) |  |  |  |
+| [Show More Less ✅](packages/ShowMoreLess/README.md) | [Range Slider ✅](packages/RangeSlider/README.md) | |  |  |
+| [Slideshow ❏](packages/Slideshow/README.md) | [Color Picker ✅](packages/ColorPicker/README.md) |  |  |  |
+| [Tabs ✅](packages/Tabs/README.md) | [MultipleCheckboxes ✅](packages/MultipleCheckboxes/README.md) |  |  |  |
+| [Timeline ❏](packages/Timeline/README.md) | [MultipleSelect ✅🔥](packages/MultipleSelect/README.md) |  |  |  |
+| [Toast ✅](packages/Toast/README.md) | [Date ✅🔥](packages/Date/README.md) |  |  |  |
+| [Tooltip ✅](packages/Tooltip/README.md) |  |  |  |  |
+| [Digital Clock ✅](packages/DigitalClock/README.md) |  |  |  |  |
+| [Tree ✅🔥](packages/Tree/README.md) |  |  |  |  |
+| [Event Calendar ✅🔥](packages/EventCalendar/README.md) |  |  |  |  |
+| [Event Calendar Timeline ✅🔥](packages/EventCalendarTimeline/README.md) |  |  |  |  |
+
+
+
+
+
+
+
+## Usage
+
+**Step 1**. You need to install it:
+
+```sh
+$ npm i funda-ui
+```
+
+**Step 2**. Using Bootstrap CSS together (recommended)
+
+```html
+<link href="./bootstrap.min.css" rel="stylesheet"/>
+```
+
+
+**Step 3**. import required components as required 
+
+> If the component does not have a CSS file, it can not be imported, or use own CSS.
+
+```js
+import Input from 'funda-ui/Input';
+import Textarea from 'funda-ui/Textarea';
+import CascadingSelect from 'funda-ui/CascadingSelect';
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+or 
+
+```js
+import { 
+    Input,
+    Textarea,
+    CascadingSelect
+} from 'funda-ui';
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+or
+
+```js
+const Input = require('funda-ui').Input;
+const Textarea = require('funda-ui').Textarea;
+const CascadingSelect = require('funda-ui').CascadingSelect;
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+
+
+
+## Licensing
+
+Licensed under the [MIT](https://opensource.org/licenses/MIT).
+

package/{Textarea → publish/Textarea}/index.d.ts

@@ -20,6 +20,7 @@ export declare type TextareaProps = {
     readOnly?: any;
     placeholder?: string;
     autoSize?: boolean;
+    autoSizeMaxHeight?: number;
     iconLeft?: React.ReactNode | string;
     iconRight?: React.ReactNode | string;
     aiPredict?: boolean;