@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

package/dist/StatusIndicator/StatusIndicator.type.d.ts

@@ -0,0 +1 @@
+export type StatusIndicatorType = "success" | "warning" | "critical" | "inactive" | "informative";

package/dist/StatusIndicator/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var StatusIndicator = require('../StatusIndicator-CJokVJe8.js');
+require('react');
+
+
+
+exports.StatusIndicator = StatusIndicator.StatusIndicator;

package/dist/StatusIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator } from "./StatusIndicator";
+export type { StatusIndicatorType } from "./StatusIndicator.type";

package/dist/StatusIndicator/index.mjs

@@ -0,0 +1,2 @@
+export { S as StatusIndicator } from '../StatusIndicator-DOmArPLV.js';
+import 'react';

package/dist/StatusIndicator-CJokVJe8.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+var styles = {"statusIndicator":"ob7nhx1U-HQ-"};
+
+function StatusIndicator({ status }) {
+    return (React.createElement("span", { style: { backgroundColor: `var(--color-${status})` }, className: styles.statusIndicator, "data-testid": `ATL-Status-Indicator-${status}` }));
+}
+
+exports.StatusIndicator = StatusIndicator;

package/dist/StatusIndicator-DOmArPLV.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+var styles = {"statusIndicator":"ob7nhx1U-HQ-"};
+
+function StatusIndicator({ status }) {
+    return (React.createElement("span", { style: { backgroundColor: `var(--color-${status})` }, className: styles.statusIndicator, "data-testid": `ATL-Status-Indicator-${status}` }));
+}
+
+export { StatusIndicator as S };

package/dist/StatusLabel/StatusLabel.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+import { StatusIndicatorType } from "../StatusIndicator/StatusIndicator.type";
 export interface StatusLabelType {
     readonly statusLabel: string;
-    readonly statusType?: StatusType;
+    readonly statusType?: StatusIndicatorType;
 }
 interface StatusLabelProps {
     /**
@@ -20,7 +20,7 @@ interface StatusLabelProps {
      *
      * @default "inactive"
      */
-    readonly status: StatusType;
+    readonly status: StatusIndicatorType;
 }
 export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): JSX.Element;
 export {};

package/dist/StatusLabel/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var StatusLabel = require('../StatusLabel-BDRbAp5g.js');
+require('react');
+require('classnames');
+require('../Typography-Dcec2MjG.js');
+require('../StatusIndicator-CJokVJe8.js');
+
+
+
+exports.StatusLabel = StatusLabel.StatusLabel;

package/dist/StatusLabel/index.mjs

@@ -0,0 +1,5 @@
+export { S as StatusLabel } from '../StatusLabel-C4bqD3Rb.js';
+import 'react';
+import 'classnames';
+import '../Typography-BD0mo9T9.js';
+import '../StatusIndicator-DOmArPLV.js';

package/dist/StatusLabel-BDRbAp5g.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Typography = require('./Typography-Dcec2MjG.js');
+var StatusIndicator = require('./StatusIndicator-CJokVJe8.js');
+
+var styles = {"success":"WBxCEgPiC98-","warning":"ok6hVljkqSE-","critical":"-YTFHnzpkRE-","inactive":"_2F0I59nddP8-","informative":"BQd6Hylvxh0-","statusLabelRow":"MB0ycTR4PHg-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicatorWrapper":"NYMNxZSup30-"};
+
+function StatusLabel({ label, alignment = "start", status = "inactive", }) {
+    const containerClassNames = classnames(styles.statusLabelRow, styles[status], alignment === "end" && styles.labelTextEndAligned);
+    return (React.createElement("div", { role: "status", className: containerClassNames },
+        React.createElement("div", { className: styles.statusIndicatorWrapper },
+            React.createElement(StatusIndicator.StatusIndicator, { status: status })),
+        React.createElement(Typography.Typography, { size: "small", textColor: status, align: alignment }, label)));
+}
+
+exports.StatusLabel = StatusLabel;

