@ainias42/react-bootstrap-mobile 0.2.9 → 0.2.11

package/dist/src/Components/Dialog/DialogBackground.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 export type DialogBackgroundProps = RbmComponentProps<{
     title?: string;
+    onClose?: () => void;
 }>;
-export declare const DialogBackground: ({ children, className, style, title }: DialogBackgroundProps) => React.JSX.Element;
+export declare const DialogBackground: ({ children, className, style, title, onClose }: DialogBackgroundProps) => React.JSX.Element;

package/dist/src/Components/FormElements/ColorInput/ColorInput.d.ts

@@ -13,7 +13,8 @@ export type ColorInputProps<OnChangeData> = {
     sharedColorKey?: string;
     disabled?: boolean;
     error?: string;
+    className?: string;
 } & OptionalListener<'onChange', OnChangeData>;
-declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, error, sharedColorKey, disabled, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
+declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, error, sharedColorKey, disabled, className, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
 declare const ColorInputMemo: typeof ColorInput;
 export { ColorInputMemo as ColorInput };

package/dist/src/Components/FormElements/Select/Select.d.ts

@@ -3,17 +3,23 @@ import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { SelectHTMLAttributes } from 'react';
 import { OptionalListener } from '../../Hooks/useListener';
-export type SelectOption = {
+export type SelectOption<ValueType = string> = {
     label: string;
-    value: string;
+    value: ValueType;
     key?: string;
 };
 export type SelectProps<OnChangeData> = RbmComponentProps<Override<SelectHTMLAttributes<HTMLSelectElement>, {
     label?: string;
-    options: SelectOption[];
-    onChangeValue?: (newValue: string) => void;
     inline?: boolean;
     small?: boolean;
     error?: string;
-} & OptionalListener<'onChange', OnChangeData>>>;
-export declare const Select: <OnChangeData>({ label, options, className, style, onChangeValue, inline, small, error, ...otherProps }: SelectProps<OnChangeData>) => React.JSX.Element;
+} & ({
+    options: SelectOption[];
+    onChangeValue?: (newValue: string) => void;
+    useNumericValues?: false;
+} | {
+    options: SelectOption<number>[];
+    onChangeValue?: (newValue: number) => void;
+    useNumericValues: true;
+}) & OptionalListener<'onChange', OnChangeData>>>;
+export declare const Select: <OnChangeData>({ label, options, className, style, onChangeValue, inline, small, error, useNumericValues, ...otherProps }: SelectProps<OnChangeData>) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -42,12 +42,6 @@
     "react-hook-form": "^7.53.0"
   },
   "devDependencies": {
-    "react-hook-form": "^7.53.0",
-    "ajv": "^8.14.0",
-    "bootstrap": "^5.3.3",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.3.1",
-    "react-beautiful-dnd": "^13.1.1",
     "@babel/core": "^7.24.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-typescript": "^7.24.6",
@@ -67,7 +61,10 @@
     "@types/react-window-infinite-loader": "^1.0.9",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
+    "ajv": "^8.14.0",
     "babel-loader": "^9.1.3",
+    "bootstrap": "^5.3.3",
+    "css-layering-webpack-plugin": "^0.3.0",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -82,6 +79,10 @@
     "loader-utils": "3.2.1",
     "mini-css-extract-plugin": "^2.9.0",
     "prettier": "^3.2.5",
+    "react": ">=18.0.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dom": ">=18.3.1",
+    "react-hook-form": "^7.53.0",
     "sass": "^1.77.2",
     "sass-loader": "^14.2.1",
     "terser-webpack-plugin": "^5.3.10",

package/src/Components/Dialog/DialogBackground.tsx

@@ -2,14 +2,24 @@ import * as React from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { RbmComponentProps } from '../RbmComponentProps';
 import { Block } from '../Layout/Block';
-
 import styles from './dialogBackground.scss';
 import classNames from 'classnames';
-import {Heading} from "../Text/Heading";
-
-export type DialogBackgroundProps = RbmComponentProps<{title?: string}>;
-
-export const DialogBackground = withMemo(function DialogBackground({ children, className, style, title }: DialogBackgroundProps) {
+import { Heading } from "../Text/Heading";
+import { Flex } from "../Layout/Flex";
+import { Grow } from "../Layout/Grow";
+import { Clickable } from "../Clickable/Clickable";
+import { Icon } from "../Icon/Icon";
+import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+
+export type DialogBackgroundProps = RbmComponentProps<{ title?: string, onClose?: () => void }>;
+
+export const DialogBackground = withMemo(function DialogBackground({
+                                                                       children,
+                                                                       className,
+                                                                       style,
+                                                                       title,
+                                                                       onClose
+                                                                   }: DialogBackgroundProps) {
     // Variables
 
     // Refs
@@ -28,7 +38,9 @@ export const DialogBackground = withMemo(function DialogBackground({ children, c
 
     return (
         <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
-            {!!title && <Heading className={styles.title}>{title}</Heading>}
+            {(!!title || !!onClose) && <Flex horizontal={true} className={styles.title}>{!!title &&
+            <Grow><Heading >{title}</Heading></Grow>}{!!onClose &&
+            <Clickable onClick={onClose}><Icon size={"lg"} icon={faCircleXmark}/></Clickable>}</Flex>}
             {children}
         </Block>
     );

package/src/Components/FormElements/ColorInput/ColorInput.tsx

@@ -8,6 +8,7 @@ import { useSharedSelectedColor } from './sharedSelectedColor';
 import { Menu } from "../../Menu/Menu";
 import { useClientLayoutEffect } from "../../Hooks/useClientLayoutEffect";
 import { FormError } from "../FormError";
+import classNames from "classnames";
 
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;
@@ -22,6 +23,7 @@ export type ColorInputProps<OnChangeData> = {
     sharedColorKey?: string;
     disabled?: boolean
     error?: string;
+    className?: string;
 } & OptionalListener<'onChange', OnChangeData>;
 
 function convertToHex(color: { r: number; g: number; b: number; a?: number }, disableAlpha?: boolean) {
@@ -49,6 +51,7 @@ function ColorInput<OnChangeData>({
                                       error,
                                       sharedColorKey = "default",
                                       disabled,
+    className,
                                       ...otherProps
                                   }: ColorInputProps<OnChangeData>) {
     // Variables
@@ -136,7 +139,7 @@ function ColorInput<OnChangeData>({
     // Render Functions
     return (
         <>
-        <span className={styles.colorInput}>
+        <span className={classNames(styles.colorInput, className)}>
             <Menu x={position.x} y={position.y} isOpen={realIsOpen} onClose={onMenuClose}>
                         <SketchPicker
                             color={colVal}

package/src/Components/FormElements/ColorInput/colorInput.scss

@@ -1,6 +1,4 @@
 .colorInput {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
   display: flex;
 
   .preview {

package/src/Components/FormElements/Select/Select.tsx

@@ -10,9 +10,9 @@ import classNames from 'classnames';
 import { InlineBlock } from "../../Layout/InlineBlock";
 import { Text } from "../../Text/Text";
 
-export type SelectOption = {
+export type SelectOption<ValueType=string> = {
     label: string;
-    value: string;
+    value: ValueType;
     key?: string;
 };
 
@@ -21,12 +21,18 @@ export type SelectProps<OnChangeData> = RbmComponentProps<
         SelectHTMLAttributes<HTMLSelectElement>,
         {
             label?: string;
-            options: SelectOption[];
-            onChangeValue?: (newValue: string) => void;
             inline?: boolean;
             small?: boolean;
             error?: string;
-        } & OptionalListener<'onChange', OnChangeData>
+        } & ({
+            options: SelectOption[];
+            onChangeValue?: (newValue: string) => void;
+            useNumericValues?: false;
+    }|{
+            options: SelectOption<number>[];
+        onChangeValue?: (newValue: number) => void;
+        useNumericValues: true;
+    })& OptionalListener<'onChange', OnChangeData>
     >
 >;
 
@@ -39,6 +45,7 @@ export const Select = withMemo(function Select<OnChangeData>({
     inline = false,
     small = false,
     error,
+    useNumericValues,
     ...otherProps
 }: SelectProps<OnChangeData>) {
     // Variables
@@ -53,7 +60,11 @@ export const Select = withMemo(function Select<OnChangeData>({
     const [onChangeWithData, propsWithoutData] = useListenerWithExtractedProps<'onChange', OnChangeData>('onChange', otherProps);
     const onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
         (e) => {
-            onChangeValue?.(e.target.value);
+            if (useNumericValues) {
+                onChangeValue?.(Number(e.target.value));
+            } else {
+                onChangeValue?.(e.target.value);
+            }
             onChangeWithData(e);
         },
         [onChangeWithData, onChangeValue]

package/webpack.config.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 // const PrettierPlugin = require('prettier-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const getPackageJson = require('./scripts/getPackageJson');
+const CssLayeringPlugin = require('css-layering-webpack-plugin');
 
 const { version, name, license, repository, author } = getPackageJson(
     'version',
@@ -79,6 +80,12 @@ module.exports = (env) => {
             //     filename: 'css/index.css',
             // }),
             new webpack.BannerPlugin(banner),
+            new CssLayeringPlugin({
+                layers: [
+                    { path: "**/src/**/*.scss", name: "rbm" },
+                ],
+                injectOrderAs: "none"
+            }),
         ],
         resolve: {
             extensions: ['.ts', '.tsx', '.js', '.json'],