@algolia/satellite 1.5.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
- package/dist/cjs/Actions/Button/Button.tailwind.js +0 -12
- package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/cjs/Actions/index.d.ts +2 -0
- package/dist/cjs/Actions/index.js +18 -0
- package/dist/cjs/Fields/Field/Field.js +2 -2
- package/dist/cjs/Fields/Form/Form.d.ts +12 -10
- package/dist/cjs/Fields/Form/Form.js +50 -38
- package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
- package/dist/cjs/Fields/Form/FormContext.js +2 -2
- package/dist/cjs/Fields/Form/index.d.ts +4 -3
- package/dist/cjs/Fields/Form/index.js +31 -21
- package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
- package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
- package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
- package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
- package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
- package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
- package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
- package/dist/cjs/Fields/Form/stories/JSONForms.js +59 -56
- package/dist/cjs/Fields/Form/stories/MultiStep.js +706 -0
- package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
- package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
- package/dist/cjs/Fields/Form/useForm.js +3 -3
- package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/cjs/Icons/index.d.ts +1 -1
- package/dist/cjs/Icons/index.js +6 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/cjs/Indicators/index.d.ts +1 -0
- package/dist/cjs/Indicators/index.js +11 -0
- package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
- package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/cjs/styles/tailwind.config.js +1 -1
- package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/esm/Actions/Accordion/Accordion.js +139 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
- package/dist/esm/Actions/Button/Button.tailwind.js +0 -12
- package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/esm/Actions/index.d.ts +2 -0
- package/dist/esm/Actions/index.js +2 -2
- package/dist/esm/Fields/Field/Field.js +3 -3
- package/dist/esm/Fields/Form/Form.d.ts +12 -10
- package/dist/esm/Fields/Form/Form.js +52 -40
- package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
- package/dist/esm/Fields/Form/FormContext.js +1 -1
- package/dist/esm/Fields/Form/index.d.ts +4 -3
- package/dist/esm/Fields/Form/index.js +2 -3
- package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
- package/dist/esm/Fields/Form/stories/Complex.js +649 -643
- package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
- package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
- package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
- package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
- package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
- package/dist/esm/Fields/Form/stories/JSONForms.js +60 -57
- package/dist/esm/Fields/Form/stories/MultiStep.js +697 -0
- package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
- package/dist/esm/Fields/Form/useForm.d.ts +1 -1
- package/dist/esm/Fields/Form/useForm.js +3 -3
- package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/esm/Icons/index.d.ts +1 -1
- package/dist/esm/Icons/index.js +1 -1
- package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/esm/Indicators/index.d.ts +1 -0
- package/dist/esm/Indicators/index.js +2 -1
- package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/esm/Layout/Tables/Table/Table.js +4 -2
- package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/esm/styles/tailwind.config.js +1 -1
- package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/satellite.min.css +1 -1
- package/package.json +7 -1
@@ -0,0 +1,139 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
5
|
+
var _excluded = ["children", "className"],
|
6
|
+
_excluded2 = ["onChange", "multiple"],
|
7
|
+
_excluded3 = ["onChange", "multiple", "collapsible"];
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
10
|
+
import * as RadixAccordion from "@radix-ui/react-accordion";
|
11
|
+
import cx from "clsx";
|
12
|
+
import { forwardRef } from "react";
|
13
|
+
import { ChevronDownIcon } from "../../Icons";
|
14
|
+
import stl from "../../styles/helpers/satellitePrefixer";
|
15
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
16
|
+
var ICON_SIZE = 16;
|
17
|
+
var TRIGGER_ICON_SIZE = 20;
|
18
|
+
|
19
|
+
/**
|
20
|
+
* The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
|
21
|
+
*
|
22
|
+
* See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
|
23
|
+
*/
|
24
|
+
export var Accordion = function Accordion(_ref) {
|
25
|
+
var children = _ref.children,
|
26
|
+
className = _ref.className,
|
27
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
28
|
+
var sharedProps = {
|
29
|
+
className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"]))), className)
|
30
|
+
};
|
31
|
+
if (props.multiple) {
|
32
|
+
var _onChange = props.onChange,
|
33
|
+
_multiple = props.multiple,
|
34
|
+
_rest = _objectWithoutProperties(props, _excluded2);
|
35
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, _rest), sharedProps), {}, {
|
36
|
+
type: "multiple",
|
37
|
+
onValueChange: _onChange,
|
38
|
+
children: children
|
39
|
+
}));
|
40
|
+
}
|
41
|
+
var onChange = props.onChange,
|
42
|
+
multiple = props.multiple,
|
43
|
+
_props$collapsible = props.collapsible,
|
44
|
+
collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
|
45
|
+
rest = _objectWithoutProperties(props, _excluded3);
|
46
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
|
47
|
+
type: "single",
|
48
|
+
onValueChange: onChange,
|
49
|
+
collapsible: collapsible,
|
50
|
+
children: children
|
51
|
+
}));
|
52
|
+
};
|
53
|
+
Accordion.displayName = "Accordion";
|
54
|
+
var AccordionItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
55
|
+
var value = _ref2.value,
|
56
|
+
disabled = _ref2.disabled,
|
57
|
+
children = _ref2.children,
|
58
|
+
className = _ref2.className;
|
59
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Item, {
|
60
|
+
value: value,
|
61
|
+
disabled: disabled,
|
62
|
+
ref: ref,
|
63
|
+
className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group/accordion-item flex flex-col"]))), className),
|
64
|
+
children: children
|
65
|
+
});
|
66
|
+
});
|
67
|
+
AccordionItem.displayName = "AccordionItem";
|
68
|
+
var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
69
|
+
var children = _ref3.children,
|
70
|
+
description = _ref3.description,
|
71
|
+
Icon = _ref3.icon,
|
72
|
+
_ref3$iconClassName = _ref3.iconClassName,
|
73
|
+
iconClassName = _ref3$iconClassName === void 0 ? stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["typo-subdued"]))) : _ref3$iconClassName,
|
74
|
+
_ref3$iconBgClassName = _ref3.iconBgClassName,
|
75
|
+
iconBgClassName = _ref3$iconBgClassName === void 0 ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-100"]))) : _ref3$iconBgClassName,
|
76
|
+
meta = _ref3.meta,
|
77
|
+
triggerIcon = _ref3.triggerIcon,
|
78
|
+
triggerClassName = _ref3.triggerClassName,
|
79
|
+
className = _ref3.className;
|
80
|
+
var TriggerIcon = triggerIcon || ChevronDownIcon;
|
81
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Header, {
|
82
|
+
className: className,
|
83
|
+
children: /*#__PURE__*/_jsxs(RadixAccordion.Trigger, {
|
84
|
+
ref: ref,
|
85
|
+
className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["group/accordion-trigger flex gap-x-3 items-center w-full justify-between px-3.5 py-2.5 group-first/accordion-item:rounded-t group-last/accordion-item:rounded-b bg-white border-2 border-transparent focus-visible:outline-none focus-visible:border-accent-600 enabled:hover:bg-grey-50 motion-safe:transition-colors"]))), triggerClassName),
|
86
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
87
|
+
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center gap-x-3 grow"]))),
|
88
|
+
children: [Icon && /*#__PURE__*/_jsx("span", {
|
89
|
+
className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
|
90
|
+
"aria-hidden": true,
|
91
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
92
|
+
className: cx(iconClassName, stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["group-disabled/accordion-trigger:text-grey-300"])))),
|
93
|
+
width: ICON_SIZE,
|
94
|
+
height: ICON_SIZE
|
95
|
+
})
|
96
|
+
}), /*#__PURE__*/_jsxs("div", {
|
97
|
+
className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col gap-y-1 text-left grow"]))),
|
98
|
+
children: [/*#__PURE__*/_jsx("div", {
|
99
|
+
className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
|
100
|
+
children: children
|
101
|
+
}), typeof description !== "undefined" && /*#__PURE__*/_jsx("div", {
|
102
|
+
className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
|
103
|
+
children: description
|
104
|
+
})]
|
105
|
+
})]
|
106
|
+
}), /*#__PURE__*/_jsxs("div", {
|
107
|
+
className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center gap-x-2"]))),
|
108
|
+
children: [typeof meta !== "undefined" && /*#__PURE__*/_jsx("div", {
|
109
|
+
className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
|
110
|
+
children: meta
|
111
|
+
}), /*#__PURE__*/_jsx(TriggerIcon, {
|
112
|
+
className: cx(stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
|
113
|
+
// Don't rotate the trigger icon if it's a custom one.
|
114
|
+
!triggerIcon && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([" group-data-[state=open]/accordion-trigger:rotate-180 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out"])))),
|
115
|
+
width: TRIGGER_ICON_SIZE,
|
116
|
+
height: TRIGGER_ICON_SIZE,
|
117
|
+
"aria-hidden": true
|
118
|
+
})]
|
119
|
+
})]
|
120
|
+
})
|
121
|
+
});
|
122
|
+
});
|
123
|
+
AccordionHeader.displayName = "AccordionHeader";
|
124
|
+
var AccordionContent = /*#__PURE__*/forwardRef(function (_ref4, ref) {
|
125
|
+
var children = _ref4.children,
|
126
|
+
className = _ref4.className;
|
127
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Content, {
|
128
|
+
ref: ref,
|
129
|
+
className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
|
130
|
+
children: /*#__PURE__*/_jsx("div", {
|
131
|
+
className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["px-4 pt-2 pb-4"]))),
|
132
|
+
children: children
|
133
|
+
})
|
134
|
+
});
|
135
|
+
});
|
136
|
+
AccordionContent.displayName = "AccordionContent";
|
137
|
+
Accordion.Item = AccordionItem;
|
138
|
+
Accordion.Header = AccordionHeader;
|
139
|
+
Accordion.Content = AccordionContent;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import _plugin from "tailwindcss/plugin";
|
2
|
+
// @ts-check
|
3
|
+
var plugin = _plugin;
|
4
|
+
var accordionPlugin = plugin(function (_ref) {
|
5
|
+
var addComponents = _ref.addComponents;
|
6
|
+
var animationDuration = "300ms";
|
7
|
+
var animationEasing = "ease-out";
|
8
|
+
addComponents({
|
9
|
+
/* eslint-disable @algolia/stl/prefer-stl-helper */
|
10
|
+
"@media (prefers-reduced-motion: no-preference)": {
|
11
|
+
".accordion-content": {
|
12
|
+
"&[data-state='open']": {
|
13
|
+
animation: "stl-accordion-content-slide-down ".concat(animationDuration, " ").concat(animationEasing)
|
14
|
+
},
|
15
|
+
"&[data-state='closed']": {
|
16
|
+
animation: "stl-accordion-content-slide-up ".concat(animationDuration, " ").concat(animationEasing)
|
17
|
+
}
|
18
|
+
}
|
19
|
+
},
|
20
|
+
"@keyframes stl-accordion-content-slide-down": {
|
21
|
+
from: {
|
22
|
+
height: "0",
|
23
|
+
opacity: "0"
|
24
|
+
},
|
25
|
+
to: {
|
26
|
+
height: "var(--radix-accordion-content-height)",
|
27
|
+
opacity: "1"
|
28
|
+
}
|
29
|
+
},
|
30
|
+
"@keyframes stl-accordion-content-slide-up": {
|
31
|
+
from: {
|
32
|
+
height: "var(--radix-accordion-content-height)",
|
33
|
+
opacity: "1"
|
34
|
+
},
|
35
|
+
to: {
|
36
|
+
height: "0",
|
37
|
+
opacity: "0"
|
38
|
+
}
|
39
|
+
}
|
40
|
+
/* eslint-enable @algolia/stl/prefer-stl-helper */
|
41
|
+
});
|
42
|
+
});
|
43
|
+
export default accordionPlugin;
|
@@ -48,10 +48,6 @@ var buttonPlugin = plugin(function (_ref) {
|
|
48
48
|
backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
|
49
49
|
borderColor: theme("colors.grey.200")
|
50
50
|
},
|
51
|
-
"&:focus": {
|
52
|
-
backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
|
53
|
-
boxShadow: "0 2px 0 1px ".concat(theme("colors.shadow.5"))
|
54
|
-
},
|
55
51
|
"&:active, &.btn-active": {
|
56
52
|
borderColor: theme("colors.grey.200"),
|
57
53
|
boxShadow: "\n inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n ")
|
@@ -74,10 +70,6 @@ var buttonPlugin = plugin(function (_ref) {
|
|
74
70
|
backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
|
75
71
|
boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n ")
|
76
72
|
},
|
77
|
-
"&:focus": {
|
78
|
-
backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.600"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
|
79
|
-
boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n ")
|
80
|
-
},
|
81
73
|
"&:active, &.btn-active": {
|
82
74
|
backgroundColor: theme("colors.accent.700"),
|
83
75
|
borderColor: theme("colors.accent.800"),
|
@@ -101,10 +93,6 @@ var buttonPlugin = plugin(function (_ref) {
|
|
101
93
|
borderColor: theme("colors.red.800"),
|
102
94
|
boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n ")
|
103
95
|
},
|
104
|
-
"&:focus": {
|
105
|
-
backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.red.600"), " 0%, ").concat(theme("colors.red.700"), " 100%)"),
|
106
|
-
boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n ")
|
107
|
-
},
|
108
96
|
"&:active, &.btn-active": {
|
109
97
|
borderColor: theme("colors.red.800"),
|
110
98
|
boxShadow: "\n inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n ")
|
@@ -15,7 +15,7 @@ declare type ToggleGroupSingleProps = {
|
|
15
15
|
type: "single";
|
16
16
|
/**
|
17
17
|
* Defines the controlled value of the pressed item.
|
18
|
-
* Must be used in conjunction with `
|
18
|
+
* Must be used in conjunction with `onChange`.
|
19
19
|
*/
|
20
20
|
value?: RadixToggleGroupSingleProps["value"];
|
21
21
|
/**
|
@@ -31,7 +31,7 @@ declare type ToggleGroupMultipleProps = {
|
|
31
31
|
type: "multiple";
|
32
32
|
/**
|
33
33
|
* Defines the controlled value of the pressed items.
|
34
|
-
* Must be used in conjunction with `
|
34
|
+
* Must be used in conjunction with `onChange`.
|
35
35
|
*/
|
36
36
|
value?: RadixToggleGroupMultipleProps["value"];
|
37
37
|
/**
|
@@ -1,3 +1,5 @@
|
|
1
|
+
export type { AccordionProps as ExperimentalAccordionProps, AccordionContentProps as ExperimentalAccordionContentProps, AccordionHeaderProps as ExperimentalAccordionHeaderProps, AccordionItemProps as ExperimentalAccordionItemProps, } from "./Accordion/Accordion";
|
2
|
+
export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
|
1
3
|
export * from "./Button/Button";
|
2
4
|
export * from "./ButtonGroup/ButtonGroup";
|
3
5
|
export * from "./ButtonLink/ButtonLink";
|
@@ -1,3 +1,4 @@
|
|
1
|
+
export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
|
1
2
|
export * from "./Button/Button";
|
2
3
|
export * from "./ButtonGroup/ButtonGroup";
|
3
4
|
export * from "./ButtonLink/ButtonLink";
|
@@ -5,5 +6,4 @@ export * from "./IconButton/IconButton";
|
|
5
6
|
export * from "./IconButtonLink/IconButtonLink";
|
6
7
|
export * from "./Switch";
|
7
8
|
export * from "./ToggleButton/ToggleButton";
|
8
|
-
export * from "./ToggleGroup/ToggleGroup";
|
9
|
-
export {};
|
9
|
+
export * from "./ToggleGroup/ToggleGroup";
|
@@ -7,7 +7,7 @@ import { AlertCircleIcon } from "../../Icons";
|
|
7
7
|
import stl from "../../styles/helpers/satellitePrefixer";
|
8
8
|
import { uniqueId } from "../../utils";
|
9
9
|
import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
|
10
|
-
import {
|
10
|
+
import { useForm } from "../Form/useForm";
|
11
11
|
import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
13
13
|
/**
|
@@ -55,7 +55,7 @@ export var Field = function Field(_ref) {
|
|
55
55
|
console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
|
56
56
|
}
|
57
57
|
}
|
58
|
-
var form =
|
58
|
+
var form = useForm();
|
59
59
|
var addField = form === null || form === void 0 ? void 0 : form.addField;
|
60
60
|
var removeField = form === null || form === void 0 ? void 0 : form.removeField;
|
61
61
|
useEffect(function () {
|
@@ -89,7 +89,7 @@ export var Field = function Field(_ref) {
|
|
89
89
|
id: labelId,
|
90
90
|
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
|
91
91
|
children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/_jsx("span", {
|
92
|
-
className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-red-700 ml-0.5"]))),
|
92
|
+
className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-red-700 ml-0.5 align-top"]))),
|
93
93
|
"aria-hidden": true,
|
94
94
|
children: "*"
|
95
95
|
})]
|
@@ -1,16 +1,18 @@
|
|
1
1
|
import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
|
2
2
|
import type { ButtonProps } from "../../Actions";
|
3
3
|
import type { AlertProps } from "../../Indicators";
|
4
|
-
import type {
|
5
|
-
export interface
|
4
|
+
import type { FormContextField } from "./FormContext";
|
5
|
+
export interface FormProps extends HTMLAttributes<HTMLFormElement> {
|
6
6
|
}
|
7
|
-
export declare type
|
8
|
-
|
7
|
+
export declare type FormLocale = {
|
8
|
+
errorTitle?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
|
9
|
+
errorText?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
|
9
10
|
};
|
10
|
-
export interface
|
11
|
-
locale?:
|
11
|
+
export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
|
12
|
+
locale?: FormLocale;
|
13
|
+
extraErrors?: string[];
|
12
14
|
}
|
13
|
-
export declare const
|
14
|
-
export declare const
|
15
|
-
export declare const
|
16
|
-
export declare const
|
15
|
+
export declare const FormErrorMessage: VFC<FormErrorMessageProps>;
|
16
|
+
export declare const Form: FC<FormProps>;
|
17
|
+
export declare const FormSubmit: FC<ButtonProps>;
|
18
|
+
export declare const FormReset: FC<ButtonProps>;
|
@@ -3,61 +3,72 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
5
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
6
|
-
var _excluded = ["className", "locale"],
|
6
|
+
var _excluded = ["className", "extraErrors", "locale"],
|
7
7
|
_excluded2 = ["children"],
|
8
8
|
_excluded3 = ["children"],
|
9
9
|
_excluded4 = ["children"];
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
11
11
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
12
12
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
13
13
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
14
14
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
15
15
|
import cx from "clsx";
|
16
|
+
import isEmpty from "lodash/isEmpty";
|
16
17
|
import { useCallback, useState } from "react";
|
17
18
|
import { Button } from "../../Actions";
|
18
19
|
import { XOctagonIcon } from "../../Icons";
|
19
20
|
import { Alert } from "../../Indicators";
|
20
21
|
import { useLocale } from "../../Satellite";
|
21
22
|
import stl from "../../styles/helpers/satellitePrefixer";
|
22
|
-
import {
|
23
|
-
import {
|
24
|
-
import {
|
23
|
+
import { FormContext } from "./FormContext";
|
24
|
+
import { useForm } from "./useForm";
|
25
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
25
26
|
var DEFAULT_ERROR_MESSAGE_LOCALE = {
|
26
|
-
|
27
|
+
errorTitle: function errorTitle(invalidFields, extraErrors) {
|
28
|
+
var _extraErrors$length;
|
29
|
+
if (isEmpty(invalidFields) && (extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) === 1) return extraErrors[0];
|
30
|
+
var errorCount = invalidFields.length + ((_extraErrors$length = extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) !== null && _extraErrors$length !== void 0 ? _extraErrors$length : 0);
|
31
|
+
return "There ".concat(errorCount > 1 ? "are" : "is", " ").concat(errorCount, " error").concat(errorCount > 1 ? "s" : "", " below.");
|
32
|
+
},
|
33
|
+
errorText: function errorText(invalidFields, extraErrors) {
|
27
34
|
var firstInvalidField = invalidFields[0];
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
35
|
+
var focusInvalidFieldLink = /*#__PURE__*/_jsx("a", {
|
36
|
+
href: "#",
|
37
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
|
38
|
+
onClick: function onClick(e) {
|
39
|
+
e.preventDefault();
|
40
|
+
var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
|
41
|
+
label === null || label === void 0 || label.scrollIntoView({
|
42
|
+
behavior: "smooth",
|
43
|
+
block: "start"
|
44
|
+
});
|
45
|
+
label === null || label === void 0 || label.focus({
|
46
|
+
preventScroll: true
|
47
|
+
});
|
48
|
+
},
|
49
|
+
children: "Focus first invalid field."
|
50
|
+
});
|
51
|
+
if (!isEmpty(invalidFields) && isEmpty(extraErrors)) return focusInvalidFieldLink;
|
52
|
+
return /*#__PURE__*/_jsxs("ul", {
|
53
|
+
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["list-disc"]))),
|
54
|
+
children: [extraErrors && extraErrors.length > 1 && extraErrors.map(function (items, index) {
|
55
|
+
return /*#__PURE__*/_jsx("li", {
|
56
|
+
children: items
|
57
|
+
}, index + "-error");
|
58
|
+
}), invalidFields.length > 0 && /*#__PURE__*/_jsxs("li", {
|
59
|
+
children: ["There ", invalidFields.length > 1 ? "are" : "is", " ", invalidFields.length, " invalid field", invalidFields.length > 1 ? "s" : "", ". ", focusInvalidFieldLink]
|
50
60
|
})]
|
51
61
|
});
|
52
62
|
}
|
53
63
|
};
|
54
|
-
export var
|
64
|
+
export var FormErrorMessage = function FormErrorMessage(_ref) {
|
55
65
|
var className = _ref.className,
|
66
|
+
extraErrors = _ref.extraErrors,
|
56
67
|
propsLocale = _ref.locale,
|
57
68
|
props = _objectWithoutProperties(_ref, _excluded);
|
58
69
|
var contextLocale = useLocale("form");
|
59
70
|
var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
|
60
|
-
var form =
|
71
|
+
var form = useForm();
|
61
72
|
if (!form) return null;
|
62
73
|
var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
|
63
74
|
var _ref3 = _slicedToArray(_ref2, 2),
|
@@ -70,19 +81,20 @@ export var ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(
|
|
70
81
|
value = _ref5[1];
|
71
82
|
return value;
|
72
83
|
});
|
73
|
-
return invalidFields
|
84
|
+
return isEmpty(invalidFields) && isEmpty(extraErrors) ? null : /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
|
74
85
|
variant: "red",
|
75
|
-
icon: XOctagonIcon
|
86
|
+
icon: XOctagonIcon,
|
87
|
+
title: locale.errorTitle(invalidFields, extraErrors)
|
76
88
|
}, props), {}, {
|
77
|
-
className: cx(stl(
|
89
|
+
className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))), className),
|
78
90
|
children: /*#__PURE__*/_jsx("span", {
|
79
91
|
"aria-live": "assertive",
|
80
|
-
className: stl(
|
81
|
-
children: locale.errorText(invalidFields)
|
92
|
+
className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
|
93
|
+
children: locale.errorText(invalidFields, extraErrors)
|
82
94
|
})
|
83
|
-
}))
|
95
|
+
}));
|
84
96
|
};
|
85
|
-
export var
|
97
|
+
export var Form = function Form(_ref6) {
|
86
98
|
var children = _ref6.children,
|
87
99
|
props = _objectWithoutProperties(_ref6, _excluded2);
|
88
100
|
var _useState = useState({}),
|
@@ -102,7 +114,7 @@ export var ExperimentalForm = function ExperimentalForm(_ref6) {
|
|
102
114
|
return rest;
|
103
115
|
});
|
104
116
|
}, []);
|
105
|
-
return /*#__PURE__*/_jsx(
|
117
|
+
return /*#__PURE__*/_jsx(FormContext.Provider, {
|
106
118
|
value: {
|
107
119
|
fields: fields,
|
108
120
|
addField: addField,
|
@@ -115,7 +127,7 @@ export var ExperimentalForm = function ExperimentalForm(_ref6) {
|
|
115
127
|
}))
|
116
128
|
});
|
117
129
|
};
|
118
|
-
export var
|
130
|
+
export var FormSubmit = function FormSubmit(_ref7) {
|
119
131
|
var children = _ref7.children,
|
120
132
|
props = _objectWithoutProperties(_ref7, _excluded3);
|
121
133
|
return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
|
@@ -123,7 +135,7 @@ export var ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
|
|
123
135
|
children: children
|
124
136
|
}));
|
125
137
|
};
|
126
|
-
export var
|
138
|
+
export var FormReset = function FormReset(_ref8) {
|
127
139
|
var children = _ref8.children,
|
128
140
|
props = _objectWithoutProperties(_ref8, _excluded4);
|
129
141
|
return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
|
@@ -1,13 +1,13 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import type { FieldState } from "../Field";
|
3
|
-
export declare type
|
3
|
+
export declare type FormContextField = {
|
4
4
|
state: FieldState;
|
5
5
|
label: string;
|
6
6
|
labelFor: string;
|
7
7
|
};
|
8
|
-
export declare type
|
9
|
-
fields: Record<string,
|
10
|
-
addField: (field:
|
11
|
-
removeField: (field:
|
8
|
+
export declare type FormContextValue = {
|
9
|
+
fields: Record<string, FormContextField>;
|
10
|
+
addField: (field: FormContextField) => void;
|
11
|
+
removeField: (field: FormContextField) => void;
|
12
12
|
};
|
13
|
-
export declare const
|
13
|
+
export declare const FormContext: import("react").Context<FormContextValue | null>;
|
@@ -1,2 +1,2 @@
|
|
1
1
|
import { createContext } from "react";
|
2
|
-
export var
|
2
|
+
export var FormContext = /*#__PURE__*/createContext(null);
|
@@ -1,3 +1,4 @@
|
|
1
|
-
export
|
2
|
-
export
|
3
|
-
export
|
1
|
+
export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
|
2
|
+
export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
|
3
|
+
export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
|
4
|
+
export { useForm as useExperimentalForm } from "./useForm";
|
@@ -1,3 +1,2 @@
|
|
1
|
-
export
|
2
|
-
export
|
3
|
-
export {};
|
1
|
+
export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset } from "./Form";
|
2
|
+
export { useForm as useExperimentalForm } from "./useForm";
|