package/dist/StatusLabel-C4bqD3Rb.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import classnames from 'classnames';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+import { S as StatusIndicator } from './StatusIndicator-DOmArPLV.js';
+
+var styles = {"success":"WBxCEgPiC98-","warning":"ok6hVljkqSE-","critical":"-YTFHnzpkRE-","inactive":"_2F0I59nddP8-","informative":"BQd6Hylvxh0-","statusLabelRow":"MB0ycTR4PHg-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicatorWrapper":"NYMNxZSup30-"};
+
+function StatusLabel({ label, alignment = "start", status = "inactive", }) {
+    const containerClassNames = classnames(styles.statusLabelRow, styles[status], alignment === "end" && styles.labelTextEndAligned);
+    return (React.createElement("div", { role: "status", className: containerClassNames },
+        React.createElement("div", { className: styles.statusIndicatorWrapper },
+            React.createElement(StatusIndicator, { status: status })),
+        React.createElement(Typography, { size: "small", textColor: status, align: alignment }, label)));
+}
+
+export { StatusLabel as S };

package/dist/Switch/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Switch = require('../Switch-DRNOFDRD.js');
+require('react');
+require('classnames');
+require('../Typography-Dcec2MjG.js');
+
+
+
+exports.Switch = Switch.Switch;

package/dist/Switch/index.mjs

@@ -0,0 +1,4 @@
+export { S as Switch } from '../Switch-BQZyTTVy.js';
+import 'react';
+import 'classnames';
+import '../Typography-BD0mo9T9.js';

