@jobber/components 6.26.0 → 6.26.1
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-es.js +38 -38
- 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.mjs +9 -9
- package/dist/InputEmail-es.js +2 -2
- package/dist/InputFile-es.js +20 -20
- package/dist/InputGroup-es.js +4 -4
- package/dist/InputNumber-es.js +2 -2
- package/dist/InputPassword-es.js +2 -2
- package/dist/InputPhoneNumber-es.js +6 -6
- package/dist/InputText/index.mjs +12 -12
- package/dist/InputTime-es.js +2 -2
- 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-es.js +3 -3
- 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/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 +0 -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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState, useEffect, Children } from 'react';
|
|
2
2
|
import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
|
|
3
3
|
import { tokens } from '@jobber/design';
|
|
4
4
|
|
|
@@ -67,9 +67,9 @@ const transitions = {
|
|
|
67
67
|
function AnimatedPresence(props) {
|
|
68
68
|
const shouldReduceMotion = useReducedMotion();
|
|
69
69
|
if (shouldReduceMotion) {
|
|
70
|
-
return
|
|
70
|
+
return React__default.createElement(React__default.Fragment, null, props.children);
|
|
71
71
|
}
|
|
72
|
-
return
|
|
72
|
+
return React__default.createElement(InternalAnimatedPresence, Object.assign({}, props));
|
|
73
73
|
}
|
|
74
74
|
function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
|
|
75
75
|
const transitionVariation = transitions[transition];
|
|
@@ -82,7 +82,7 @@ function InternalAnimatedPresence({ transition = "fromTop", initial = false, chi
|
|
|
82
82
|
useEffect(() => {
|
|
83
83
|
setLastChildIndex(childCount - 1);
|
|
84
84
|
}, [childCount]);
|
|
85
|
-
return (
|
|
85
|
+
return (React__default.createElement(AnimatePresence, { initial: initial, mode: "popLayout" }, Children.map(children, (child, i) => child && (React__default.createElement(motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
|
|
86
86
|
duration: TIMING_BASE,
|
|
87
87
|
delay: generateDelayTime(i),
|
|
88
88
|
} }, child)))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState } from 'react';
|
|
2
2
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
3
3
|
import { I as Icon } from './Icon-es.js';
|
|
4
4
|
|
|
@@ -45,8 +45,8 @@ function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromB
|
|
|
45
45
|
const [ref, setRef] = useState(null);
|
|
46
46
|
const isSwitchingBetweenIcons = initialChild.type === Icon && switchTo.type === Icon;
|
|
47
47
|
const { key, transition, child, duration } = getChildData();
|
|
48
|
-
return (
|
|
49
|
-
|
|
48
|
+
return (React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
|
|
49
|
+
React__default.createElement(motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
|
|
50
50
|
function getDisplayValue() {
|
|
51
51
|
if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
|
|
52
52
|
return window.getComputedStyle(ref.firstElementChild).display;
|
|
@@ -87,7 +87,7 @@ function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromB
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
|
|
90
|
-
return (
|
|
90
|
+
return (React__default.createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default.createElement(Icon, { name: initialIcon }), switchTo: React__default.createElement(Icon, { name: switchToIcon }) }));
|
|
91
91
|
};
|
|
92
92
|
|
|
93
93
|
export { AnimatedSwitcher as A };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { tokens, darkTokens } from '@jobber/design';
|
|
2
|
-
import
|
|
2
|
+
import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
|
|
3
3
|
import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
|
|
4
4
|
import { e as eq_1, b as _Stack } from './identity-es.js';
|
|
5
5
|
import { _ as _baseAssignValue } from './_baseAssignValue-es.js';
|
|
@@ -350,9 +350,9 @@ const actualDarkTokens = merge$1({}, tokens, darkTokens);
|
|
|
350
350
|
const AtlantisThemeContext = createContext(atlantisThemeContextDefaultValues);
|
|
351
351
|
function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
|
|
352
352
|
if (dangerouslyOverrideTheme) {
|
|
353
|
-
return (
|
|
353
|
+
return (React__default.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
|
|
354
354
|
}
|
|
355
|
-
return (
|
|
355
|
+
return (React__default.createElement(InternalDynamicThemeProvider, null, children));
|
|
356
356
|
}
|
|
357
357
|
function InternalDynamicThemeProvider({ children }) {
|
|
358
358
|
var _a;
|
|
@@ -371,18 +371,18 @@ function InternalDynamicThemeProvider({ children }) {
|
|
|
371
371
|
globalThis.window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
|
|
372
372
|
};
|
|
373
373
|
}, [handleThemeChangeEvent]);
|
|
374
|
-
return (
|
|
374
|
+
return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
|
|
375
375
|
theme: internalTheme,
|
|
376
376
|
tokens: currentTokens,
|
|
377
377
|
} }, children));
|
|
378
378
|
}
|
|
379
379
|
function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, }) {
|
|
380
380
|
const currentTokens = dangerouslyOverrideTheme === "dark" ? actualDarkTokens : tokens;
|
|
381
|
-
return (
|
|
381
|
+
return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
|
|
382
382
|
theme: dangerouslyOverrideTheme,
|
|
383
383
|
tokens: currentTokens,
|
|
384
384
|
} },
|
|
385
|
-
|
|
385
|
+
React__default.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper }, children)));
|
|
386
386
|
}
|
|
387
387
|
function useAtlantisTheme() {
|
|
388
388
|
return useContext(AtlantisThemeContext);
|
package/dist/Autocomplete-es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
|
|
2
|
-
import
|
|
2
|
+
import React__default, { useState, useCallback, useEffect, forwardRef, useMemo, useRef } from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { u as useIsMounted_2 } from './useIsMounted-es.js';
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
@@ -33,26 +33,26 @@ function useRepositionMenu(attachTo, visible = false) {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
function BaseAutocompleteMenuWrapperInternal({ setMenuRef, popperStyles, attributes, targetWidth, visible, children, }) {
|
|
36
|
-
return (
|
|
36
|
+
return (React__default.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }), "data-elevation": "elevated" }, attributes.popper), children));
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
39
|
* Provides a wrapper for the Autocomplete menu that handles positioning and visibility.
|
|
40
40
|
* @param attachTo - The element that the menu should be attached to.
|
|
41
41
|
*/
|
|
42
42
|
function useAutocompleteMenu({ attachTo, }) {
|
|
43
|
-
const [menuRef, setMenuRef] =
|
|
43
|
+
const [menuRef, setMenuRef] = React__default.useState(null);
|
|
44
44
|
const AutocompleteMenuWrapper = useCallback(({ children, visible, }) => {
|
|
45
45
|
const menuPopperProps = useRepositionMenu(attachTo, visible);
|
|
46
46
|
useEffect(() => {
|
|
47
47
|
setMenuRef(menuPopperProps.menuRef);
|
|
48
48
|
}, [menuPopperProps.menuRef]);
|
|
49
|
-
return (
|
|
49
|
+
return (React__default.createElement(BaseAutocompleteMenuWrapper, { attributes: menuPopperProps.attributes, popperStyles: menuPopperProps.styles, setMenuRef: menuPopperProps.setMenuRef, targetWidth: menuPopperProps.targetWidth, visible: visible }, children));
|
|
50
50
|
}, [attachTo]);
|
|
51
51
|
return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
|
|
52
52
|
}
|
|
53
53
|
function BaseAutocompleteMenuWrapper(props) {
|
|
54
54
|
const mounted = useIsMounted_2();
|
|
55
|
-
const menu =
|
|
55
|
+
const menu = React__default.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
|
|
56
56
|
return mounted.current ? createPortal(menu, document.body) : menu;
|
|
57
57
|
}
|
|
58
58
|
|
|
@@ -73,35 +73,35 @@ function isOptionGroup(option) {
|
|
|
73
73
|
*/
|
|
74
74
|
function MenuOption({ isHighlighted, option, onOptionSelect, isSelected, addSeparators, UNSAFE_className = {}, UNSAFE_style = {}, }) {
|
|
75
75
|
if (isOptionGroup(option)) {
|
|
76
|
-
return (
|
|
76
|
+
return (React__default.createElement(MenuGroupOptions, { UNSAFE_className: UNSAFE_className.groupOption, option: option, UNSAFE_style: UNSAFE_style.groupOption }));
|
|
77
77
|
}
|
|
78
|
-
return (
|
|
79
|
-
|
|
78
|
+
return (React__default.createElement(BaseMenuOption, { UNSAFE_className: UNSAFE_className.option, UNSAFE_style: UNSAFE_style.option, option: option, isHighlighted: isHighlighted, onOptionSelect: onOptionSelect, addSeparators: addSeparators },
|
|
79
|
+
React__default.createElement(MenuOptionContent, { option: option, isSelected: isSelected, UNSAFE_className: UNSAFE_className.content, UNSAFE_style: UNSAFE_style.content })));
|
|
80
80
|
}
|
|
81
81
|
function MenuOptionContent({ option, isSelected, UNSAFE_className = {}, UNSAFE_style = {}, }) {
|
|
82
82
|
const iconClassName = classnames(styles.icon, UNSAFE_className.icon);
|
|
83
83
|
const textClassName = classnames(styles.text, UNSAFE_className.text);
|
|
84
84
|
const labelClassName = classnames(styles.label, UNSAFE_className.label);
|
|
85
85
|
const detailsClassName = classnames(styles.details, UNSAFE_className.details);
|
|
86
|
-
return (
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
option.description !== undefined && (
|
|
92
|
-
option.details !== undefined && (
|
|
93
|
-
|
|
86
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
87
|
+
React__default.createElement("div", { className: iconClassName, style: UNSAFE_style.icon }, isSelected && React__default.createElement(Icon, { name: "checkmark", size: "small" })),
|
|
88
|
+
React__default.createElement("div", { className: textClassName, style: UNSAFE_style.text },
|
|
89
|
+
React__default.createElement("div", { className: labelClassName, style: UNSAFE_style.label },
|
|
90
|
+
React__default.createElement(Text, null, option.label),
|
|
91
|
+
option.description !== undefined && (React__default.createElement(Text, { variation: "subdued" }, option.description))),
|
|
92
|
+
option.details !== undefined && (React__default.createElement("div", { className: detailsClassName, style: UNSAFE_style.details },
|
|
93
|
+
React__default.createElement(Text, null, option.details))))));
|
|
94
94
|
}
|
|
95
95
|
/**
|
|
96
96
|
* The rendering of the default MenuGroupOption
|
|
97
97
|
*/
|
|
98
98
|
function MenuGroupOptions({ option, UNSAFE_className = {}, UNSAFE_style = {}, }) {
|
|
99
|
-
return (
|
|
100
|
-
|
|
99
|
+
return (React__default.createElement(BaseMenuGroupOption, { UNSAFE_className: UNSAFE_className.heading, UNSAFE_style: UNSAFE_style.heading },
|
|
100
|
+
React__default.createElement(Heading, { level: 5 }, option.label)));
|
|
101
101
|
}
|
|
102
102
|
function BaseMenuGroupOption({ children, UNSAFE_className = "", UNSAFE_style = {}, }) {
|
|
103
103
|
const headingClassName = classnames(styles.heading, UNSAFE_className);
|
|
104
|
-
return (
|
|
104
|
+
return (React__default.createElement("div", { className: headingClassName, style: UNSAFE_style }, children));
|
|
105
105
|
}
|
|
106
106
|
/**
|
|
107
107
|
* Renders the base option component. The component takes children and renders them inside a button.
|
|
@@ -111,7 +111,7 @@ function BaseMenuOption({ option, isHighlighted, onOptionSelect, addSeparators,
|
|
|
111
111
|
[styles.active]: isHighlighted,
|
|
112
112
|
[styles.separator]: addSeparators,
|
|
113
113
|
}, UNSAFE_className);
|
|
114
|
-
return (
|
|
114
|
+
return (React__default.createElement("button", { role: "option", type: "button", className: optionClass, onMouseDown: onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect.bind(undefined, option), style: UNSAFE_style }, children));
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
var KeyboardAction;
|
|
@@ -202,18 +202,18 @@ function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visibl
|
|
|
202
202
|
visible,
|
|
203
203
|
menuRef,
|
|
204
204
|
});
|
|
205
|
-
return (
|
|
206
|
-
return (
|
|
205
|
+
return (React__default.createElement(BaseAutocompleteMenuWrapper, { setMenuRef, popperStyles, attributes, targetWidth, visible }, options === null || options === void 0 ? void 0 : options.map((option, index) => {
|
|
206
|
+
return (React__default.createElement(MenuOption, { key: index, option: option, isHighlighted: index === highlightedIndex, onOptionSelect: onOptionSelect, isSelected: isOptionSelected(selectedOption, option), addSeparators: addSeparators }));
|
|
207
207
|
})));
|
|
208
208
|
}
|
|
209
209
|
|
|
210
210
|
function Menu({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }) {
|
|
211
211
|
if (customRenderMenu) {
|
|
212
|
-
return (
|
|
212
|
+
return (React__default.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
|
|
213
213
|
}
|
|
214
214
|
if (!inputFocused || !options.length)
|
|
215
215
|
return null;
|
|
216
|
-
return (
|
|
216
|
+
return (React__default.createElement(DefaultMenu, { attachTo: attachTo, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption, visible: inputFocused }));
|
|
217
217
|
}
|
|
218
218
|
/**
|
|
219
219
|
* Renders the custom Menu for the Autocomplete component.
|
|
@@ -252,9 +252,9 @@ function AutocompleteInternal(_a, ref) {
|
|
|
252
252
|
var _a;
|
|
253
253
|
updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
|
|
254
254
|
}, [value]);
|
|
255
|
-
return (
|
|
256
|
-
|
|
257
|
-
|
|
255
|
+
return (React__default.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
|
|
256
|
+
React__default.createElement(InputText, Object.assign({ ref: mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
|
|
257
|
+
React__default.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
|
|
258
258
|
function updateInput(newText) {
|
|
259
259
|
setInputText(newText);
|
|
260
260
|
if (newText === "") {
|
package/dist/Avatar-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import Color from 'color';
|
|
4
4
|
import { I as Icon } from './Icon-es.js';
|
|
@@ -52,16 +52,16 @@ function Avatar({ imageUrl, name, initials, size = "base", color, }) {
|
|
|
52
52
|
[styles.hasBorder]: imageUrl && color,
|
|
53
53
|
[styles.isDark]: shouldBeDark,
|
|
54
54
|
});
|
|
55
|
-
return (
|
|
55
|
+
return (React__default.createElement("div", { className: className, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size }))));
|
|
56
56
|
}
|
|
57
57
|
function Initials({ initials, dark = false, iconSize = "base", }) {
|
|
58
58
|
if (!initials) {
|
|
59
|
-
return (
|
|
59
|
+
return (React__default.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
|
|
60
60
|
}
|
|
61
61
|
const className = classnames(styles.initials, {
|
|
62
62
|
[styles.smallInitials]: initials.length > 2,
|
|
63
63
|
});
|
|
64
|
-
return
|
|
64
|
+
return React__default.createElement("span", { className: className }, initials.substr(0, 3));
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
export { Avatar as A };
|
package/dist/Banner-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useState } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { u as useResizeObserver } from './useResizeObserver-es.js';
|
|
4
4
|
import { s as styles, B as BannerIcon } from './BannerIcon-es.js';
|
|
@@ -30,15 +30,15 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
|
|
|
30
30
|
});
|
|
31
31
|
if (!visible)
|
|
32
32
|
return null;
|
|
33
|
-
return (
|
|
34
|
-
|
|
35
|
-
bannerIcon &&
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
primaryAction && (
|
|
39
|
-
|
|
40
|
-
dismissible && (
|
|
41
|
-
|
|
33
|
+
return (React__default.createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
|
|
34
|
+
React__default.createElement("div", { className: styles.bannerContent },
|
|
35
|
+
bannerIcon && React__default.createElement(BannerIcon, { icon: bannerIcon, type: type }),
|
|
36
|
+
React__default.createElement("div", { className: styles.bannerChildren },
|
|
37
|
+
React__default.createElement(BannerChildren, null, children)),
|
|
38
|
+
primaryAction && (React__default.createElement("div", { className: styles.bannerAction },
|
|
39
|
+
React__default.createElement(Button, Object.assign({}, primaryAction))))),
|
|
40
|
+
dismissible && (React__default.createElement("div", { className: styles.closeButton },
|
|
41
|
+
React__default.createElement(ButtonDismiss, { ariaLabel: "Dismiss notification", onClick: handleClose })))));
|
|
42
42
|
function handleClose() {
|
|
43
43
|
if (typeof controlledVisiblity === "undefined") {
|
|
44
44
|
setShowBanner(!showBanner);
|
|
@@ -60,11 +60,11 @@ function getBannerIcon(type) {
|
|
|
60
60
|
}
|
|
61
61
|
function BannerChildren({ children, }) {
|
|
62
62
|
if (!children)
|
|
63
|
-
return
|
|
63
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
64
64
|
if (children && typeof children === "string") {
|
|
65
|
-
return
|
|
65
|
+
return React__default.createElement(Text, null, children);
|
|
66
66
|
}
|
|
67
|
-
return
|
|
67
|
+
return React__default.createElement(React__default.Fragment, null, children);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
export { Banner as B };
|
package/dist/BannerIcon-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { I as Icon } from './Icon-es.js';
|
|
4
4
|
|
|
@@ -7,8 +7,8 @@ var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9O
|
|
|
7
7
|
var iconStyles = {"success":"RRQ5CQj05jU-","error":"rLsOR1QiHC8-","warning":"KqPf0zuN2fg-","notice":"M3q29PUUYRM-","spinning":"ad7f3jNTQXM-"};
|
|
8
8
|
|
|
9
9
|
function BannerIcon({ icon, type }) {
|
|
10
|
-
return (
|
|
11
|
-
|
|
10
|
+
return (React__default.createElement("span", { className: classnames(styles.iconWrapper, iconStyles[type]) },
|
|
11
|
+
React__default.createElement(Icon, { name: icon, color: "surface", size: "small" })));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
export { BannerIcon as B, styles as s };
|
package/dist/Body-es.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { formatCurrency } from '@jobber/formatters';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
|
|
5
5
|
var styles$1 = {"table":"_7PagpWEko2U-","row":"_9OHT36DJGCo-","header":"YPDzOWGHgkk-","footer":"cv4Izfe0MWI-","spinning":"SBtILBzIaGI-"};
|
|
6
6
|
|
|
7
7
|
function Table({ children }) {
|
|
8
|
-
return
|
|
8
|
+
return React__default.createElement("table", { className: styles$1.table }, children);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
function Row({ children }) {
|
|
12
|
-
return
|
|
12
|
+
return React__default.createElement("tr", { className: styles$1.row }, children);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
var styles = {"cell":"EJeK329S0z0-","left":"WUrWSkqXHM4-","center":"Zt8BVgeQWjA-","right":"D-xShQGl-Us-","numeric":"kX0wxCTtfyc-","spinning":"ITB007fAKH8-"};
|
|
16
16
|
|
|
17
17
|
function Cell({ children, align = "left" }) {
|
|
18
18
|
const className = classnames(styles.cell, styles[align]);
|
|
19
|
-
return
|
|
19
|
+
return React__default.createElement("td", { className: className }, children);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
function CellNumeric({ value }) {
|
|
23
|
-
return (
|
|
24
|
-
|
|
23
|
+
return (React__default.createElement(Cell, { align: "right" },
|
|
24
|
+
React__default.createElement("span", { className: styles.numeric }, value.toString())));
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
function CellCurrency({ value, currency = undefined, }) {
|
|
28
|
-
return
|
|
28
|
+
return React__default.createElement(CellNumeric, { value: formatCurrency(value, currency) });
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
function Header({ children }) {
|
|
32
|
-
return (
|
|
33
|
-
|
|
32
|
+
return (React__default.createElement("thead", { className: styles$1.header },
|
|
33
|
+
React__default.createElement(Row, null, children)));
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
function Footer({ children }) {
|
|
37
|
-
return (
|
|
38
|
-
|
|
37
|
+
return (React__default.createElement("tfoot", { className: styles$1.footer },
|
|
38
|
+
React__default.createElement(Row, null, children)));
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
function Body({ children }) {
|
|
42
|
-
return
|
|
42
|
+
return React__default.createElement("tbody", null, children);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
export { Body as B, Cell as C, Footer as F, Header as H, Row as R, Table as T, CellNumeric as a, CellCurrency as b };
|
package/dist/Box-es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __rest } from './tslib.es6-es.js';
|
|
2
|
-
import
|
|
2
|
+
import React__default from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
|
|
5
5
|
var borderStyles = {"border":"Y4Fm1wA7Z6c-","border-base":"GWX6qFcouh8-","border-top":"_20qfwUymZHI-","border-right":"_80vVV1kYAXU-","border-bottom":"_3yLCo9rAEyY-","border-left":"Sejzll1Lw3U-","spinning":"hgVY5aoAemU-"};
|
|
@@ -121,7 +121,7 @@ var radiusStyles = {"radius-small":"kCKg-JJTRO8-","radius-base":"_235nMwtuWSw-",
|
|
|
121
121
|
|
|
122
122
|
function Box(_a) {
|
|
123
123
|
var { alignItems, alignSelf, as: Tag = "div", background, border, borderColor, children, direction, gap, height = "auto", justifyContent, margin, overflow, padding, position = "relative", preserveWhiteSpace, radius, width = "auto" } = _a, props = __rest(_a, ["alignItems", "alignSelf", "as", "background", "border", "borderColor", "children", "direction", "gap", "height", "justifyContent", "margin", "overflow", "padding", "position", "preserveWhiteSpace", "radius", "width"]);
|
|
124
|
-
return (
|
|
124
|
+
return (React__default.createElement(Tag, Object.assign({}, props, { className: classnames(styles.box, preserveWhiteSpace && styles["preserve-white-space"], getPaddingClassNames(padding), getMarginClassNames(margin), getHeightClassName(height), getWidthClassName(width), getBorderClassNames(border), radius && radiusStyles[`radius-${radius}`], gap && gapStyles[`gap-${gap}`]), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getPaddingVars(padding)), getMarginVars(margin)), getHeightVars(height)), getWidthVars(width)), getBorderVars(border)), (background && { backgroundColor: `var(--color-${background})` })), (borderColor && { borderColor: `var(--color-${borderColor})` })), { alignItems,
|
|
125
125
|
alignSelf, flexDirection: direction, justifyContent,
|
|
126
126
|
overflow,
|
|
127
127
|
position }) }), children));
|
package/dist/Button-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { createContext, useContext } from 'react';
|
|
2
2
|
import { Link } from 'react-router-dom';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { _ as __rest } from './tslib.es6-es.js';
|
|
@@ -11,7 +11,7 @@ const ButtonContext = createContext({
|
|
|
11
11
|
size: "base",
|
|
12
12
|
});
|
|
13
13
|
function ButtonProvider({ children, size = "base", }) {
|
|
14
|
-
return (
|
|
14
|
+
return (React__default.createElement(ButtonContext.Provider, { value: { size } }, children));
|
|
15
15
|
}
|
|
16
16
|
function useButton() {
|
|
17
17
|
return useContext(ButtonContext);
|
|
@@ -38,10 +38,10 @@ function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variati
|
|
|
38
38
|
* @deprecated Used composed solution instead
|
|
39
39
|
*/
|
|
40
40
|
function ButtonContent({ label, icon, size = "base", iconOnRight = false, }) {
|
|
41
|
-
return (
|
|
42
|
-
icon && !iconOnRight &&
|
|
43
|
-
label &&
|
|
44
|
-
icon && iconOnRight &&
|
|
41
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
42
|
+
icon && !iconOnRight && React__default.createElement(ButtonIcon, { name: icon, size: size }),
|
|
43
|
+
label && React__default.createElement(ButtonLabel, { size: size }, label),
|
|
44
|
+
icon && iconOnRight && React__default.createElement(ButtonIcon, { name: icon, size: size })));
|
|
45
45
|
}
|
|
46
46
|
function getTypeSizes(size) {
|
|
47
47
|
switch (size) {
|
|
@@ -57,19 +57,19 @@ function ButtonIcon(_a) {
|
|
|
57
57
|
var { size: sizeProp } = _a, props = __rest(_a, ["size"]);
|
|
58
58
|
const { size: contextSize } = useButton();
|
|
59
59
|
const size = sizeProp || contextSize;
|
|
60
|
-
return
|
|
60
|
+
return React__default.createElement(Icon, Object.assign({}, props, { size: size }));
|
|
61
61
|
}
|
|
62
62
|
function ButtonLabel(_a) {
|
|
63
63
|
var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = __rest(_a, ["element", "fontWeight", "fontFamily", "size"]);
|
|
64
64
|
const { size: contextSize } = useButton();
|
|
65
65
|
const size = sizeProp || contextSize;
|
|
66
|
-
return (
|
|
66
|
+
return (React__default.createElement(Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
function Button(props) {
|
|
70
70
|
const { size } = props;
|
|
71
|
-
return (
|
|
72
|
-
|
|
71
|
+
return (React__default.createElement(ButtonProvider, { size: size },
|
|
72
|
+
React__default.createElement(ButtonWrapper, Object.assign({}, props))));
|
|
73
73
|
}
|
|
74
74
|
function ButtonWrapper(props) {
|
|
75
75
|
const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, } = props;
|
|
@@ -77,12 +77,12 @@ function ButtonWrapper(props) {
|
|
|
77
77
|
const buttonType = submit ? "submit" : "button";
|
|
78
78
|
const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: combined, disabled,
|
|
79
79
|
id }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
|
|
80
|
-
const buttonInternals = props.children ||
|
|
80
|
+
const buttonInternals = props.children || React__default.createElement(ButtonContent, Object.assign({}, props));
|
|
81
81
|
if (to) {
|
|
82
|
-
return (
|
|
82
|
+
return (React__default.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
|
|
83
83
|
}
|
|
84
84
|
const Tag = url ? "a" : "button";
|
|
85
|
-
return
|
|
85
|
+
return React__default.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
|
|
86
86
|
}
|
|
87
87
|
Button.Label = ButtonLabel;
|
|
88
88
|
Button.Icon = ButtonIcon;
|
package/dist/ButtonDismiss-es.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
import { B as Button } from './Button-es.js';
|
|
3
3
|
import 'classnames';
|
|
4
4
|
|
|
5
5
|
function ButtonDismiss({ onClick, ariaLabel }) {
|
|
6
|
-
return (
|
|
6
|
+
return (React__default.createElement(Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
export { ButtonDismiss as B };
|
package/dist/Card-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { useRef } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { H as Heading } from './Heading-es.js';
|
|
4
4
|
import { B as Button } from './Button-es.js';
|
|
@@ -18,7 +18,7 @@ const SPACEBAR_KEY = " ";
|
|
|
18
18
|
*/
|
|
19
19
|
function CardClickable({ className, onClick, children, }) {
|
|
20
20
|
const cardRef = useRef();
|
|
21
|
-
return (
|
|
21
|
+
return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
|
|
22
22
|
function isCardFocused() {
|
|
23
23
|
return document.activeElement === cardRef.current;
|
|
24
24
|
}
|
|
@@ -43,43 +43,43 @@ function CardClickable({ className, onClick, children, }) {
|
|
|
43
43
|
*/
|
|
44
44
|
function CardHeader({ title, header, }) {
|
|
45
45
|
const heading = title || header;
|
|
46
|
-
if (
|
|
47
|
-
return
|
|
46
|
+
if (React__default.isValidElement(heading))
|
|
47
|
+
return React__default.createElement(React__default.Fragment, null, heading);
|
|
48
48
|
if (heading) {
|
|
49
49
|
const titleString = typeof heading === "string"
|
|
50
50
|
? heading
|
|
51
51
|
: heading.title;
|
|
52
|
-
return (
|
|
53
|
-
titleString &&
|
|
52
|
+
return (React__default.createElement("div", { className: styles.header },
|
|
53
|
+
titleString && React__default.createElement(Heading, { level: 2 }, titleString),
|
|
54
54
|
typeof heading === "object" &&
|
|
55
55
|
renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
|
|
56
56
|
}
|
|
57
|
-
return
|
|
57
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
58
58
|
}
|
|
59
59
|
function renderHeaderAction(action) {
|
|
60
60
|
if ((action === null || action === void 0 ? void 0 : action.type) === Button) {
|
|
61
61
|
const props = Object.assign(Object.assign({ type: "tertiary" }, action.props), { size: "small" });
|
|
62
|
-
return action &&
|
|
62
|
+
return action && React__default.createElement(Button, Object.assign({}, props));
|
|
63
63
|
}
|
|
64
64
|
if ((action === null || action === void 0 ? void 0 : action.type) === Menu) {
|
|
65
|
-
return action &&
|
|
65
|
+
return action && React__default.createElement(Menu, Object.assign({}, action.props));
|
|
66
66
|
}
|
|
67
|
-
return
|
|
67
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
function Card({ accent, header, children, onClick, title, url, external = false, elevation = "none", }) {
|
|
71
71
|
const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
|
|
72
|
-
const cardContent = (
|
|
73
|
-
|
|
72
|
+
const cardContent = (React__default.createElement(React__default.Fragment, null,
|
|
73
|
+
React__default.createElement(CardHeader, { title: title, header: header }),
|
|
74
74
|
children));
|
|
75
75
|
if (onClick) {
|
|
76
|
-
return (
|
|
76
|
+
return (React__default.createElement(CardClickable, { className: className, onClick: onClick }, cardContent));
|
|
77
77
|
}
|
|
78
78
|
else if (url) {
|
|
79
|
-
return (
|
|
79
|
+
return (React__default.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), cardContent));
|
|
80
80
|
}
|
|
81
81
|
else {
|
|
82
|
-
return
|
|
82
|
+
return React__default.createElement("div", { className: className }, cardContent);
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|