@ainias42/react-bootstrap-mobile 0.1.26 → 0.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,9 @@
1
- import * as React from 'react';
2
1
  import { PropsWithChildren } from 'react';
3
2
  import { ShowDialog } from './DialogContext';
4
- import { EmptyProps } from '../../helper/EmptyProps';
5
- export type DialogContainerProps = PropsWithChildren<EmptyProps>;
3
+ export type DialogContainerProps = PropsWithChildren<{
4
+ dialogClassName?: string;
5
+ }>;
6
6
  export type DialogContainerRef = {
7
7
  showDialog: ShowDialog;
8
8
  };
9
- export declare const DialogContainer: import("../../helper/withForwardRef").RefComponent<{
10
- children?: React.ReactNode;
11
- }, DialogContainerRef>;
9
+ export declare const DialogContainer: import("../../helper/withForwardRef").RefComponent<DialogContainerProps, DialogContainerRef>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ainias42/react-bootstrap-mobile",
3
- "version": "0.1.26",
3
+ "version": "0.1.28",
4
4
  "description": "Mobile React Components using Bootstrap",
5
5
  "main": "dist/bootstrapReactMobile",
6
6
  "scripts": {
@@ -5,8 +5,11 @@ import { DialogProvider, ShowDialog } from './DialogContext';
5
5
  import { Dialog } from './Dialog';
6
6
  import { EmptyProps } from '../../helper/EmptyProps';
7
7
  import {withForwardRef} from "../../helper/withForwardRef";
8
+ import { Block } from "../Layout/Block";
8
9
 
9
- export type DialogContainerProps = PropsWithChildren<EmptyProps>;
10
+ export type DialogContainerProps = PropsWithChildren<{
11
+ dialogClassName?: string
12
+ }>;
10
13
 
11
14
  type DialogData = {
12
15
  id: number;
@@ -19,7 +22,7 @@ export type DialogContainerRef = {
19
22
  showDialog: ShowDialog;
20
23
  }
21
24
 
22
- export const DialogContainer = withForwardRef(function DialogContainer({ children }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
25
+ export const DialogContainer = withForwardRef(function DialogContainer({ children, dialogClassName }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
23
26
  // Variables
24
27
  const [dialogs, setDialogs] = useState<DialogData[]>([]);
25
28
  const [, setLastId] = useState(0);
@@ -68,6 +71,7 @@ export const DialogContainer = withForwardRef(function DialogContainer({ childre
68
71
  return (
69
72
  <DialogProvider value={showDialog}>
70
73
  {children}
74
+ <Block className={dialogClassName}>
71
75
  {dialogs.map((d) => {
72
76
  const DialogComponent = d.component;
73
77
  return (
@@ -76,6 +80,7 @@ export const DialogContainer = withForwardRef(function DialogContainer({ childre
76
80
  </Dialog>
77
81
  );
78
82
  })}
83
+ </Block>
79
84
  </DialogProvider>
80
85
  );
81
86
  });
@@ -68,11 +68,7 @@ $containerBreakpoints: $grid-breakpoints;
68
68
  display: grid;
69
69
  grid-template-rows: repeat(var(--grid-rows, 1), 1fr);
70
70
  grid-template-columns: repeat(var(--grid-columns, $columns), 1fr);
71
- gap: var(--grid-gap, 0);
72
-
73
- .item {
74
- padding: 4px;
75
- }
71
+ gap: var(--grid-gap, 8px);
76
72
 
77
73
  &.useContainerWidth {
78
74
  container-type: inline-size;
@@ -3,7 +3,7 @@
3
3
  background: #ffffff;
4
4
  border: 1px solid var(--border-light);
5
5
  border-radius: 2px;
6
- z-index: 1000;
6
+ z-index: 1002;
7
7
 
8
8
  &.hidden {
9
9
  visibility: hidden;