@jobber/components 6.9.1 → 6.10.0

package/dist/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 export interface PopoverProps {
     /**
      * Element the Popover will attach to and point at. A `useRef` must be attached to an html element
@@ -22,5 +22,25 @@ export interface PopoverProps {
      * @default 'auto'
      */
     readonly preferredPlacement?: "top" | "bottom" | "left" | "right" | "auto";
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+        dismissButtonContainer?: string;
+        arrow?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+        dismissButtonContainer?: CSSProperties;
+        arrow?: CSSProperties;
+    };
 }
-export declare function Popover({ onRequestClose, children, attachTo, open, preferredPlacement, }: PopoverProps): JSX.Element;
+export declare function Popover({ onRequestClose, children, attachTo, open, preferredPlacement, UNSAFE_className, UNSAFE_style, }: PopoverProps): JSX.Element;

package/dist/Popover/index.cjs

@@ -4,9 +4,9 @@ var Popover = require('../Popover-cjs.js');
 require('react');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
+require('classnames');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
-require('classnames');
 require('react-router-dom');
 require('../Icon-cjs.js');
 require('@jobber/design');

package/dist/Popover/index.mjs

@@ -2,9 +2,9 @@ export { P as Popover } from '../Popover-es.js';
 import 'react';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
+import 'classnames';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
-import 'classnames';
 import 'react-router-dom';
 import '../Icon-es.js';
 import '@jobber/design';

package/dist/Popover-cjs.js

@@ -3,11 +3,13 @@
 var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var classnames = require('classnames');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
 
-function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    var _a, _b, _c;
     const [popperElement, setPopperElement] = React.useState();
     const [arrowElement, setArrowElement] = React.useState();
     const { styles: popperStyles, attributes } = reactPopper.usePopper(isHTMLElement(attachTo) ? attachTo : attachTo.current, popperElement, {
@@ -15,11 +17,14 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
         placement: preferredPlacement,
     });
     useRefocusOnActivator.useRefocusOnActivator_2(open);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
-        React.createElement("div", { className: classes.dismissButton },
+    const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
+    const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
+    const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+        React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/Popover-es.js

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import classnames from 'classnames';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
 
-function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    var _a, _b, _c;
     const [popperElement, setPopperElement] = useState();
     const [arrowElement, setArrowElement] = useState();
     const { styles: popperStyles, attributes } = usePopper(isHTMLElement(attachTo) ? attachTo : attachTo.current, popperElement, {
@@ -13,11 +15,14 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
         placement: preferredPlacement,
     });
     useRefocusOnActivator_2(open);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
-        React.createElement("div", { className: classes.dismissButton },
+    const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
+    const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
+    const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+        React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.9.1",
+  "version": "6.10.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -487,5 +487,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1695473bbeebc40b83cc881053a3719fbc501cc7"
+  "gitHead": "e6c03b6cbad92cccd8eebd63c3f86f0e39232dbf"
 }