react-asc 25.16.0 → 25.17.0

package/index.d.ts

@@ -1015,9 +1015,15 @@ declare const useOnDestroy: (callBack: () => void) => void;
 
 declare function usePrevious<T>(value: T): T | undefined;
 
-declare function useScreenSizeDetect(): {
+interface IUseScreenSizeDetect {
     screenSize: ScreenSize;
-};
+    isMobile?: boolean;
+    isTablet?: boolean;
+    isSmallScreen?: boolean;
+    isDesktop?: boolean;
+    isExtraLargeScreen?: boolean;
+}
+declare function useScreenSizeDetect(): IUseScreenSizeDetect;
 
 interface IUseWindowSize {
     width: number;
@@ -1140,4 +1146,4 @@ declare global {
     }
 }
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, type ColumnSize, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, type HtmlBaseProps, type HtmlInputProps, type IAlertProps, type IAppBarProps, type IAppBarTitleProps, type IAutoCompleteProps, type IBackdropProps, type IBadgeProps, type IBreadcrumbItemProps, type IBreadcrumbProps, type IButtonContext, type IButtonGroupProps, type IButtonProps, type ICheckboxProps, type IChipProps, type IContainerProps, type IControls, type IDatePickerProps, type IDateSelectProps, type IDaySelectProps, type IDictionary, type IDot, type IDrawerProps, type IExpansionPanelContentProps, type IExpansionPanelHeaderProps, type IExpansionPanelProps, type IFileInputProps, type IFileUnparseConfig, type IFloatingActionButtonProps, type IFormAutoCompleteOptions, type IFormControlConfig, type IFormControlType, type IFormInputError, type IFormInputEvent, type IFormInputOptions, type IFormInputProps, type IFormProps, type IFormSelectOptions, type IFormState, type IFormTextAreaOptions, type IFormValidatorType, type IHourProps, type IIconButtonProps, type IIconProps, type IListItemProps, type IListProps, type ILoadingIndicatorContainerProps, type ILoadingIndicatorService, type ILoggerService, type IMenuBodyProps, type IMenuProps, type IMilliSecondProps, type IMinuteProps, type IModalButton, type IModalOptions, type IModalProps$1 as IModalProps, type IModalService, type IMonthProps, type INumberSelectProps, type IPortalProps, type IProgressBarProps, type ISecondProps, type ISelectOption, type ISelectProps, type ISidebarItem, type ISkeletonAvatarProps, type ISkeletonFooterProps, type ISkeletonImageProps, type ISkeletonTextProps, type ISnackbarOptions, type ISnackbarProps, type ISnackbarService, type ISpeedDialActionProps, type ISpeedDialIconProps, type ISpeedDialProps, type IStepProps, type IStepperActionsProps, type IStepperProps, type ITabPanelProps, type ITabProps, type ITableCellProps, type ITableProps, type ITabsProps, type ITextareaProps, type ITimeSelectProps, type ITooltipProps, type ITreeItemProps, type ITypographyProps, type IUseWindowSize, type IWrapperProps, type IYearProps, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, type MenuPosition, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, type Nullable, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, ScreenSize, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, type TRowDirection, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useScreenSizeDetect, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, type ColumnSize, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, type HtmlBaseProps, type HtmlInputProps, type IAlertProps, type IAppBarProps, type IAppBarTitleProps, type IAutoCompleteProps, type IBackdropProps, type IBadgeProps, type IBreadcrumbItemProps, type IBreadcrumbProps, type IButtonContext, type IButtonGroupProps, type IButtonProps, type ICheckboxProps, type IChipProps, type IContainerProps, type IControls, type IDatePickerProps, type IDateSelectProps, type IDaySelectProps, type IDictionary, type IDot, type IDrawerProps, type IExpansionPanelContentProps, type IExpansionPanelHeaderProps, type IExpansionPanelProps, type IFileInputProps, type IFileUnparseConfig, type IFloatingActionButtonProps, type IFormAutoCompleteOptions, type IFormControlConfig, type IFormControlType, type IFormInputError, type IFormInputEvent, type IFormInputOptions, type IFormInputProps, type IFormProps, type IFormSelectOptions, type IFormState, type IFormTextAreaOptions, type IFormValidatorType, type IHourProps, type IIconButtonProps, type IIconProps, type IListItemProps, type IListProps, type ILoadingIndicatorContainerProps, type ILoadingIndicatorService, type ILoggerService, type IMenuBodyProps, type IMenuProps, type IMilliSecondProps, type IMinuteProps, type IModalButton, type IModalOptions, type IModalProps$1 as IModalProps, type IModalService, type IMonthProps, type INumberSelectProps, type IPortalProps, type IProgressBarProps, type ISecondProps, type ISelectOption, type ISelectProps, type ISidebarItem, type ISkeletonAvatarProps, type ISkeletonFooterProps, type ISkeletonImageProps, type ISkeletonTextProps, type ISnackbarOptions, type ISnackbarProps, type ISnackbarService, type ISpeedDialActionProps, type ISpeedDialIconProps, type ISpeedDialProps, type IStepProps, type IStepperActionsProps, type IStepperProps, type ITabPanelProps, type ITabProps, type ITableCellProps, type ITableProps, type ITabsProps, type ITextareaProps, type ITimeSelectProps, type ITooltipProps, type ITreeItemProps, type ITypographyProps, type IUseScreenSizeDetect, type IUseWindowSize, type IWrapperProps, type IYearProps, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, type MenuPosition, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, type Nullable, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, ScreenSize, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, type TRowDirection, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useScreenSizeDetect, useWindowSize };

