react-asc 21.0.2 → 21.0.6

package/components/AutoComplete/AutoComplete.d.ts

@@ -11,7 +11,6 @@ export interface IAutoCompleteProps {
     placeholder?: string;
     readOnly?: boolean;
     debounce?: number;
-    showNoEntry?: boolean;
     showClearButton?: boolean;
     onSelect?: (val: ISelectOption) => void;
     onChange?: (val: string | undefined) => void;

package/components/TreeView/TreeItem.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export interface ITreeItemProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
-    nodeId: string;
-    label: string;
+    nodeId?: string;
+    label?: string;
     isExpanded?: boolean;
     isSelected?: boolean;
     isSelectable?: boolean;

package/index.es.js

@@ -398,11 +398,11 @@ styleInject(css_248z$Q);
 // multiple
 // custom template render items
 const AutoComplete = (props) => {
-    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showNoEntry = true, showClearButton, onChange, onSelect, value } = props;
+    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showClearButton, onChange, onSelect, value } = props;
     const [model, setModel] = useState('');
     const [searchText, setSearchText] = useState('');
     const [isShow, setIsShow] = useState(false);
-    const [optionsTemp, setOptionsTemp] = useState([]);
+    const [_options, setOptions] = useState([]);
     const selectConainter = useRef(null);
     useEffect(() => {
         if (value !== model) {
@@ -411,17 +411,7 @@ const AutoComplete = (props) => {
         }
     }, [value]);
     useEffect(() => {
-        if (options && options.length > 0) {
-            const optionsOrigin = JSON.parse(JSON.stringify(options));
-            const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
-            const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
-            if (optionsFiltered.length === 0 && showNoEntry) {
-                setOptionsTemp([{ value: '', label: '- no entry found -' }]);
-            }
-            else {
-                setOptionsTemp(optionsFiltered);
-            }
-        }
+        setOptions(options);
     }, [options]);
     useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
     useEffect(() => {
@@ -478,7 +468,7 @@ const AutoComplete = (props) => {
         isShow &&
             React.createElement(React.Fragment, null,
                 React.createElement("div", { className: styles$Q.selectMenu },
-                    React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
+                    React.createElement(List, null, _options && _options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
                         React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
                 React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
 };
@@ -2578,7 +2568,7 @@ const TimeSelect = (props) => {
                 React.createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
 };
 
-var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
+var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
 var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
 styleInject(css_248z$1);
 
@@ -2625,9 +2615,9 @@ const TreeItem = (props) => {
     };
     return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React.createElement("div", { className: "d-flex align-items-center" },
-            children &&
+            children && nodeId &&
                 React.createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
-            isSelectable &&
+            isSelectable && nodeId &&
                 React.createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
             label),
         children && _isExpanded ? React.createElement("ul", null, children) : null));

package/index.js

@@ -406,11 +406,11 @@ styleInject(css_248z$Q);
 // multiple
 // custom template render items
 const AutoComplete = (props) => {
-    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showNoEntry = true, showClearButton, onChange, onSelect, value } = props;
+    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showClearButton, onChange, onSelect, value } = props;
     const [model, setModel] = React.useState('');
     const [searchText, setSearchText] = React.useState('');
     const [isShow, setIsShow] = React.useState(false);
-    const [optionsTemp, setOptionsTemp] = React.useState([]);
+    const [_options, setOptions] = React.useState([]);
     const selectConainter = React.useRef(null);
     React.useEffect(() => {
         if (value !== model) {
@@ -419,17 +419,7 @@ const AutoComplete = (props) => {
         }
     }, [value]);
     React.useEffect(() => {
-        if (options && options.length > 0) {
-            const optionsOrigin = JSON.parse(JSON.stringify(options));
-            const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
-            const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
-            if (optionsFiltered.length === 0 && showNoEntry) {
-                setOptionsTemp([{ value: '', label: '- no entry found -' }]);
-            }
-            else {
-                setOptionsTemp(optionsFiltered);
-            }
-        }
+        setOptions(options);
     }, [options]);
     useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
     React.useEffect(() => {
@@ -486,7 +476,7 @@ const AutoComplete = (props) => {
         isShow &&
             React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement("div", { className: styles$Q.selectMenu },
-                    React__default["default"].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
+                    React__default["default"].createElement(List, null, _options && _options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
                         React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
                 React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
 };
@@ -2586,7 +2576,7 @@ const TimeSelect = (props) => {
                 React__default["default"].createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) }))));
 };
 
-var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
+var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
 var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
 styleInject(css_248z$1);
 
@@ -2633,9 +2623,9 @@ const TreeItem = (props) => {
     };
     return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React__default["default"].createElement("div", { className: "d-flex align-items-center" },
-            children &&
+            children && nodeId &&
                 React__default["default"].createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React__default["default"].createElement(ChevronRightSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null) }),
-            isSelectable &&
+            isSelectable && nodeId &&
                 React__default["default"].createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
             label),
         children && _isExpanded ? React__default["default"].createElement("ul", null, children) : null));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "21.0.2",
+	"version": "21.0.6",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/react-asc.scss

