@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.
Files changed (96) hide show
  1. package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
  2. package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
  3. package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  4. package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
  5. package/dist/cjs/Actions/Button/Button.tailwind.js +0 -12
  6. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  7. package/dist/cjs/Actions/index.d.ts +2 -0
  8. package/dist/cjs/Actions/index.js +18 -0
  9. package/dist/cjs/Fields/Field/Field.js +2 -2
  10. package/dist/cjs/Fields/Form/Form.d.ts +12 -10
  11. package/dist/cjs/Fields/Form/Form.js +50 -38
  12. package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
  13. package/dist/cjs/Fields/Form/FormContext.js +2 -2
  14. package/dist/cjs/Fields/Form/index.d.ts +4 -3
  15. package/dist/cjs/Fields/Form/index.js +31 -21
  16. package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
  17. package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
  18. package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
  19. package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
  20. package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
  21. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
  22. package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
  23. package/dist/cjs/Fields/Form/stories/JSONForms.js +59 -56
  24. package/dist/cjs/Fields/Form/stories/MultiStep.js +706 -0
  25. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
  26. package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
  27. package/dist/cjs/Fields/Form/useForm.js +3 -3
  28. package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
  29. package/dist/cjs/Icons/index.d.ts +1 -1
  30. package/dist/cjs/Icons/index.js +6 -0
  31. package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
  32. package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
  33. package/dist/cjs/Indicators/index.d.ts +1 -0
  34. package/dist/cjs/Indicators/index.js +11 -0
  35. package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
  36. package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
  37. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  38. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  39. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  40. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
  41. package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
  42. package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
  43. package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
  44. package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  45. package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  46. package/dist/cjs/styles/tailwind.config.js +1 -1
  47. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  48. package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
  49. package/dist/esm/Actions/Accordion/Accordion.js +139 -0
  50. package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  51. package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
  52. package/dist/esm/Actions/Button/Button.tailwind.js +0 -12
  53. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  54. package/dist/esm/Actions/index.d.ts +2 -0
  55. package/dist/esm/Actions/index.js +2 -2
  56. package/dist/esm/Fields/Field/Field.js +3 -3
  57. package/dist/esm/Fields/Form/Form.d.ts +12 -10
  58. package/dist/esm/Fields/Form/Form.js +52 -40
  59. package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
  60. package/dist/esm/Fields/Form/FormContext.js +1 -1
  61. package/dist/esm/Fields/Form/index.d.ts +4 -3
  62. package/dist/esm/Fields/Form/index.js +2 -3
  63. package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
  64. package/dist/esm/Fields/Form/stories/Complex.js +649 -643
  65. package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
  66. package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
  67. package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
  68. package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
  69. package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
  70. package/dist/esm/Fields/Form/stories/JSONForms.js +60 -57
  71. package/dist/esm/Fields/Form/stories/MultiStep.js +697 -0
  72. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
  73. package/dist/esm/Fields/Form/useForm.d.ts +1 -1
  74. package/dist/esm/Fields/Form/useForm.js +3 -3
  75. package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
  76. package/dist/esm/Icons/index.d.ts +1 -1
  77. package/dist/esm/Icons/index.js +1 -1
  78. package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
  79. package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
  80. package/dist/esm/Indicators/index.d.ts +1 -0
  81. package/dist/esm/Indicators/index.js +2 -1
  82. package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
  83. package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
  84. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  85. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  86. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  87. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
  88. package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
  89. package/dist/esm/Layout/Tables/Table/Table.js +4 -2
  90. package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
  91. package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  92. package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  93. package/dist/esm/styles/tailwind.config.js +1 -1
  94. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  95. package/dist/satellite.min.css +1 -1
  96. 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,5 @@