package/dist/Switch-BQZyTTVy.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+
+var styles = {"track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-"};
+
+function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
+    const [statefulValue, setValue] = useState(false);
+    const value = providedValue != undefined ? providedValue : statefulValue;
+    const toggleSwitch = () => {
+        if (disabled) {
+            return;
+        }
+        const newValue = !value;
+        onChange && onChange(newValue);
+        if (providedValue == undefined) {
+            setValue(newValue);
+        }
+    };
+    const className = classnames(styles.track, {
+        [styles.isChecked]: value,
+        [styles.disabled]: disabled,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
+            React.createElement("span", { className: styles.toggle },
+                React.createElement(Label, { as: "On", disabled: disabled }),
+                React.createElement("span", { className: styles.pip }),
+                React.createElement(Label, { as: "Off", disabled: disabled }))),
+        React.createElement("input", { name: name, type: "hidden", value: String(value) })));
+}
+function Label({ as, disabled }) {
+    const getTextColor = () => {
+        if (disabled) {
+            return "grey";
+        }
+        else if (as === "On") {
+            return "white";
+        }
+        return "greyBlue";
+    };
+    return (React.createElement("span", { className: styles.label },
+        React.createElement(Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+}
+
+export { Switch as S };

package/dist/Switch-DRNOFDRD.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Typography = require('./Typography-Dcec2MjG.js');
+
+var styles = {"track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-"};
+
+function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
+    const [statefulValue, setValue] = React.useState(false);
+    const value = providedValue != undefined ? providedValue : statefulValue;
+    const toggleSwitch = () => {
+        if (disabled) {
+            return;
+        }
+        const newValue = !value;
+        onChange && onChange(newValue);
+        if (providedValue == undefined) {
+            setValue(newValue);
+        }
+    };
+    const className = classnames(styles.track, {
+        [styles.isChecked]: value,
+        [styles.disabled]: disabled,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
+            React.createElement("span", { className: styles.toggle },
+                React.createElement(Label, { as: "On", disabled: disabled }),
+                React.createElement("span", { className: styles.pip }),
+                React.createElement(Label, { as: "Off", disabled: disabled }))),
+        React.createElement("input", { name: name, type: "hidden", value: String(value) })));
+}
+function Label({ as, disabled }) {
+    const getTextColor = () => {
+        if (disabled) {
+            return "grey";
+        }
+        else if (as === "On") {
+            return "white";
+        }
+        return "greyBlue";
+    };
+    return (React.createElement("span", { className: styles.label },
+        React.createElement(Typography.Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+}
+
+exports.Switch = Switch;

package/dist/Table/Body.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface BodyProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Body({ children }: BodyProps): JSX.Element;
 export {};

package/dist/Table/Cells/Cell.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 interface CellProps {
-    children?: ReactNode | ReactNode[];
-    align?: "left" | "center" | "right";
+    readonly children?: ReactNode | ReactNode[];
+    readonly align?: "left" | "center" | "right";
 }
 export declare function Cell({ children, align }: CellProps): JSX.Element;
 export {};

package/dist/Table/Cells/CellCurrency.d.ts

@@ -2,8 +2,8 @@
 import { CurrencyType } from "@jobber/formatters";
 import { CellNumericProps } from "./CellNumeric";
 interface CellCurrencyProps extends CellNumericProps {
-    value: number;
-    currency?: CurrencyType;
+    readonly value: number;
+    readonly currency?: CurrencyType;
 }
 export declare function CellCurrency({ value, currency, }: CellCurrencyProps): JSX.Element;
 export {};

package/dist/Table/Cells/CellNumeric.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export interface CellNumericProps {
-    value: number | string;
+    readonly value: number | string;
 }
 export declare function CellNumeric({ value }: CellNumericProps): JSX.Element;

package/dist/Table/Footer.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface FooterProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Footer({ children }: FooterProps): JSX.Element;
 export {};

package/dist/Table/Header.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface HeaderProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Header({ children }: HeaderProps): JSX.Element;
 export {};

package/dist/Table/Row.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface RowProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Row({ children }: RowProps): JSX.Element;
 export {};

package/dist/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface TableProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function Table({ children }: TableProps): JSX.Element;
 export {};

package/dist/Table/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var Body = require('../Body-8HKzvIvv.js');
+require('react');
+require('@jobber/formatters');
+require('classnames');
+
+
+
+exports.Body = Body.Body;
+exports.Cell = Body.Cell;
+exports.CellCurrency = Body.CellCurrency;
+exports.CellNumeric = Body.CellNumeric;
+exports.Footer = Body.Footer;
+exports.Header = Body.Header;
+exports.Row = Body.Row;
+exports.Table = Body.Table;

package/dist/Table/index.mjs

@@ -0,0 +1,4 @@
+export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from '../Body-B78J8M_2.js';
+import 'react';
+import '@jobber/formatters';
+import 'classnames';

package/dist/Tabs/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var Tabs = require('../Tabs-DJ-Bbqw_.js');
+require('react');
+require('classnames');
+require('../Typography-Dcec2MjG.js');
+
+
+
+exports.Tab = Tabs.Tab;
+exports.Tabs = Tabs.Tabs;

package/dist/Tabs/index.mjs

@@ -0,0 +1,4 @@
+export { a as Tab, T as Tabs } from '../Tabs-BkuQenTE.js';
+import 'react';
+import 'classnames';
+import '../Typography-BD0mo9T9.js';

package/dist/Tabs-BkuQenTE.js

@@ -0,0 +1,66 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+
+var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
+
+function Tabs({ children, defaultTab = 0, onTabChange }) {
+    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
+    const [activeTab, setActiveTab] = useState(activeTabInitialValue);
+    const [overflowRight, setOverflowRight] = useState(false);
+    const [overflowLeft, setOverflowLeft] = useState(false);
+    const tabRow = useRef();
+    const overflowClassNames = classnames(styles.overflow, {
+        [styles.overflowRight]: overflowRight,
+        [styles.overflowLeft]: overflowLeft,
+    });
+    const activateTab = (index) => {
+        return () => {
+            setActiveTab(index);
+            if (onTabChange) {
+                onTabChange(index);
+            }
+        };
+    };
+    const activeTabProps = React.Children.toArray(children)[activeTab].props;
+    const handleOverflowing = () => {
+        if (tabRow.current) {
+            const scrollWidth = tabRow.current.scrollWidth;
+            const clientWidth = tabRow.current.clientWidth;
+            const maxScroll = scrollWidth - clientWidth;
+            const scrollPos = tabRow.current.scrollLeft;
+            if (scrollWidth > clientWidth) {
+                setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
+                setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
+            }
+        }
+    };
+    useEffect(() => {
+        handleOverflowing();
+        tabRow.current &&
+            tabRow.current.addEventListener("scroll", handleOverflowing);
+        return () => {
+            window.removeEventListener("scroll", handleOverflowing);
+        };
+    });
+    return (React.createElement("div", { className: styles.tabs },
+        React.createElement("div", { className: overflowClassNames },
+            React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow }, React.Children.map(children, (tab, index) => (React.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick }))))),
+        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
+}
+function Tab({ label }) {
+    return React.createElement(React.Fragment, null, label);
+}
+function InternalTab({ label, selected, activateTab, onClick = () => {
+    return;
+}, }) {
+    const className = classnames(styles.tab, { [styles.selected]: selected });
+    return (React.createElement("li", { role: "presentation" },
+        React.createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: event => {
+                activateTab();
+                onClick(event);
+            } },
+            React.createElement(Typography, { element: "span", size: "large", fontWeight: "semiBold" }, label))));
+}
+
+export { Tabs as T, Tab as a };

