@jobber/components 6.25.0 → 6.26.0

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.
Files changed (4) hide show
  1. package/dist/Disclosure/Disclosure.d.ts +40 -2
  2. package/dist/Disclosure-cjs.js +22 -12
  3. package/dist/Disclosure-es.js +22 -12
  4. package/package.json +2 -2
package/dist/Disclosure/Disclosure.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactElement, ReactNode } from "react";
1
+ import { CSSProperties, ReactElement, ReactNode } from "react";
2
2
  interface DisclosureProps {
3
3
  /**
4
4
  * Child content that is manged by this component.
@@ -24,6 +24,44 @@ interface DisclosureProps {
24
24
  * Used to make the disclosure a Controlled Component.
25
25
  */
26
26
  readonly open?: boolean;
27
+ /**
28
+ * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
29
+ * **last resort**. Using this may result in unexpected side effects.
30
+ * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
31
+ */
32
+ readonly UNSAFE_className?: {
33
+ container?: string;
34
+ summary?: string;
35
+ summaryWrap?: string;
36
+ title?: {
37
+ textStyle?: string;
38
+ };
39
+ icon?: {
40
+ svg?: string;
41
+ path?: string;
42
+ };
43
+ arrowIconWrapper?: string;
44
+ content?: string;
45
+ };
46
+ /**
47
+ * **Use at your own risk:** Custom style for specific elements. This should only be used as a
48
+ * **last resort**. Using this may result in unexpected side effects.
49
+ * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
50
+ */
51
+ readonly UNSAFE_style?: {
52
+ container?: CSSProperties;
53
+ summary?: CSSProperties;
54
+ summaryWrap?: CSSProperties;
55
+ title?: {
56
+ textStyle?: CSSProperties;
57
+ };
58
+ icon?: {
59
+ svg?: CSSProperties;
60
+ path?: CSSProperties;
61
+ };
62
+ arrowIconWrapper?: CSSProperties;
63
+ content?: CSSProperties;
64
+ };
27
65
  }
28
- export declare function Disclosure({ children, title, defaultOpen, onToggle, open, }: DisclosureProps): JSX.Element;
66
+ export declare function Disclosure({ children, title, defaultOpen, onToggle, open, UNSAFE_className, UNSAFE_style, }: DisclosureProps): JSX.Element;
29
67
  export {};
package/dist/Disclosure-cjs.js CHANGED
@@ -8,31 +8,41 @@ var Typography = require('./Typography-cjs.js');
8
8
 
9
9
  var styles = {"arrowIconWrapper":"VMuRkKeqAs8-","details":"fNHz-uKoICo-","summary":"_8BfGPs1d3OI-","summaryWrap":"lPbWm-JxIOc-","customSummaryWrap":"qCHHx-9sUDU-","content":"v4nYwpvvlh8-","openAnimation":"R-IWZjEaJeM-","spinning":"UfV5y-kjRUE-"};
10
10
 
11
- function Disclosure({ children, title, defaultOpen = false, onToggle, open, }) {
11
+ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSAFE_className = {}, UNSAFE_style = {}, }) {
12
+ var _a, _b, _c, _d;
12
13
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen || open || false);
13
14
  const isOpen = open !== undefined ? open : internalOpen;
14
15
  const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
15
16
  const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.useResizeObserver.Breakpoints.small;
16
17
  const isTitleString = typeof title === "string";
17
- return (React.createElement("details", { open: isOpen, className: styles.details },
18
- React.createElement("summary", { className: styles.summary, onClick: handleToggle },
19
- React.createElement("div", { className: classnames(styles.summaryWrap, {
20
- [styles.customSummaryWrap]: !isTitleString,
21
- }), ref: titleRef },
22
- React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString }),
23
- React.createElement("span", { className: styles.arrowIconWrapper },
24
- React.createElement(Icon.Icon, { name: "arrowDown", color: "interactive" })))),
25
- React.createElement("span", { className: styles.content }, children)));
18
+ const containerClassNames = classnames(styles.details, UNSAFE_className.container);
19
+ const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);
20
+ const summaryWrapClassNames = classnames(styles.summaryWrap, { [styles.customSummaryWrap]: !isTitleString }, UNSAFE_className.summaryWrap);
21
+ const arrowIconWrapperClassNames = classnames(styles.arrowIconWrapper, UNSAFE_className.arrowIconWrapper);
22
+ const contentClassNames = classnames(styles.content, UNSAFE_className.content);
23
+ return (React.createElement("details", { open: isOpen, className: containerClassNames, style: UNSAFE_style.container },
24
+ React.createElement("summary", { className: summaryClassNames, style: UNSAFE_style.summary, onClick: handleToggle },
25
+ React.createElement("div", { className: summaryWrapClassNames, style: UNSAFE_style.summaryWrap, ref: titleRef },
26
+ React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString, UNSAFE_className: UNSAFE_className.title, UNSAFE_style: UNSAFE_style.title }),
27
+ React.createElement("span", { className: arrowIconWrapperClassNames, style: UNSAFE_style.arrowIconWrapper },
28
+ React.createElement(Icon.Icon, { name: "arrowDown", color: "interactive", UNSAFE_className: {
29
+ svg: (_a = UNSAFE_className.icon) === null || _a === void 0 ? void 0 : _a.svg,
30
+ path: (_b = UNSAFE_className.icon) === null || _b === void 0 ? void 0 : _b.path,
31
+ }, UNSAFE_style: {
32
+ svg: (_c = UNSAFE_style.icon) === null || _c === void 0 ? void 0 : _c.svg,
33
+ path: (_d = UNSAFE_style.icon) === null || _d === void 0 ? void 0 : _d.path,
34
+ } })))),
35
+ React.createElement("span", { className: contentClassNames, style: UNSAFE_style.content }, children)));
26
36
  function handleToggle(event) {
27
37
  event.preventDefault();
28
38
  setInternalOpen(!isOpen);
29
39
  onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isOpen);