package/index.es.js

@@ -225,8 +225,8 @@ function usePrevious(value) {
 }
 
 function useScreenSizeDetect() {
-    const [screenSize, setScreenSize] = useState(ScreenSize.md);
     const windowSize = useWindowSize();
+    const [screenSize, setScreenSize] = useState(ScreenSize.md);
     const checkScreenSize = (height, width) => {
         if (height > 0 && width > 0) {
             if (width <= 480) {
@@ -249,7 +249,14 @@ function useScreenSizeDetect() {
     useEffect(() => {
         windowSize && checkScreenSize(windowSize.height, windowSize.width);
     }, [windowSize]);
-    return { screenSize: screenSize };
+    return {
+        screenSize: screenSize,
+        isMobile: screenSize === ScreenSize.xs,
+        isTablet: screenSize === ScreenSize.sm,
+        isSmallScreen: screenSize === ScreenSize.md,
+        isDesktop: screenSize === ScreenSize.lg,
+        isExtraLargeScreen: screenSize === ScreenSize.xxl,
+    };
 }
 
 const CaretDownSolidIcon = () => (jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "caret-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
@@ -5652,17 +5659,25 @@ var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  fl
 var styles$y = {"row":"Row-module_row__bTIWp"};
 styleInject(css_248z$y);
 
-const Row = ({ children, direction = 'row', className, ...rest }) => {
+const Row = ({ children, direction, className, ...rest }) => {
     const [_direction, setDirection] = useState(direction);
     const { screenSize } = useScreenSizeDetect();
     useEffect(() => {
-        setDirection(screenSize === ScreenSize.xs ? 'column' : 'row');
-    }, [screenSize]);
+        setDirection(direction);
+    }, [direction]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$y.row);
         className && cssClasses.push(className);
-        direction && cssClasses.push(`flex-${_direction}`);
+        if (_direction) {
+            cssClasses.push(`flex-${_direction}`);
+        }
+        else if (screenSize === ScreenSize.xs || screenSize === ScreenSize.sm) {
+            cssClasses.push(`flex-column`);
+        }
+        else {
+            cssClasses.push(`flex-row`);
+        }
         return cssClasses.filter(css => css).join(' ');
     };
     return (jsx("div", { className: getCssClasses(), ...rest, children: children }));

package/index.js

@@ -227,8 +227,8 @@ function usePrevious(value) {
 }
 
 function useScreenSizeDetect() {
-    const [screenSize, setScreenSize] = React.useState(exports.ScreenSize.md);
     const windowSize = useWindowSize();
+    const [screenSize, setScreenSize] = React.useState(exports.ScreenSize.md);
     const checkScreenSize = (height, width) => {
         if (height > 0 && width > 0) {
             if (width <= 480) {
@@ -251,7 +251,14 @@ function useScreenSizeDetect() {
     React.useEffect(() => {
         windowSize && checkScreenSize(windowSize.height, windowSize.width);
     }, [windowSize]);
-    return { screenSize: screenSize };
+    return {
+        screenSize: screenSize,
+        isMobile: screenSize === exports.ScreenSize.xs,
+        isTablet: screenSize === exports.ScreenSize.sm,
+        isSmallScreen: screenSize === exports.ScreenSize.md,
+        isDesktop: screenSize === exports.ScreenSize.lg,
+        isExtraLargeScreen: screenSize === exports.ScreenSize.xxl,
+    };
 }
 
 const CaretDownSolidIcon = () => (jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "caret-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
@@ -5654,17 +5661,25 @@ var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  fl
 var styles$y = {"row":"Row-module_row__bTIWp"};
 styleInject(css_248z$y);
 
-const Row = ({ children, direction = 'row', className, ...rest }) => {
+const Row = ({ children, direction, className, ...rest }) => {
     const [_direction, setDirection] = React.useState(direction);
     const { screenSize } = useScreenSizeDetect();
     React.useEffect(() => {
-        setDirection(screenSize === exports.ScreenSize.xs ? 'column' : 'row');
-    }, [screenSize]);
+        setDirection(direction);
+    }, [direction]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$y.row);
         className && cssClasses.push(className);
-        direction && cssClasses.push(`flex-${_direction}`);
+        if (_direction) {
+            cssClasses.push(`flex-${_direction}`);
+        }
+        else if (screenSize === exports.ScreenSize.xs || screenSize === exports.ScreenSize.sm) {
+            cssClasses.push(`flex-column`);
+        }
+        else {
+            cssClasses.push(`flex-row`);
+        }
         return cssClasses.filter(css => css).join(' ');
     };
     return (jsxRuntime.jsx("div", { className: getCssClasses(), ...rest, children: children }));

package/lib/hooks/useScreenSizeDetect.d.ts

@@ -1,4 +1,10 @@
 import { ScreenSize } from '../enums';
-export declare function useScreenSizeDetect(): {
+export interface IUseScreenSizeDetect {
     screenSize: ScreenSize;
-};
+    isMobile?: boolean;
+    isTablet?: boolean;
+    isSmallScreen?: boolean;
+    isDesktop?: boolean;
+    isExtraLargeScreen?: boolean;
+}
+export declare function useScreenSizeDetect(): IUseScreenSizeDetect;

package/package.json

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