package/dist/Tabs-DJ-Bbqw_.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Typography = require('./Typography-Dcec2MjG.js');
+
+var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
+
+function Tabs({ children, defaultTab = 0, onTabChange }) {
+    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
+    const [activeTab, setActiveTab] = React.useState(activeTabInitialValue);
+    const [overflowRight, setOverflowRight] = React.useState(false);
+    const [overflowLeft, setOverflowLeft] = React.useState(false);
+    const tabRow = React.useRef();
+    const overflowClassNames = classnames(styles.overflow, {
+        [styles.overflowRight]: overflowRight,
+        [styles.overflowLeft]: overflowLeft,
+    });
+    const activateTab = (index) => {
+        return () => {
+            setActiveTab(index);
+            if (onTabChange) {
+                onTabChange(index);
+            }
+        };
+    };
+    const activeTabProps = React.Children.toArray(children)[activeTab].props;
+    const handleOverflowing = () => {
+        if (tabRow.current) {
+            const scrollWidth = tabRow.current.scrollWidth;
+            const clientWidth = tabRow.current.clientWidth;
+            const maxScroll = scrollWidth - clientWidth;
+            const scrollPos = tabRow.current.scrollLeft;
+            if (scrollWidth > clientWidth) {
+                setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
+                setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
+            }
+        }
+    };
+    React.useEffect(() => {
+        handleOverflowing();
+        tabRow.current &&
+            tabRow.current.addEventListener("scroll", handleOverflowing);
+        return () => {
+            window.removeEventListener("scroll", handleOverflowing);
+        };
+    });
+    return (React.createElement("div", { className: styles.tabs },
+        React.createElement("div", { className: overflowClassNames },
+            React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow }, React.Children.map(children, (tab, index) => (React.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick }))))),
+        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
+}
+function Tab({ label }) {
+    return React.createElement(React.Fragment, null, label);
+}
+function InternalTab({ label, selected, activateTab, onClick = () => {
+    return;
+}, }) {
+    const className = classnames(styles.tab, { [styles.selected]: selected });
+    return (React.createElement("li", { role: "presentation" },
+        React.createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: event => {
+                activateTab();
+                onClick(event);
+            } },
+            React.createElement(Typography.Typography, { element: "span", size: "large", fontWeight: "semiBold" }, label))));
+}
+
+exports.Tab = Tab;
+exports.Tabs = Tabs;

package/dist/Text/Text.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from "react";
 interface TextProps {
-    maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
+    readonly maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
     readonly variation?: "default" | "subdued" | "success" | "error" | "warn" | "info" | "disabled";
     readonly align?: "start" | "center" | "end";
     readonly size?: "small" | "base" | "large";

package/dist/Text/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Text = require('../Text-CuGgzpie.js');
+require('react');
+require('../Typography-Dcec2MjG.js');
+require('classnames');
+
+
+
+exports.Text = Text.Text;

package/dist/Text/index.mjs

@@ -0,0 +1,4 @@
+export { T as Text } from '../Text-C3-8gHkD.js';
+import 'react';
+import '../Typography-BD0mo9T9.js';
+import 'classnames';

package/dist/Text-C3-8gHkD.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+
+function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
+    const textColors = {
+        default: "text",
+        subdued: "textSecondary",
+        success: "success",
+        error: "critical",
+        warn: "warning",
+        info: "informative",
+        disabled: "disabled",
+    };
+    const maxLineToNumber = {
+        single: 1,
+        small: 2,
+        base: 4,
+        large: 8,
+        larger: 16,
+        unlimited: undefined,
+    };
+    return (React.createElement(Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
+}
+
+export { Text as T };

package/dist/{Text-4a2bc89f.js → Text-CuGgzpie.js}

@@ -1,11 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-973b122e.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Typography = require('./Typography-Dcec2MjG.js');
 
 function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
     const textColors = {
@@ -25,7 +21,7 @@ function Text({ variation = "default", size = "base", align = "start", children,
         larger: 16,
         unlimited: undefined,
     };
-    return (React__default["default"].createElement(Typography.Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
+    return (React.createElement(Typography.Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
 }
 
 exports.Text = Text;