@@ -1,3 +1,17 @@
+:root {
+	--breakpoint-xs: 0;
+	--breakpoint-sm: 576px;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 992px;
+	--breakpoint-xl: 1200px;
+	--breakpoint-xxl: 1400px;
+}
+
+:root {
+	--buttonMinWidth: 62px;
+	--buttonPadding: 11px 15px;
+}
+
 :root {
 	--primary-light: #6573c3;
 	--primary: #3f51b5;
@@ -35,121 +49,182 @@
 	--bodyBg: white;
 	--bodyColor: #212529;
 
-	--borderRadius: 5px;
+	--highlight: rgba(204, 216, 224, 0.2); // ???
+
 	--shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-		0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+	0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 
-	--buttonMinWidth: 62px;
-	--buttonPadding: 11px 15px;
+	--muted: #6c757d !important;
+}
 
+:root {
 	--fontFamily: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
 		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 	--fontSize: 16px;
 	--fontWeight: 400;
 
-	--highlight: rgba(204, 216, 224, 0.2); // ???
+	--fontLineHeight: 1.5;
+}
 
-	--breakpointMd: 768px;
+:root {
+	.ml-0 {
+		margin-left: var(--0);
+	}
 
-	--bodyLineHeight: 1.5;
+	.ml-1 {
+		margin-left: var(--1);
+	}
 
-	--breakpoint-xs: 0;
-	--breakpoint-sm: 576px;
-	--breakpoint-md: 768px;
-	--breakpoint-lg: 992px;
-	--breakpoint-xl: 1200px;
-	--breakpoint-xxl: 1400px;
-}
+	.ml-2 {
+		margin-left: var(--2);
+	}
 