30
40
  }
31
41
  }
32
- function DisclosureTitle({ title, size, isTitleString }) {
42
+ function DisclosureTitle({ title, size, isTitleString, UNSAFE_className, UNSAFE_style, }) {
33
43
  if (!isTitleString)
34
44
  return React.createElement(React.Fragment, null, title);
35
- return (React.createElement(Typography.Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading" }, title));
45
+ return (React.createElement(Typography.Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading", UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, title));
36
46
  }
37
47
 
38
48
  exports.Disclosure = Disclosure;
package/dist/Disclosure-es.js CHANGED
@@ -6,31 +6,41 @@ import { T as Typography } from './Typography-es.js';
6
6
 
7
7
  var styles = {"arrowIconWrapper":"VMuRkKeqAs8-","details":"fNHz-uKoICo-","summary":"_8BfGPs1d3OI-","summaryWrap":"lPbWm-JxIOc-","customSummaryWrap":"qCHHx-9sUDU-","content":"v4nYwpvvlh8-","openAnimation":"R-IWZjEaJeM-","spinning":"UfV5y-kjRUE-"};
8
8
 
9
- function Disclosure({ children, title, defaultOpen = false, onToggle, open, }) {
9
+ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSAFE_className = {}, UNSAFE_style = {}, }) {
10
+ var _a, _b, _c, _d;
10
11
  const [internalOpen, setInternalOpen] = useState(defaultOpen || open || false);
11
12
  const isOpen = open !== undefined ? open : internalOpen;
12
13
  const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
13
14
  const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
14
15
  const isTitleString = typeof title === "string";
15
- return (React.createElement("details", { open: isOpen, className: styles.details },
16
- React.createElement("summary", { className: styles.summary, onClick: handleToggle },
17
- React.createElement("div", { className: classnames(styles.summaryWrap, {
18
- [styles.customSummaryWrap]: !isTitleString,
19
- }), ref: titleRef },
20
- React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString }),
21
- React.createElement("span", { className: styles.arrowIconWrapper },
22
- React.createElement(Icon, { name: "arrowDown", color: "interactive" })))),
23
- React.createElement("span", { className: styles.content }, children)));
16
+ const containerClassNames = classnames(styles.details, UNSAFE_className.container);
17
+ const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);
18
+ const summaryWrapClassNames = classnames(styles.summaryWrap, { [styles.customSummaryWrap]: !isTitleString }, UNSAFE_className.summaryWrap);
19
+ const arrowIconWrapperClassNames = classnames(styles.arrowIconWrapper, UNSAFE_className.arrowIconWrapper);
20
+ const contentClassNames = classnames(styles.content, UNSAFE_className.content);
21
+ return (React.createElement("details", { open: isOpen, className: containerClassNames, style: UNSAFE_style.container },
22
+ React.createElement("summary", { className: summaryClassNames, style: UNSAFE_style.summary, onClick: handleToggle },
23
+ React.createElement("div", { className: summaryWrapClassNames, style: UNSAFE_style.summaryWrap, ref: titleRef },
24
+ React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString, UNSAFE_className: UNSAFE_className.title, UNSAFE_style: UNSAFE_style.title }),
25
+ React.createElement("span", { className: arrowIconWrapperClassNames, style: UNSAFE_style.arrowIconWrapper },
26
+ React.createElement(Icon, { name: "arrowDown", color: "interactive", UNSAFE_className: {
27
+ svg: (_a = UNSAFE_className.icon) === null || _a === void 0 ? void 0 : _a.svg,
28
+ path: (_b = UNSAFE_className.icon) === null || _b === void 0 ? void 0 : _b.path,
29
+ }, UNSAFE_style: {
30
+ svg: (_c = UNSAFE_style.icon) === null || _c === void 0 ? void 0 : _c.svg,
31
+ path: (_d = UNSAFE_style.icon) === null || _d === void 0 ? void 0 : _d.path,
32
+ } })))),
33
+ React.createElement("span", { className: contentClassNames, style: UNSAFE_style.content }, children)));
24
34
  function handleToggle(event) {
25
35
  event.preventDefault();
26
36
  setInternalOpen(!isOpen);
27
37
  onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isOpen);
28
38
  }
29
39
  }
30
- function DisclosureTitle({ title, size, isTitleString }) {
40
+ function DisclosureTitle({ title, size, isTitleString, UNSAFE_className, UNSAFE_style, }) {
31
41
  if (!isTitleString)
32
42
  return React.createElement(React.Fragment, null, title);
33
- return (React.createElement(Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading" }, title));
43
+ return (React.createElement(Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading", UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, title));
34
44
  }
35
45
 
36
46
  export { Disclosure as D };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "6.25.0",
3
+ "version": "6.26.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
489
489
  "> 1%",
490
490
  "IE 10"
491
491
  ],
492
- "gitHead": "b5aa4ca87e9b0899c7aeacb09056bd8c6f10d13a"
492
+ "gitHead": "2a98fef2597c160aa330e24cf95cba9c616b3d65"
493
493
  }