@jobber/components 6.26.0 → 6.26.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.
- package/dist/AnimatedPresence-es.js +4 -4
- package/dist/AnimatedSwitcher-es.js +4 -4
- package/dist/AtlantisThemeContext-es.js +6 -6
- package/dist/Autocomplete-es.js +27 -27
- package/dist/Avatar-es.js +4 -4
- package/dist/Banner-es.js +13 -13
- package/dist/BannerIcon-es.js +3 -3
- package/dist/Body-es.js +12 -12
- package/dist/Box-es.js +2 -2
- package/dist/Button-es.js +13 -13
- package/dist/ButtonDismiss-es.js +2 -2
- package/dist/Card-es.js +15 -15
- package/dist/Checkbox/index.mjs +24 -24
- package/dist/Chip-es.js +17 -17
- package/dist/ChipDismissible-es.js +7 -7
- package/dist/Chips/index.mjs +3 -3
- package/dist/Chips-es.js +13 -13
- package/dist/Combobox/components/ComboboxContent/index.cjs +0 -2
- package/dist/Combobox/components/ComboboxContent/index.mjs +0 -2
- package/dist/Combobox/hooks/useComboboxAccessibility.d.ts +3 -8
- package/dist/Combobox/index.cjs +1 -2
- package/dist/Combobox/index.mjs +1 -2
- package/dist/Combobox-es.js +6 -6
- package/dist/ComboboxAction-es.js +4 -4
- package/dist/ComboboxActivator-es.js +3 -3
- package/dist/ComboboxContent-cjs.js +3745 -39
- package/dist/ComboboxContent-es.js +3715 -27
- package/dist/ComboboxContentHeader-es.js +4 -4
- package/dist/ComboboxContentList-es.js +13 -13
- package/dist/ComboboxContentSearch-es.js +5 -5
- package/dist/ComboboxLoadMore-es.js +2 -2
- package/dist/ComboboxOption-es.js +6 -6
- package/dist/ComboboxProvider-es.js +3 -3
- package/dist/ComboboxTrigger-es.js +4 -4
- package/dist/ConfirmationModal-es.js +4 -4
- package/dist/Countdown-es.js +3 -3
- package/dist/DataDump-es.js +7 -7
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs +1 -2
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs +1 -2
- package/dist/DataList/components/DataListFilters/index.cjs +2 -2
- package/dist/DataList/components/DataListFilters/index.mjs +2 -2
- package/dist/DataList-es.js +21 -21
- package/dist/DataList.utils-es.js +7 -7
- package/dist/DataListAction-es.js +9 -9
- package/dist/DataListActions-es.js +6 -6
- package/dist/DataListActionsMenu-es.js +4 -4
- package/dist/DataListBulkActions-es.js +3 -3
- package/dist/DataListContext-es.js +6 -6
- package/dist/DataListEmptyState-es.js +3 -3
- package/dist/DataListFilters-es.js +3 -3
- package/dist/DataListHeader-es.js +12 -12
- package/dist/DataListHeaderTile-es.js +9 -9
- package/dist/DataListItem-es.js +10 -10
- package/dist/DataListItemActions-es.js +3 -3
- package/dist/DataListItemActionsOverflow-es.js +5 -5
- package/dist/DataListItemClickable-es.js +8 -8
- package/dist/DataListItems-es.js +3 -3
- package/dist/DataListLayout-es.js +2 -2
- package/dist/DataListLayoutActions-es.js +6 -6
- package/dist/DataListLoadMore-es.js +8 -8
- package/dist/DataListLoadingState-es.js +4 -4
- package/dist/DataListOverflowFade-es.js +6 -6
- package/dist/DataListSearch-es.js +6 -6
- package/dist/DataListSort-es.js +6 -6
- package/dist/DataListSortingOptions-es.js +3 -3
- package/dist/DataListStatusBar-es.js +2 -2
- package/dist/DataListStickyHeader-es.js +2 -2
- package/dist/DataListTags-es.js +7 -7
- package/dist/DataListTotalCount-es.js +6 -6
- package/dist/DataTable-es.js +45 -45
- package/dist/DatePicker-es.js +12 -12
- package/dist/DayOfMonthSelect-es.js +18 -18
- package/dist/DescriptionList-es.js +4 -4
- package/dist/Disclosure-es.js +10 -10
- package/dist/Divider-es.js +2 -2
- package/dist/DrawerGrid-es.js +11 -11
- package/dist/Emphasis-es.js +2 -2
- package/dist/FeatureSwitch-es.js +17 -17
- package/dist/Flex-es.js +2 -2
- package/dist/Form-es.js +3 -3
- package/dist/FormField/FormFieldTypes.d.ts +6 -0
- package/dist/FormField/hooks/useAtlantisFormField.d.ts +2 -2
- package/dist/FormField-cjs.js +12 -4
- package/dist/FormField-es.js +50 -42
- package/dist/FormatDate-es.js +2 -2
- package/dist/FormatEmail-es.js +2 -2
- package/dist/FormatFile-es.js +23 -23
- package/dist/FormatRelativeDateTime-es.js +6 -6
- package/dist/FormatTime-es.js +2 -2
- package/dist/Gallery-es.js +8 -8
- package/dist/Glimmer-es.js +11 -11
- package/dist/Grid-es.js +2 -2
- package/dist/GridCell-es.js +2 -2
- package/dist/Heading-es.js +2 -2
- package/dist/Icon-es.js +9 -9
- package/dist/InlineLabel-es.js +3 -3
- package/dist/InputAvatar-es.js +11 -11
- package/dist/InputDate/index.cjs +1 -1
- package/dist/InputDate/index.mjs +10 -10
- package/dist/InputEmail-cjs.js +1 -1
- package/dist/InputEmail-es.js +3 -3
- package/dist/InputFile-es.js +20 -20
- package/dist/InputGroup-es.js +4 -4
- package/dist/InputNumber-cjs.js +1 -1
- package/dist/InputNumber-es.js +3 -3
- package/dist/InputPassword-cjs.js +1 -1
- package/dist/InputPassword-es.js +3 -3
- package/dist/InputPhoneNumber-cjs.js +2 -2
- package/dist/InputPhoneNumber-es.js +7 -7
- package/dist/InputText/index.cjs +1 -1
- package/dist/InputText/index.mjs +13 -13
- package/dist/InputTime-cjs.js +1 -1
- package/dist/InputTime-es.js +3 -3
- package/dist/InputValidation-es.js +5 -5
- package/dist/InternalChipDismissible-es.js +19 -19
- package/dist/LightBox-es.js +31 -31
- package/dist/Link-es.js +2 -2
- package/dist/List-es.js +29 -29
- package/dist/Markdown-es.js +15 -15
- package/dist/Menu-es.js +21 -21
- package/dist/Modal-es.js +18 -18
- package/dist/MultiSelect-es.js +9 -9
- package/dist/Option-cjs.js +1 -1
- package/dist/Option-es.js +4 -4
- package/dist/Page-es.js +23 -23
- package/dist/Popover-es.js +7 -7
- package/dist/ProgressBar-es.js +5 -5
- package/dist/RadioGroup-es.js +9 -9
- package/dist/RecurringSelect-es.js +19 -19
- package/dist/SegmentedControl-es.js +9 -9
- package/dist/Select/Select.d.ts +1 -1
- package/dist/SideDrawer-es.js +22 -22
- package/dist/Spinner-es.js +2 -2
- package/dist/StatusIndicator-es.js +2 -2
- package/dist/StatusLabel-es.js +5 -5
- package/dist/Switch-es.js +10 -10
- package/dist/Tabs-es.js +14 -14
- package/dist/Text-es.js +2 -2
- package/dist/Tooltip-es.js +9 -9
- package/dist/Typography-es.js +2 -2
- package/dist/showToast-es.js +11 -11
- package/dist/styles.css +5 -2
- package/dist/useChildComponent-es.js +2 -2
- package/dist/useFocusTrap-es.js +2 -2
- package/dist/useInView-es.js +2 -2
- package/dist/useIsMounted-es.js +2 -2
- package/dist/useOnKeyDown-es.js +2 -2
- package/dist/useRefocusOnActivator-es.js +2 -2
- package/dist/useResizeObserver-es.js +3 -3
- package/dist/useSafeLayoutEffect-es.js +2 -2
- package/dist/useScrollToActive-es.js +3 -3
- package/package.json +3 -2
package/dist/Markdown-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { T as Text } from './Text-es.js';
|
|
3
3
|
import { E as Emphasis } from './Emphasis-es.js';
|
|
4
4
|
import { H as Heading } from './Heading-es.js';
|
|
@@ -18554,7 +18554,7 @@ function toReact(context, node, index, parent) {
|
|
|
18554
18554
|
options.components && own$1.call(options.components, name)
|
|
18555
18555
|
? options.components[name]
|
|
18556
18556
|
: name;
|
|
18557
|
-
const basic = typeof component === 'string' || component ===
|
|
18557
|
+
const basic = typeof component === 'string' || component === React__default.Fragment;
|
|
18558
18558
|
|
|
18559
18559
|
if (!ReactIs.isValidElementType(component)) {
|
|
18560
18560
|
throw new TypeError(
|
|
@@ -18668,8 +18668,8 @@ function toReact(context, node, index, parent) {
|
|
|
18668
18668
|
|
|
18669
18669
|
// Ensure no React warnings are emitted for void elements w/ children.
|
|
18670
18670
|
return children.length > 0
|
|
18671
|
-
?
|
|
18672
|
-
:
|
|
18671
|
+
? React__default.createElement(component, properties, children)
|
|
18672
|
+
: React__default.createElement(component, properties)
|
|
18673
18673
|
}
|
|
18674
18674
|
|
|
18675
18675
|
/**
|
|
@@ -18899,14 +18899,14 @@ function ReactMarkdown(options) {
|
|
|
18899
18899
|
}
|
|
18900
18900
|
|
|
18901
18901
|
/** @type {ReactElement} */
|
|
18902
|
-
let result =
|
|
18903
|
-
|
|
18902
|
+
let result = React__default.createElement(
|
|
18903
|
+
React__default.Fragment,
|
|
18904
18904
|
{},
|
|
18905
18905
|
childrenToReact({options, schema: html, listDepth: 0}, hastNode)
|
|
18906
18906
|
);
|
|
18907
18907
|
|
|
18908
18908
|
if (options.className) {
|
|
18909
|
-
result =
|
|
18909
|
+
result = React__default.createElement('div', {className: options.className}, result);
|
|
18910
18910
|
}
|
|
18911
18911
|
|
|
18912
18912
|
return result
|
|
@@ -18992,9 +18992,9 @@ function Markdown({ content, externalLink, basicUsage, onLinkClick, }) {
|
|
|
18992
18992
|
],
|
|
18993
18993
|
unwrapDisallowed: true,
|
|
18994
18994
|
}));
|
|
18995
|
-
const Tag = basicUsage ?
|
|
18996
|
-
return (
|
|
18997
|
-
|
|
18995
|
+
const Tag = basicUsage ? React__default.Fragment : Content;
|
|
18996
|
+
return (React__default.createElement(Tag, null,
|
|
18997
|
+
React__default.createElement(ReactMarkdown, Object.assign({}, props, { linkTarget: externalLink ? "_blank" : undefined, components: {
|
|
18998
18998
|
p: renderParagraph,
|
|
18999
18999
|
strong: renderStrong,
|
|
19000
19000
|
em: renderEmphasis,
|
|
@@ -19007,23 +19007,23 @@ function Markdown({ content, externalLink, basicUsage, onLinkClick, }) {
|
|
|
19007
19007
|
} }), content)));
|
|
19008
19008
|
}
|
|
19009
19009
|
function renderParagraph({ children }) {
|
|
19010
|
-
return
|
|
19010
|
+
return React__default.createElement(Text, null, children);
|
|
19011
19011
|
}
|
|
19012
19012
|
function renderStrong({ children }) {
|
|
19013
|
-
return
|
|
19013
|
+
return React__default.createElement(Emphasis, { variation: "bold" }, children);
|
|
19014
19014
|
}
|
|
19015
19015
|
function renderEmphasis({ children }) {
|
|
19016
|
-
return
|
|
19016
|
+
return React__default.createElement(Emphasis, { variation: "italic" }, children);
|
|
19017
19017
|
}
|
|
19018
19018
|
function renderHeading(level) {
|
|
19019
19019
|
function buildHeading({ children }) {
|
|
19020
|
-
return
|
|
19020
|
+
return React__default.createElement(Heading, { level: level }, children);
|
|
19021
19021
|
}
|
|
19022
19022
|
return buildHeading;
|
|
19023
19023
|
}
|
|
19024
19024
|
function renderLink(onLinkClick, externalLink) {
|
|
19025
19025
|
// eslint-disable-next-line react/display-name
|
|
19026
|
-
return ({ children, href, }) => (
|
|
19026
|
+
return ({ children, href, }) => (React__default.createElement("a", { href: href, onClick: event => {
|
|
19027
19027
|
return onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(event.target);
|
|
19028
19028
|
}, target: externalLink ? "_blank" : undefined, rel: "noreferrer" }, children));
|
|
19029
19029
|
}
|
package/dist/Menu-es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState, useRef, useId } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
4
4
|
import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
|
|
5
5
|
import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
|
|
6
6
|
import { usePopper } from 'react-popper';
|
|
7
7
|
import { u as useIsMounted_2 } from './useIsMounted-es.js';
|
|
8
|
-
import
|
|
8
|
+
import ReactDOM__default from 'react-dom';
|
|
9
9
|
import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
|
|
10
10
|
import { B as Button } from './Button-es.js';
|
|
11
11
|
import { T as Typography } from './Typography-es.js';
|
|
@@ -16,7 +16,7 @@ var useWindowDimensions$1 = {};
|
|
|
16
16
|
|
|
17
17
|
Object.defineProperty(useWindowDimensions$1, "__esModule", { value: true });
|
|
18
18
|
var useWindowDimensions_2 = useWindowDimensions$1.useWindowDimensions = useWindowDimensions;
|
|
19
|
-
const react_1 =
|
|
19
|
+
const react_1 = React__default;
|
|
20
20
|
function getWindowDimensions() {
|
|
21
21
|
if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
|
|
22
22
|
return {
|
|
@@ -96,28 +96,28 @@ function Menu({ activator, items }) {
|
|
|
96
96
|
const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
|
|
97
97
|
? Object.assign(Object.assign({}, attributes.popper), { style: popperStyles.popper }) : {};
|
|
98
98
|
if (!activator) {
|
|
99
|
-
activator = (
|
|
99
|
+
activator = (React__default.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
|
|
100
100
|
}
|
|
101
|
-
return (
|
|
102
|
-
|
|
101
|
+
return (React__default.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
|
|
102
|
+
React__default.createElement("div", { ref: popperRef }, React__default.cloneElement(activator, {
|
|
103
103
|
onClick: toggle(activator.props.onClick),
|
|
104
104
|
id: buttonID,
|
|
105
105
|
ariaControls: menuID,
|
|
106
106
|
ariaExpanded: visible,
|
|
107
107
|
ariaHaspopup: true,
|
|
108
108
|
})),
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
109
|
+
React__default.createElement(MenuPortal, null,
|
|
110
|
+
React__default.createElement(AnimatePresence, null, visible && (React__default.createElement(React__default.Fragment, null,
|
|
111
|
+
React__default.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
|
|
112
112
|
type: "tween",
|
|
113
113
|
duration: 0.15,
|
|
114
114
|
} }),
|
|
115
|
-
|
|
115
|
+
React__default.createElement("div", Object.assign({ ref: setPopperElement, className: styles.popperContainer }, positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: styles.menu, role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: state === null || state === void 0 ? void 0 : state.placement, ref: menuRef, transition: {
|
|
116
116
|
type: "tween",
|
|
117
117
|
duration: 0.25,
|
|
118
|
-
} }, items.map((item, key) => (
|
|
119
|
-
item.header &&
|
|
120
|
-
item.actions.map(action => (
|
|
118
|
+
} }, items.map((item, key) => (React__default.createElement("div", { key: key, className: styles.section },
|
|
119
|
+
item.header && React__default.createElement(SectionHeader, { text: item.header }),
|
|
120
|
+
item.actions.map(action => (React__default.createElement(Action, Object.assign({ sectionLabel: item.header, key: action.label }, action))))))))))))))));
|
|
121
121
|
function toggle(callbackPassthrough) {
|
|
122
122
|
return (event) => {
|
|
123
123
|
setVisible(!visible);
|
|
@@ -144,19 +144,19 @@ function Menu({ activator, items }) {
|
|
|
144
144
|
}
|
|
145
145
|
}
|
|
146
146
|
function SectionHeader({ text }) {
|
|
147
|
-
return (
|
|
148
|
-
|
|
147
|
+
return (React__default.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
|
|
148
|
+
React__default.createElement(Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, text)));
|
|
149
149
|
}
|
|
150
150
|
function Action({ label, sectionLabel, icon, destructive, onClick, }) {
|
|
151
151
|
const actionButtonRef = useRef();
|
|
152
152
|
const buttonClasses = classnames(styles.action, {
|
|
153
153
|
[styles.destructive]: destructive,
|
|
154
154
|
});
|
|
155
|
-
return (
|
|
156
|
-
icon && (
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
sectionLabel && (
|
|
155
|
+
return (React__default.createElement("button", { role: "menuitem", type: "button", className: buttonClasses, key: label, onClick: onClick, ref: actionButtonRef },
|
|
156
|
+
icon && (React__default.createElement("div", null,
|
|
157
|
+
React__default.createElement(Icon, { color: destructive ? "destructive" : undefined, name: icon }))),
|
|
158
|
+
React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: "text" },
|
|
159
|
+
sectionLabel && (React__default.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
|
|
160
160
|
label)));
|
|
161
161
|
}
|
|
162
162
|
function MenuPortal({ children }) {
|
|
@@ -164,7 +164,7 @@ function MenuPortal({ children }) {
|
|
|
164
164
|
if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
|
|
165
165
|
return null;
|
|
166
166
|
}
|
|
167
|
-
return
|
|
167
|
+
return ReactDOM__default.createPortal(children, document.body);
|
|
168
168
|
}
|
|
169
169
|
|
|
170
170
|
export { Menu as M };
|
package/dist/Modal-es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import ReactDOM__default from 'react-dom';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
5
5
|
import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
|
|
@@ -18,17 +18,17 @@ function Modal({ open = false, title, size, dismissible = true, children, primar
|
|
|
18
18
|
useRefocusOnActivator_2(open);
|
|
19
19
|
const modalRef = useFocusTrap_2(open);
|
|
20
20
|
useOnKeyDown_2(handleRequestClose, "Escape");
|
|
21
|
-
const template = (
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles.container, tabIndex: 0 },
|
|
22
|
+
React__default.createElement(motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
|
|
23
|
+
React__default.createElement(motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
|
|
24
24
|
duration: 0.2,
|
|
25
25
|
ease: "easeInOut",
|
|
26
26
|
} },
|
|
27
|
-
title != undefined && (
|
|
27
|
+
title != undefined && (React__default.createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
|
|
28
28
|
children,
|
|
29
|
-
|
|
29
|
+
React__default.createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
|
|
30
30
|
return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
|
|
31
|
-
?
|
|
31
|
+
? ReactDOM__default.createPortal(template, document.body)
|
|
32
32
|
: template;
|
|
33
33
|
function handleRequestClose() {
|
|
34
34
|
if (open && onRequestClose) {
|
|
@@ -37,10 +37,10 @@ function Modal({ open = false, title, size, dismissible = true, children, primar
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
function Header({ title, dismissible, onRequestClose }) {
|
|
40
|
-
return (
|
|
41
|
-
|
|
42
|
-
dismissible && (
|
|
43
|
-
|
|
40
|
+
return (React__default.createElement("div", { className: styles.header, "data-testid": "modal-header" },
|
|
41
|
+
React__default.createElement(Heading, { level: 2 }, title),
|
|
42
|
+
dismissible && (React__default.createElement("div", { className: styles.closeButton },
|
|
43
|
+
React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
|
|
44
44
|
}
|
|
45
45
|
function Actions({ primary, secondary, tertiary }) {
|
|
46
46
|
const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
|
|
@@ -50,12 +50,12 @@ function Actions({ primary, secondary, tertiary }) {
|
|
|
50
50
|
if (tertiary != undefined) {
|
|
51
51
|
tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
|
|
52
52
|
}
|
|
53
|
-
return (
|
|
54
|
-
|
|
55
|
-
primary &&
|
|
56
|
-
secondary &&
|
|
57
|
-
tertiary && (
|
|
58
|
-
|
|
53
|
+
return (React__default.createElement(React__default.Fragment, null, shouldShow && (React__default.createElement("div", { className: styles.actionBar },
|
|
54
|
+
React__default.createElement("div", { className: styles.rightAction },
|
|
55
|
+
primary && React__default.createElement(Button, Object.assign({}, primary)),
|
|
56
|
+
secondary && React__default.createElement(Button, Object.assign({}, secondary))),
|
|
57
|
+
tertiary && (React__default.createElement("div", { className: styles.leftAction },
|
|
58
|
+
React__default.createElement(Button, Object.assign({}, tertiary))))))));
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
export { Modal as M };
|
package/dist/MultiSelect-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { Checkbox } from './Checkbox/index.mjs';
|
|
4
4
|
import { T as Text } from './Text-es.js';
|
|
@@ -70,16 +70,16 @@ function DropDownMenu({ options, setOptions }) {
|
|
|
70
70
|
// focus first option
|
|
71
71
|
handleOptionFocus(0);
|
|
72
72
|
}, [menuDiv]);
|
|
73
|
-
return (
|
|
73
|
+
return (React__default.createElement("ul", { "data-testid": "dropdown-menu", "data-elevation": "elevated", className: styles.dropDownMenuContainer, ref: menuDiv, onKeyDown: handleKeyDown }, options.map((option, index) => {
|
|
74
74
|
const optionClass = classnames(styles.option, {
|
|
75
75
|
[styles.active]: index === highlightedIndex,
|
|
76
76
|
});
|
|
77
|
-
return (
|
|
77
|
+
return (React__default.createElement("li", { key: `${index}-${option.label}`, className: optionClass, onClick: event => {
|
|
78
78
|
event.stopPropagation();
|
|
79
79
|
event.preventDefault();
|
|
80
80
|
handleOptionClick(option);
|
|
81
81
|
}, onMouseOver: e => handleOptionHover(e, index) },
|
|
82
|
-
|
|
82
|
+
React__default.createElement(Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
|
|
83
83
|
})));
|
|
84
84
|
function handlePressUp(event) {
|
|
85
85
|
event.preventDefault();
|
|
@@ -153,11 +153,11 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
|
|
|
153
153
|
setLabel(selectedLabels.join(", "));
|
|
154
154
|
}
|
|
155
155
|
}, [options]);
|
|
156
|
-
return (
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
menuVisible && (
|
|
156
|
+
return (React__default.createElement("div", { ref: multiSelectContainer, className: styles$1.multiSelectContainer, onKeyDown: handleKeydown },
|
|
157
|
+
React__default.createElement("div", { "data-testid": "multi-select", className: multiSelectClass, onClick: handleMenuVisibility, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: 0, ref: multiSelectRef, role: "button", "aria-label": `${defaultLabel}: ${label}`, "aria-multiselectable": true, "aria-haspopup": true },
|
|
158
|
+
React__default.createElement(Text, null, label),
|
|
159
|
+
React__default.createElement(Icon, { name: "arrowDown" })),
|
|
160
|
+
menuVisible && (React__default.createElement(DropDownMenu, { options: options, setOptions: onOptionsChange }))));
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
export { MultiSelect as M };
|
package/dist/Option-cjs.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var FormField = require('./FormField-cjs.js');
|
|
5
|
+
require('classnames');
|
|
5
6
|
require('./tslib.es6-cjs.js');
|
|
6
7
|
require('react-hook-form');
|
|
7
8
|
require('framer-motion');
|
|
8
9
|
require('@jobber/design');
|
|
9
|
-
require('classnames');
|
|
10
10
|
require('./Button-cjs.js');
|
|
11
11
|
|
|
12
12
|
function Select(props) {
|
package/dist/Option-es.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { k as FormField } from './FormField-es.js';
|
|
3
|
+
import 'classnames';
|
|
3
4
|
import './tslib.es6-es.js';
|
|
4
5
|
import 'react-hook-form';
|
|
5
6
|
import 'framer-motion';
|
|
6
7
|
import '@jobber/design';
|
|
7
|
-
import 'classnames';
|
|
8
8
|
import './Button-es.js';
|
|
9
9
|
|
|
10
10
|
function Select(props) {
|
|
11
|
-
return
|
|
11
|
+
return React__default.createElement(FormField, Object.assign({ type: "select" }, props));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
function SelectOption({ children, disabled, value }) {
|
|
15
|
-
return (
|
|
15
|
+
return (React__default.createElement("option", { disabled: disabled, value: value }, children));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export { Select as S, SelectOption as a };
|
package/dist/Page-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { u as useResizeObserver } from './useResizeObserver-es.js';
|
|
4
4
|
import { H as Heading } from './Heading-es.js';
|
|
@@ -30,28 +30,28 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
|
|
|
30
30
|
if (secondaryAction != undefined) {
|
|
31
31
|
secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
|
|
32
32
|
}
|
|
33
|
-
return (
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
titleMetaData ? (
|
|
39
|
-
|
|
40
|
-
titleMetaData)) : (
|
|
41
|
-
subtitle && (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
showActionGroup && (
|
|
46
|
-
primaryAction && (
|
|
47
|
-
|
|
48
|
-
secondaryAction && (
|
|
49
|
-
|
|
50
|
-
showMenu && (
|
|
51
|
-
|
|
52
|
-
intro && (
|
|
53
|
-
|
|
54
|
-
|
|
33
|
+
return (React__default.createElement("div", { className: pageStyles },
|
|
34
|
+
React__default.createElement(Content, null,
|
|
35
|
+
React__default.createElement(Content, null,
|
|
36
|
+
React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
|
|
37
|
+
React__default.createElement("div", null,
|
|
38
|
+
titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
|
|
39
|
+
React__default.createElement(Heading, { level: 1 }, title),
|
|
40
|
+
titleMetaData)) : (React__default.createElement(Heading, { level: 1 }, title)),
|
|
41
|
+
subtitle && (React__default.createElement("div", { className: styles.subtitle },
|
|
42
|
+
React__default.createElement(Text, { size: "large", variation: "subdued" },
|
|
43
|
+
React__default.createElement(Emphasis, { variation: "bold" },
|
|
44
|
+
React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
|
|
45
|
+
showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
|
|
46
|
+
primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
|
|
47
|
+
React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
|
|
48
|
+
secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
|
|
49
|
+
React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
|
|
50
|
+
showMenu && (React__default.createElement("div", { className: styles.actionButton },
|
|
51
|
+
React__default.createElement(Menu, { items: moreActionsMenu })))))),
|
|
52
|
+
intro && (React__default.createElement(Text, { size: "large" },
|
|
53
|
+
React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
|
|
54
|
+
React__default.createElement(Content, null, children))));
|
|
55
55
|
}
|
|
56
56
|
const getActionProps = (actionProps) => {
|
|
57
57
|
const buttonProps = Object.assign({}, actionProps);
|
package/dist/Popover-es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState } from 'react';
|
|
2
2
|
import { usePopper } from 'react-popper';
|
|
3
3
|
import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
-
import
|
|
5
|
+
import ReactDOM__default from 'react-dom';
|
|
6
6
|
import { B as ButtonDismiss } from './ButtonDismiss-es.js';
|
|
7
7
|
|
|
8
8
|
var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
|
|
@@ -19,12 +19,12 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
|
|
|
19
19
|
const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
|
|
20
20
|
const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
|
|
21
21
|
const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
|
|
22
|
-
const popoverContent = (
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
const popoverContent = (React__default.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" }),
|
|
23
|
+
React__default.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
|
|
24
|
+
React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
|
|
25
25
|
children,
|
|
26
|
-
|
|
27
|
-
return
|
|
26
|
+
React__default.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" })));
|
|
27
|
+
return React__default.createElement(React__default.Fragment, null, open && ReactDOM__default.createPortal(popoverContent, document.body));
|
|
28
28
|
}
|
|
29
29
|
function buildModifiers(arrowElement) {
|
|
30
30
|
const modifiers = [
|
package/dist/ProgressBar-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
|
|
4
4
|
var styles = {"ProgressBar":"p9AgTzIbTwY-","SteppedProgressBar":"w8NAw4ZMB6g-","wrapper":"d4oS-DGtcKA-","spinning":"f58JiDXlkHA-"};
|
|
@@ -8,10 +8,10 @@ var sizes = {"smaller":"dylWWgubHwM-","small":"z92YJQrscvI-","base":"DKfNM1to61A
|
|
|
8
8
|
function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
|
|
9
9
|
const steppedProgressBarClassName = classnames(styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
|
|
10
10
|
const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
|
|
11
|
-
return (
|
|
11
|
+
return (React__default.createElement("div", { role: "progressbar", className: styles.wrapper, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
|
|
12
12
|
const step = index + 1;
|
|
13
13
|
const value = step <= currentStep ? 100 : 0;
|
|
14
|
-
return (
|
|
14
|
+
return (React__default.createElement("progress", { key: step, className: steppedProgressBarClassName, value: value, "data-testid": "progress-step" },
|
|
15
15
|
value,
|
|
16
16
|
"%"));
|
|
17
17
|
})));
|
|
@@ -21,9 +21,9 @@ function ProgressBar({ currentStep, totalSteps, size = "base", variation = "prog
|
|
|
21
21
|
const percentage = (currentStep / totalSteps) * 100;
|
|
22
22
|
const progressBarClassName = classnames(styles.ProgressBar, sizes[size]);
|
|
23
23
|
if (variation === "stepped") {
|
|
24
|
-
return (
|
|
24
|
+
return (React__default.createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size }));
|
|
25
25
|
}
|
|
26
|
-
return (
|
|
26
|
+
return (React__default.createElement("progress", { className: progressBarClassName, max: totalSteps, value: currentStep },
|
|
27
27
|
percentage,
|
|
28
28
|
"%"));
|
|
29
29
|
}
|
package/dist/RadioGroup-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useId } from 'react';
|
|
2
2
|
import { T as Text } from './Text-es.js';
|
|
3
3
|
|
|
4
4
|
var styles = {"radioGroup":"KZfSK2vhTyI-","input":"w1Rr3bk2t5g-","label":"gN41T07x0l0-","description":"Ke2WKKuvmRo-","children":"JZOA-psW-FI-","spinning":"_54fzkHxkCbs-"};
|
|
@@ -8,24 +8,24 @@ var styles = {"radioGroup":"KZfSK2vhTyI-","input":"w1Rr3bk2t5g-","label":"gN41T0
|
|
|
8
8
|
* the real RadioOption, look at InternalRadioOption
|
|
9
9
|
*/
|
|
10
10
|
function RadioOption({ children }) {
|
|
11
|
-
return
|
|
11
|
+
return React__default.createElement(React__default.Fragment, null, children);
|
|
12
12
|
}
|
|
13
13
|
function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
|
|
14
14
|
const inputId = `${value.toString()}_${useId()}`;
|
|
15
15
|
const shouldRenderIndependentChildren = label && children;
|
|
16
|
-
return (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
description && (
|
|
20
|
-
|
|
21
|
-
shouldRenderIndependentChildren && (
|
|
16
|
+
return (React__default.createElement("div", null,
|
|
17
|
+
React__default.createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
|
|
18
|
+
React__default.createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
|
|
19
|
+
description && (React__default.createElement("div", { className: styles.description, id: `${inputId}_description` },
|
|
20
|
+
React__default.createElement(Text, { variation: "subdued", size: "small" }, description))),
|
|
21
|
+
shouldRenderIndependentChildren && (React__default.createElement("div", { className: styles.children, id: `${inputId}_children` }, children))));
|
|
22
22
|
function handleChange() {
|
|
23
23
|
onChange(value);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
function RadioGroup({ children, value, ariaLabel, onChange, name = useId(), }) {
|
|
28
|
-
return (
|
|
28
|
+
return (React__default.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default.Children.map(children, option => (React__default.createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
|
|
29
29
|
function handleChange(newValue) {
|
|
30
30
|
if (newValue !== value) {
|
|
31
31
|
onChange(newValue);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { D as DurationPeriod, c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, a as WeeklySelect, i as isMonthly, M as MonthlySelect, t as typeInitialStateMap } from './DayOfMonthSelect-es.js';
|
|
3
3
|
import { T as Text } from './Text-es.js';
|
|
4
4
|
import 'classnames';
|
|
@@ -13,22 +13,22 @@ function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange
|
|
|
13
13
|
const onChangeWeekDays = (next) => {
|
|
14
14
|
onChange(Object.assign(Object.assign({}, recurrenceRule), { weekDays: next }));
|
|
15
15
|
};
|
|
16
|
-
return (
|
|
16
|
+
return (React__default.createElement(WeeklySelect, { disabled: disabled, selectedDays: recurrenceRule.weekDays, onChange: onChangeWeekDays }));
|
|
17
17
|
}
|
|
18
18
|
case DurationPeriod.WeekDayOfMonth: {
|
|
19
19
|
const onChangeWeekDayOfMonth = (next) => {
|
|
20
20
|
onChange(Object.assign(Object.assign({}, recurrenceRule), { dayOfWeek: next }));
|
|
21
21
|
};
|
|
22
|
-
return (
|
|
22
|
+
return (React__default.createElement(MonthlyDayOfWeekSelect, { disabled: disabled, onChange: onChangeWeekDayOfMonth, selectedWeeks: recurrenceRule.dayOfWeek }));
|
|
23
23
|
}
|
|
24
24
|
case DurationPeriod.DayOfMonth: {
|
|
25
25
|
const onChangeDayOfMonth = (next) => {
|
|
26
26
|
onChange(Object.assign(Object.assign({}, recurrenceRule), { date: next }));
|
|
27
27
|
};
|
|
28
|
-
return (
|
|
28
|
+
return (React__default.createElement(DayOfMonthSelect, { disabled: disabled, selectedDays: recurrenceRule.date, onChange: onChangeDayOfMonth }));
|
|
29
29
|
}
|
|
30
30
|
default:
|
|
31
|
-
return
|
|
31
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -44,20 +44,20 @@ function RecurringSelect({ value, disabled = false, onChange, }) {
|
|
|
44
44
|
const hasExtraFrequencyDescriptor = value.type === DurationPeriod.WeekDayOfMonth ||
|
|
45
45
|
value.type === DurationPeriod.DayOfMonth ||
|
|
46
46
|
value.type === DurationPeriod.Week;
|
|
47
|
-
return (
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
hasExtraFrequencyDescriptor && (
|
|
59
|
-
isMonthly(value) && (
|
|
60
|
-
|
|
47
|
+
return (React__default.createElement(Content, null,
|
|
48
|
+
React__default.createElement("div", { className: styles.container },
|
|
49
|
+
React__default.createElement(Text, { variation: disabledTextVariation }, "Every"),
|
|
50
|
+
React__default.createElement("div", { className: styles.fullWidthWrapper },
|
|
51
|
+
React__default.createElement(InputGroup, { flowDirection: "horizontal" },
|
|
52
|
+
React__default.createElement(InputNumber, { disabled: disabled, name: "schedule-recurrence-interval", value: value.interval, min: 1, maxLength: 3, onChange: onChangeInterval }),
|
|
53
|
+
React__default.createElement(Select, { disabled: disabled, value: value.type, onChange: onChangeType, name: "schedule-recurrence-type" },
|
|
54
|
+
React__default.createElement(SelectOption, { value: DurationPeriod.Day }, "Day(s)"),
|
|
55
|
+
React__default.createElement(SelectOption, { value: DurationPeriod.Week }, "Week(s)"),
|
|
56
|
+
React__default.createElement(SelectOption, { value: monthlySelectOptionValue }, "Month(s)"),
|
|
57
|
+
React__default.createElement(SelectOption, { value: DurationPeriod.Year }, "Year(s)")))),
|
|
58
|
+
hasExtraFrequencyDescriptor && (React__default.createElement(Text, { variation: disabledTextVariation }, "on"))),
|
|
59
|
+
isMonthly(value) && (React__default.createElement(MonthlySelect, { disabled: disabled, onChange: onChangeType, selectedMonthOption: value.type })),
|
|
60
|
+
React__default.createElement(CurrentRecurrenceComponent, { disabled: disabled, recurrenceRule: value, onChange: onChange })));
|
|
61
61
|
function onChangeInterval(interval) {
|
|
62
62
|
onChange(Object.assign(Object.assign({}, value), { interval }));
|
|
63
63
|
}
|