react-asc 23.3.2 → 23.4.0

package/components/Button/ButtonContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { COLOR } from '../component.enums';
+export interface IButtonContext {
+    color: COLOR;
+}
+export declare const ButtonContext: import("react").Context<IButtonContext>;
+export declare const useButtonContext: () => IButtonContext;

package/components/Button/index.d.ts

@@ -1 +1,2 @@
 export * from './Button';
+export * from './ButtonContext';

package/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const ButtonGroup: (props: React.ComponentProps<'div'>) => JSX.Element;
+import { COLOR } from '../component.enums';
+export interface IButtonGroupProps extends React.ComponentProps<'div'> {
+    color?: COLOR;
+}
+export declare const ButtonGroup: (props: IButtonGroupProps) => JSX.Element;

package/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, Fragment, Component, createRef, cloneElement, createContext, useContext } from 'react';
+import React, { useRef, useEffect, useState, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
 import { createPortal, render, unmountComponentAtNode } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
@@ -291,7 +291,7 @@ function useMobileDetect() {
     const windowSize = useWindowSize();
     const checkIsMobile = (height, width) => {
         if (height > 0 && width > 0) {
-            setIsMobile(!(width >= 1024));
+            setIsMobile(!(width >= 640));
         }
     };
     useEffect(() => {
@@ -527,22 +527,29 @@ var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\n
 var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
 styleInject(css_248z$O);
 
+const ButtonContext = createContext({
+    color: COLOR.primary
+});
+const useButtonContext = () => useContext(ButtonContext);
+
 const Button = (props) => {
     const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
+    const buttonContext = useButtonContext();
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$O.button);
+        const buttonColor = buttonContext.color || color;
         if (variant !== 'outline' && variant !== 'text') {
             cssClasses.push(styles$O.btnContained);
-            cssClasses.push(styles$O[color]);
+            cssClasses.push(styles$O[buttonColor]);
         }
         if (variant === 'outline') {
             cssClasses.push(styles$O.btnOutline);
-            cssClasses.push(styles$O[color]);
+            cssClasses.push(styles$O[buttonColor]);
         }
         if (variant === 'text') {
             cssClasses.push(styles$O.btnText);
-            cssClasses.push(styles$O[color]);
+            cssClasses.push(styles$O[buttonColor]);
         }
         if (isRounded && variant !== 'text') {
             cssClasses.push(`rounded-pill`);
@@ -569,14 +576,15 @@ var styles$N = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
 styleInject(css_248z$N);
 
 const ButtonGroup = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$N.buttonGroup);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
+    return (React.createElement(ButtonContext.Provider, { value: { color: color || COLOR.primary } },
+        React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
 };
 
 var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  list-style: none;\n  margin: 0;\n}";
@@ -1513,7 +1521,7 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
+var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n  left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n  right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
 var styles$u = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$u);
 
@@ -2440,7 +2448,7 @@ var styles$5 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primar
 styleInject(css_248z$5);
 
 const TabIndicator = (props) => {
-    const { color = COLOR.accent, width, amount, index } = props;
+    const { color = COLOR.primary, width, amount, index } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$5.tabIndicator);
@@ -2458,7 +2466,7 @@ var styles$4 = {"tabs":"Tabs-module_tabs__YyRTZ"};
 styleInject(css_248z$4);
 
 const Tabs = (props) => {
-    const { children, className, fixed, indicatorColor, onChange, value } = props;
+    const { children, className, fixed, color, indicatorColor, onChange, value } = props;
     const [selectedValue, setSelectedValue] = useState(value);
     const [selectedIndex, setSelectedIndex] = useState();
     useEffect(() => {
@@ -2487,7 +2495,7 @@ const Tabs = (props) => {
             onClick: (e) => handleClickTab(e.event, e.value, index),
         });
     };
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(ButtonContext.Provider, { value: { color: color || COLOR.light } },
         React.createElement("div", { className: getCssClasses() },
             children && React.Children.toArray(children).map((child, index) => renderTabs(child, index)),
             children &&
@@ -2751,4 +2759,4 @@ const TreeItem = (props) => {
         children && _isExpanded ? React.createElement("ul", null, children) : null));
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };

package/index.js

@@ -299,7 +299,7 @@ function useMobileDetect() {
     const windowSize = useWindowSize();
     const checkIsMobile = (height, width) => {
         if (height > 0 && width > 0) {
-            setIsMobile(!(width >= 1024));
+            setIsMobile(!(width >= 640));
         }
     };
     React.useEffect(() => {
@@ -535,22 +535,29 @@ var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\n
 var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
 styleInject(css_248z$O);
 
+const ButtonContext = React.createContext({
+    color: exports.COLOR.primary
+});
+const useButtonContext = () => React.useContext(ButtonContext);
+
 const Button = (props) => {
     const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
+    const buttonContext = useButtonContext();
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$O.button);
+        const buttonColor = buttonContext.color || color;
         if (variant !== 'outline' && variant !== 'text') {
             cssClasses.push(styles$O.btnContained);
-            cssClasses.push(styles$O[color]);
+            cssClasses.push(styles$O[buttonColor]);
         }
         if (variant === 'outline') {
             cssClasses.push(styles$O.btnOutline);
-            cssClasses.push(styles$O[color]);
+            cssClasses.push(styles$O[buttonColor]);
         }
         if (variant === 'text') {
             cssClasses.push(styles$O.btnText);
-            cssClasses.push(styles$O[color]);
+            cssClasses.push(styles$O[buttonColor]);
         }
         if (isRounded && variant !== 'text') {
             cssClasses.push(`rounded-pill`);
@@ -577,14 +584,15 @@ var styles$N = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
 styleInject(css_248z$N);
 
 const ButtonGroup = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$N.buttonGroup);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
+    return (React__default["default"].createElement(ButtonContext.Provider, { value: { color: color || exports.COLOR.primary } },
+        React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
 };
 
 var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  list-style: none;\n  margin: 0;\n}";
@@ -1521,7 +1529,7 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
+var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n  left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n  right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
 var styles$u = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$u);
 
@@ -2448,7 +2456,7 @@ var styles$5 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primar
 styleInject(css_248z$5);
 
 const TabIndicator = (props) => {
-    const { color = exports.COLOR.accent, width, amount, index } = props;
+    const { color = exports.COLOR.primary, width, amount, index } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$5.tabIndicator);
@@ -2466,7 +2474,7 @@ var styles$4 = {"tabs":"Tabs-module_tabs__YyRTZ"};
 styleInject(css_248z$4);
 
 const Tabs = (props) => {
-    const { children, className, fixed, indicatorColor, onChange, value } = props;
+    const { children, className, fixed, color, indicatorColor, onChange, value } = props;
     const [selectedValue, setSelectedValue] = React.useState(value);
     const [selectedIndex, setSelectedIndex] = React.useState();
     React.useEffect(() => {
@@ -2495,7 +2503,7 @@ const Tabs = (props) => {
             onClick: (e) => handleClickTab(e.event, e.value, index),
         });
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(ButtonContext.Provider, { value: { color: color || exports.COLOR.light } },
         React__default["default"].createElement("div", { className: getCssClasses() },
             children && React__default["default"].Children.toArray(children).map((child, index) => renderTabs(child, index)),
             children &&
@@ -2768,6 +2776,7 @@ exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Button = Button;
+exports.ButtonContext = ButtonContext;
 exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.CardBody = CardBody;
@@ -2869,6 +2878,7 @@ exports.YearSelect = YearSelect;
 exports.loadingIndicatorService = loadingIndicatorService;
 exports.modalService = modalService;
 exports.snackbarService = snackbarService;
+exports.useButtonContext = useButtonContext;
 exports.useConstructor = useConstructor;
 exports.useCssClasses = useCssClasses;
 exports.useDebounce = useDebounce;

package/package.json

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