@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, "onChange" | "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
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" | "disabled" | "sx" | "onChange" | "elevation" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "disableGutters" | "square" | "defaultExpanded" | "expanded" | "TransitionComponent" | "TransitionProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
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" | "disabled" | "sx" | "tabIndex" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
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" | "top" | "right" | "bottom" | "left" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "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" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "sx" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
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
- return (React.createElement("div", { className: clsx('modal ob-modal', className, {
5
+ const modalContentRef = React.useRef(null);
6
+ return (React.createElement(MuiModal, { className: clsx('modal ob-modal', className, {
5
7
  'is-active': isOpen,
6
- }) },
7
- React.createElement("div", { className: "modal-background-faded" }),
8
- React.createElement("div", { className: clsx('modal-card', cardClassName) },
9
- title && (React.createElement("header", { className: "modal-card-head" },
10
- React.createElement("p", { className: clsx('modal-card-title', titleClassName) }, title))),
11
- React.createElement("section", { className: clsx('modal-card-body', bodyClassName) }, children),
12
- actions && React.createElement("footer", { className: "modal-card-foot" }, actions))));
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;AAavB,SAAS,KAAK,CAAC,EACb,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,OAAO,GACD;IACN,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE;YAC3C,WAAW,EAAE,MAAM;SACpB,CAAC;QAEF,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC;YAC9C,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAC,iBAAiB;gBACjC,2BAAG,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAG,KAAK,CAAK,CAC5D,CACV;YACD,iCAAS,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,IACvD,QAAQ,CACD;YACT,OAAO,IAAI,gCAAQ,SAAS,EAAC,iBAAiB,IAAE,OAAO,CAAU,CAC9D,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\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 return (\n <div\n className={clsx('modal ob-modal', className, {\n 'is-active': isOpen,\n })}\n >\n <div className=\"modal-background-faded\"></div>\n <div className={clsx('modal-card', cardClassName)}>\n {title && (\n <header className=\"modal-card-head\">\n <p className={clsx('modal-card-title', titleClassName)}>{title}</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 </div>\n )\n}\n\nexport default React.memo(Modal)\n"]}
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.1",
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"