react-asc 21.0.1 → 21.0.5

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

@@ -411,16 +411,11 @@ 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);
-            }
+        if (options.length === 0 && showNoEntry) {
+            setOptionsTemp([{ value: '', label: '- no entry found -' }]);
+        }
+        else {
+            setOptionsTemp(options);
         }
     }, [options]);
     useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
@@ -2231,7 +2226,7 @@ const Stepper = (props) => {
             React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: 2.5rem; }\n\nh2 {\n  font-size: 2rem; }\n\nh3 {\n  font-size: 1.75rem; }\n\nh4 {\n  font-size: 1.5rem; }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
 var styles$8 = {"typography":"Typography-module_typography__sw-td"};
 styleInject(css_248z$8);
 
@@ -2578,7 +2573,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 +2620,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

@@ -419,16 +419,11 @@ 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);
-            }
+        if (options.length === 0 && showNoEntry) {
+            setOptionsTemp([{ value: '', label: '- no entry found -' }]);
+        }
+        else {
+            setOptionsTemp(options);
         }
     }, [options]);
     useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
@@ -2239,7 +2234,7 @@ const Stepper = (props) => {
             React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: 2.5rem; }\n\nh2 {\n  font-size: 2rem; }\n\nh3 {\n  font-size: 1.75rem; }\n\nh4 {\n  font-size: 1.5rem; }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
 var styles$8 = {"typography":"Typography-module_typography__sw-td"};
 styleInject(css_248z$8);
 
@@ -2586,7 +2581,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 +2628,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.1",
+	"version": "21.0.5",
 	"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);
+	}
 
-.mb-0 {
-	margin-bottom: 0px !important;
+	.p-3 {
+		padding: var(--3);
+	}
+
+	.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,59 +267,10 @@
 	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;
 }
 
 .rounded-pill {

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