-.input-group-append {
-	.btn {
-		min-width: auto;
+	.ml-3 {
+		margin-left: var(--3);
+	}
 
-		.svg-icon {
-			margin-left: 0;
-			margin-right: 0;
-		}
+	.ml-auto {
+		margin-left: var(--auto);
 	}
-}
 
-.text-muted {
-	color: #6c757d !important;
-}
+	.mr-0 {
+		margin-right: var(--0);
+	}
 
-.ml-0 {
-	margin-left: 0px !important;
-}
+	.mr-1 {
+		margin-right: var(--1);
+	}
 
-.ml-1 {
-	margin-left: 10px !important;
-}
+	.mr-2 {
+		margin-right: var(--2);
+	}
 
-.ml-2 {
-	margin-left: 20px !important;
-}
+	.mr-3 {
+		margin-right: var(--3);
+	}
 
-.ml-3 {
-	margin-left: 30px !important;
-}
+	.mr-auto {
+		margin-right: var(--auto);
+	}
 
-.ml-auto {
-	margin-left: auto !important;
-}
+	.mt-0 {
+		margin-top: var(--0);
+	}
 
-.mr-0 {
-	margin-right: 0px !important;
-}
+	.mt-1 {
+		margin-top: var(--1);
+	}
 
-.mr-1 {
-	margin-right: 10px !important;
-}
+	.mt-2 {
+		margin-top: var(--2);
+	}
 
-.mr-2 {
-	margin-right: 20px !important;
-}
+	.mt-3 {
+		margin-top: var(--3);
+	}
 
-.mr-3 {
-	margin-right: 30px !important;
-}
+	.mt-4 {
+		margin-top: var(--4);
+	}
 
-.mr-auto {
-	margin-right: auto !important;
-}
+	.mb-0 {
+		margin-bottom: var(--0);
+	}
 
-.mt-0 {
-	margin-top: 0px !important;
-}
+	.mb-1 {
+		margin-bottom: var(--1);
+	}
 
-.mt-1 {
-	margin-top: 10px !important;
-}
+	.mb-2 {
+		margin-bottom: var(--2);
+	}
 
-.mt-2 {
-	margin-top: 20px !important;
+	.mb-3 {
+		margin-bottom: var(--3);
+	}
 }
 
-.mt-3 {
-	margin-top: 30px !important;
-}
+:root {
+	.pt-1 {
+		padding-top: var(--1);
+	}
 
-.mt-4 {
-	margin-top: 40px !important;
-}
+	.pt-2 {
+		padding-top: var(--2);
+	}
+
+	.pt-3 {
+		padding-top: var(--3);
+	}
+
+	.pb-1 {
+		padding-bottom: var(--1);
+	}
+
+	.pb-2 {
+		padding-bottom: var(--2);
+	}
+
+	.pb-3 {
+		padding-bottom: var(--3);
+	}
+
+	.pb-4 {
+		padding-bottom: var(--4);
+	}
+
+	.p-3 {
+		padding: var(--3);
+	}
 
-.mb-0 {
-	margin-bottom: 0px !important;
+	.p-1 {
+		padding: var(--1);
+	}
+
+	.p-2 {
+		padding: var(--2);
+	}
+
+	.p-3 {
+		padding: var(--3);
+	}
+
+	.p-4 {
+		padding: var(--3);
+	}
+
+	.pt-0 {
+		padding-top: var(--0);
+	}
+
+	.pb-0 {
+		padding-bottom: var(--0);
+	}
 }
 
-.mb-1 {
-	margin-bottom: 10px !important;
+:root {
+	--borderRadius: 5px;
+	--0: 0px !important;
+	--1: 15px !important;
+	--2: 25px !important;
+	--3: 35px !important;
+	--4: 45px !important;
+	--auto: auto !important;
 }
 
-.mb-2 {
-	margin-bottom: 20px !important;
+.input-group-append {
+	.btn {
+		min-width: auto;
+
+		.svg-icon {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
 }
 
-.mb-3 {
-	margin-bottom: 30px !important;
+.text-muted {
+	color: var(--muted);
 }
 
 .d-flex {
@@ -171,12 +246,15 @@
 .flex-row {
 	flex-direction: row;
 }
+
 .flex-row-reverse {
 	flex-direction: row-reverse;
 }
+
 .flex-column {
 	flex-direction: column;
 }
+
 .flex-column-reverse {
 	flex-direction: column-reverse;
 }
@@ -189,60 +267,7 @@
 	height: 100%;
 }
 
-.pt-1 {
-	padding-top: 10px !important;
-}
-
-.pt-2 {
-	padding-top: 20px !important;
-}
-
-.pt-3 {
-	padding-top: 30px !important;
-}
-
-.pb-1 {
-	padding-bottom: 10px !important;
-}
-
-.pb-2 {
-	padding-bottom: 20px !important;
-}
-
-.pb-3 {
-	padding-bottom: 30px !important;
-}
-
-.pb-4 {
-	padding-bottom: 40px !important;
-}
-
-.p-3 {
-	padding: 1rem !important;
-}
-
-.p-1 {
-	padding: 10px !important;
-}
 
-.p-2 {
-	padding: 20px !important;
-}
-
-.p-3 {
-	padding: 30px !important;
-}
-.p-4 {
-	padding: 40px !important;
-}
-
-.pt-0 {
-	padding-top: 0px !important;
-}
-
-.pb-0 {
-	padding-bottom: 0px !important;
-}
 
 .text-center {
 	text-align: center;

package/readme.md

@@ -1,85 +1,83 @@
 # react-asc
-handcrafted components inspired by Material Design and bundled with rollup.
 
+handcrafted components inspired by Material Design and bundled with rollup.
 
 ## showcase
-react-asc interactive showcase [link](https://react-asc.netlify.app)
 
+react-asc interactive showcase [link](https://react-asc.netlify.app)
 
 ## usage
 
 ### install package
-`npm install react-asc`
 
+`npm install react-asc`
 
 ### install modern-normalize
-`npm install modern-normalize`
 
+`npm install modern-normalize`
 
-### Include needed scss files
+### Include styles
 
 ```scss
 @import "modern-normalize";
 @import "react-asc/react-asc.scss";
 ```
 
+### Usage
 
-### Start using it
 ```js
-import React from 'react';
-import { Button } from 'react-asc';
+import React from "react";
+import { Button } from "react-asc";
 
 const MyApp = () => {
-	return (
-		<Button>some button</Button>
-	)
-}
+	return <Button>some button</Button>;
+};
 ```
 
-
-## Included
-
-- Alert (beta)
-- AppBar
-- AutoComplete (beta)
-- Backdrop
-- Badge
-- Button
-- ButtonGroup
-- Breadcrumb
-- Card
-- Checkbox
-- Chip
-- ConditionalWrapper
-- DateSelect
-- Drawer
-- ExpansionPanel
-- FileInput
-- FloatingActionButton
-- Form (beta)
-- Grid
-- Icon
-- IconButton
-- Link
-- List
-- LoadingIndicator
-- Modal + ModalService
-- Menu
-- NumberSelect
-- Select
-- Snackbar + SnackbarService
-- SpeedDial
-- Stepper (beta)
-- Table (beta)
-- Tabs
-- TimeSelect
-- Textarea
-- Tooltip
-- TreeView (beta)
-- Typography
-
-
-## Credit 
+## Included Components
+
+-   Alert (beta)
+-   AppBar
+-   AutoComplete (beta)
+-   Backdrop
+-   Badge
+-   Breadcrumb
+-   Button
+-   ButtonGroup
+-   Card
+-   Checkbox
+-   Chip
+-   ConditionalWrapper
+-   DateSelect
+-   Drawer
+-   ExpansionPanel
+-   FileInput
+-   FloatingActionButton
+-   Form (beta)
+-   Grid
+-   Icon
+-   IconButton
+-   Link
+-   List
+-   LoadingIndicator
+-   Menu
+-   Modal + ModalService
+-   NumberSelect
+-   Select
+-   Sidebar
+-   Snackbar + SnackbarService
+-   SpeedDial
+-   Stepper (beta)
+-   Table (beta)
+-   Tabs
+-   Textarea
+-   TimeSelect
+-   Tooltip
+-   TreeView (beta)
+-   Typography
+
+
+## Credit
 
 uses fontawesome icons as SVGs
 https://fontawesome.com/license