1
+ export = accordionPlugin;
2
+ declare const accordionPlugin: {
3
+ handler: import("tailwindcss/types/config").PluginCreator;
4
+ config?: Partial<import("tailwindcss/types/config").Config> | undefined;
5
+ };
@@ -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 `onValueChange`.
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 `onValueChange`.
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 { useExperimentalForm } from "../Form/useForm";
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 = useExperimentalForm();
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 { ExperimentalFormContextField } from "./FormContext";
5
- export interface ExperimentalFormProps extends HTMLAttributes<HTMLFormElement> {
4
+ import type { FormContextField } from "./FormContext";
5
+ export interface FormProps extends HTMLAttributes<HTMLFormElement> {
6
6
  }
7
- export declare type ExperimentalFormLocale = {
8
- errorText?: (invalidFields: ExperimentalFormContextField[]) => ReactNode;
7
+ export declare type FormLocale = {
8
+ errorTitle?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
9
+ errorText?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
9
10
  };
10
- export interface ExperimentalFormErrorMessageProps extends Omit<AlertProps, "children"> {
11
- locale?: ExperimentalFormLocale;
11
+ export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
12
+ locale?: FormLocale;
13
+ extraErrors?: string[];
12
14
  }
13
- export declare const ExperimentalFormErrorMessage: VFC<ExperimentalFormErrorMessageProps>;
14
- export declare const ExperimentalForm: FC<ExperimentalFormProps>;
15
- export declare const ExperimentalFormSubmit: FC<ButtonProps>;
16
- export declare const ExperimentalFormReset: FC<ButtonProps>;
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, _templateObject5;
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 { ExperimentalFormContext } from "./FormContext";
23
- import { useExperimentalForm } from "./useForm";
24
- import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
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
- errorText: function errorText(invalidFields) {
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
- return /*#__PURE__*/_jsxs(_Fragment, {
29
- children: [/*#__PURE__*/_jsxs("div", {
30
- className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
31
- children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
32
- }), /*#__PURE__*/_jsx("div", {
33
- className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col"]))),
34
- children: /*#__PURE__*/_jsx("a", {
35
- href: "#",
36
- className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
37
- onClick: function onClick(e) {
38
- e.preventDefault();
39
- var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
40
- label === null || label === void 0 || label.scrollIntoView({
41
- behavior: "smooth",
42
- block: "start"
43
- });
44
- label === null || label === void 0 || label.focus({
45
- preventScroll: true
46
- });
47
- },
48
- children: "Go to first error"
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 ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
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 = useExperimentalForm();
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.length > 0 ? /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))), className),
89
+ className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))), className),
78
90
  children: /*#__PURE__*/_jsx("span", {
79
91
  "aria-live": "assertive",
80
- className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
81
- children: locale.errorText(invalidFields)
92
+ className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
93
+ children: locale.errorText(invalidFields, extraErrors)
82
94
  })
83
- })) : null;
95
+ }));
84
96
  };
85
- export var ExperimentalForm = function ExperimentalForm(_ref6) {
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(ExperimentalFormContext.Provider, {
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 ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
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 ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
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 ExperimentalFormContextField = {
3
+ export declare type FormContextField = {
4
4
  state: FieldState;
5
5
  label: string;
6
6
  labelFor: string;
7
7
  };
8
- export declare type ExperimentalFormContextValue = {
9
- fields: Record<string, ExperimentalFormContextField>;
10
- addField: (field: ExperimentalFormContextField) => void;
11
- removeField: (field: ExperimentalFormContextField) => void;
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 ExperimentalFormContext: import("react").Context<ExperimentalFormContextValue | null>;
13
+ export declare const FormContext: import("react").Context<FormContextValue | null>;
@@ -1,2 +1,2 @@
1
1
  import { createContext } from "react";
2
- export var ExperimentalFormContext = /*#__PURE__*/createContext(null);
2
+ export var FormContext = /*#__PURE__*/createContext(null);
@@ -1,3 +1,4 @@
1
- export * from "./Form";
2
- export type { ExperimentalFormContextField, ExperimentalFormContextValue } from "./FormContext";
3
- export * from "./useForm";
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 * from "./Form";
2
- export * from "./useForm";
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";