@oneblink/apps-react 5.6.1-beta.1 → 5.6.1-beta.2
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.
@@ -12,10 +12,10 @@ export declare const CustomAccordion: import("@emotion/styled").StyledComponent<
|
|
12
12
|
children?: import("react").ReactElement<any, any> | undefined;
|
13
13
|
}> | undefined;
|
14
14
|
TransitionProps?: import("@mui/material/transitions").TransitionProps | undefined;
|
15
|
-
} & Omit<import("@mui/material").PaperOwnProps, "
|
15
|
+
} & Omit<import("@mui/material").PaperOwnProps, "classes" | "onChange"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
16
16
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
17
|
-
}, "children" | "
|
17
|
+
}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "onChange" | "elevation" | "disabled" | "variant" | "disableGutters" | "square" | "defaultExpanded" | "expanded" | "TransitionComponent" | "TransitionProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
18
18
|
export declare const CustomAccordionSummary: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionSummaryOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
19
19
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
20
|
-
}, "className" | "style" | "children" | "
|
20
|
+
}, "className" | "style" | "children" | "classes" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
21
21
|
export declare const CustomAccordionDetails: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionDetailsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
@@ -11,5 +11,5 @@ type ListProps = {
|
|
11
11
|
};
|
12
12
|
export declare const ListItem: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
|
13
13
|
ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
14
|
-
}, "className" | "p" | "style" | "children" | "
|
14
|
+
}, "className" | "p" | "style" | "children" | "classes" | "sx" | "color" | "height" | "width" | "display" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "order" | "overflow" | "visibility" | "align" | "top" | "right" | "bottom" | "left" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "displayPrint" | "textOverflow" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "lineHeight" | "textAlign" | "textTransform" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
|
15
15
|
export {};
|
@@ -1,15 +1,28 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import clsx from 'clsx';
|
3
|
+
import { Fade, Modal as MuiModal } from '@mui/material';
|
3
4
|
function Modal({ isOpen, title, children, className, cardClassName, titleClassName, bodyClassName, actions, }) {
|
4
|
-
|
5
|
+
const modalContentRef = React.useRef(null);
|
6
|
+
return (React.createElement(MuiModal, { className: clsx('modal ob-modal', className, {
|
5
7
|
'is-active': isOpen,
|
6
|
-
})
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
8
|
+
}), open: isOpen, slots: {
|
9
|
+
backdrop: () => React.createElement("div", { className: "modal-background-faded" }),
|
10
|
+
}, onTransitionEnter: () => {
|
11
|
+
// set the initial focused element
|
12
|
+
const modalContentElement = modalContentRef.current;
|
13
|
+
if (modalContentElement) {
|
14
|
+
const primaryControls = modalContentElement.querySelectorAll('.ob-button.is-primary');
|
15
|
+
if (primaryControls[0] instanceof HTMLElement) {
|
16
|
+
primaryControls[0].focus();
|
17
|
+
}
|
18
|
+
}
|
19
|
+
} },
|
20
|
+
React.createElement(Fade, { in: isOpen },
|
21
|
+
React.createElement("div", { className: clsx('modal-card', cardClassName), ref: modalContentRef },
|
22
|
+
title && (React.createElement("header", { className: "modal-card-head" },
|
23
|
+
React.createElement("p", { className: clsx('modal-card-title', titleClassName) }, title))),
|
24
|
+
React.createElement("section", { className: clsx('modal-card-body', bodyClassName) }, children),
|
25
|
+
actions && React.createElement("footer", { className: "modal-card-foot" }, actions)))));
|
13
26
|
}
|
14
27
|
export default React.memo(Modal);
|
15
28
|
//# sourceMappingURL=Modal.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/renderer/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/renderer/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAavD,SAAS,KAAK,CAAC,EACb,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,OAAO,GACD;IACN,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE1D,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE;YAC3C,WAAW,EAAE,MAAM;SACpB,CAAC,EACF,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE;YACL,QAAQ,EAAE,GAAG,EAAE,CAAC,6BAAK,SAAS,EAAC,wBAAwB,GAAO;SAC/D,EACD,iBAAiB,EAAE,GAAG,EAAE;YACtB,kCAAkC;YAClC,MAAM,mBAAmB,GAAG,eAAe,CAAC,OAAO,CAAA;YACnD,IAAI,mBAAmB,EAAE;gBACvB,MAAM,eAAe,GAAG,mBAAmB,CAAC,gBAAgB,CAC1D,uBAAuB,CACxB,CAAA;gBACD,IAAI,eAAe,CAAC,CAAC,CAAC,YAAY,WAAW,EAAE;oBAC7C,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAA;iBAC3B;aACF;QACH,CAAC;QAED,oBAAC,IAAI,IAAC,EAAE,EAAE,MAAM;YACd,6BACE,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,EAC5C,GAAG,EAAE,eAAe;gBAEnB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAC,iBAAiB;oBACjC,2BAAG,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,IACnD,KAAK,CACJ,CACG,CACV;gBACD,iCAAS,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,IACvD,QAAQ,CACD;gBACT,OAAO,IAAI,gCAAQ,SAAS,EAAC,iBAAiB,IAAE,OAAO,CAAU,CAC9D,CACD,CACE,CACZ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Fade, Modal as MuiModal } from '@mui/material'\n\ntype Props = {\n isOpen: boolean\n title?: string\n children: React.ReactNode\n actions: React.ReactNode | null\n className?: string\n cardClassName?: string\n titleClassName?: string\n bodyClassName?: string\n}\n\nfunction Modal({\n isOpen,\n title,\n children,\n className,\n cardClassName,\n titleClassName,\n bodyClassName,\n actions,\n}: Props) {\n const modalContentRef = React.useRef<HTMLDivElement>(null)\n\n return (\n <MuiModal\n className={clsx('modal ob-modal', className, {\n 'is-active': isOpen,\n })}\n open={isOpen}\n slots={{\n backdrop: () => <div className=\"modal-background-faded\"></div>,\n }}\n onTransitionEnter={() => {\n // set the initial focused element\n const modalContentElement = modalContentRef.current\n if (modalContentElement) {\n const primaryControls = modalContentElement.querySelectorAll(\n '.ob-button.is-primary',\n )\n if (primaryControls[0] instanceof HTMLElement) {\n primaryControls[0].focus()\n }\n }\n }}\n >\n <Fade in={isOpen}>\n <div\n className={clsx('modal-card', cardClassName)}\n ref={modalContentRef}\n >\n {title && (\n <header className=\"modal-card-head\">\n <p className={clsx('modal-card-title', titleClassName)}>\n {title}\n </p>\n </header>\n )}\n <section className={clsx('modal-card-body', bodyClassName)}>\n {children}\n </section>\n {actions && <footer className=\"modal-card-foot\">{actions}</footer>}\n </div>\n </Fade>\n </MuiModal>\n )\n}\n\nexport default React.memo(Modal)\n"]}
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@oneblink/apps-react",
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
4
|
-
"version": "5.6.1-beta.
|
4
|
+
"version": "5.6.1-beta.2",
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
6
6
|
"bugs": {
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|