@algolia/satellite 1.0.0-beta.175 → 1.0.0-beta.176

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 (163) hide show
  1. package/cjs/Button/Button.tailwind.js +1 -0
  2. package/cjs/Button/PolymorphicButton.js +1 -1
  3. package/cjs/Dropdown/Dropdown.d.ts +1 -5
  4. package/cjs/Dropdown/Dropdown.js +12 -15
  5. package/cjs/Dropdown/DropdownButton.d.ts +3 -0
  6. package/cjs/Dropdown/DropdownButton.js +3 -0
  7. package/cjs/Dropdown/components/DropdownButtonItem.d.ts +1 -0
  8. package/cjs/Dropdown/components/DropdownButtonItem.js +5 -2
  9. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts +1 -0
  10. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js +1 -0
  11. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts +1 -0
  12. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js +1 -0
  13. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts +1 -0
  14. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.js +2 -0
  15. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts +1 -0
  16. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js +1 -0
  17. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts +1 -0
  18. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js +1 -0
  19. package/cjs/Dropdown/components/DropdownDivider.d.ts +1 -0
  20. package/cjs/Dropdown/components/DropdownDivider.js +1 -0
  21. package/cjs/Dropdown/components/DropdownFooterItem.d.ts +1 -0
  22. package/cjs/Dropdown/components/DropdownFooterItem.js +1 -0
  23. package/cjs/Dropdown/components/DropdownLinkItem.d.ts +1 -0
  24. package/cjs/Dropdown/components/DropdownLinkItem.js +5 -2
  25. package/cjs/Dropdown/components/DropdownRadioItem.d.ts +1 -0
  26. package/cjs/Dropdown/components/DropdownRadioItem.js +6 -2
  27. package/cjs/Dropdown/components/DropdownTitle.d.ts +1 -0
  28. package/cjs/Dropdown/components/DropdownTitle.js +1 -0
  29. package/cjs/Dropdown/components/DropdownToggleItem.d.ts +1 -0
  30. package/cjs/Dropdown/components/DropdownToggleItem.js +6 -2
  31. package/cjs/EmptyState/EmptyState.js +4 -9
  32. package/cjs/MenuButton/MenuButton.d.ts +13 -11
  33. package/cjs/MenuButton/MenuButton.js +15 -39
  34. package/cjs/MenuButton/components/Content.d.ts +4 -0
  35. package/cjs/MenuButton/components/Content.js +39 -0
  36. package/cjs/MenuButton/components/DefaultTrigger.d.ts +2 -2
  37. package/cjs/MenuButton/components/DefaultTrigger.js +5 -2
  38. package/cjs/MenuButton/components/items/Item.d.ts +15 -0
  39. package/cjs/MenuButton/components/items/{ButtonItem.js → Item.js} +14 -17
  40. package/cjs/MenuButton/components/items/index.d.ts +1 -1
  41. package/cjs/MenuButton/components/items/index.js +4 -4
  42. package/cjs/MenuButton/index.d.ts +1 -1
  43. package/cjs/MenuButton/index.js +11 -8
  44. package/cjs/MenuButton/useMenuItemProps.d.ts +3 -3
  45. package/cjs/MenuButton/useMenuItemProps.js +1 -1
  46. package/cjs/Satellite/locale.d.ts +6 -2
  47. package/cjs/Stepper/Step.d.ts +7 -0
  48. package/cjs/Stepper/Step.js +116 -0
  49. package/cjs/Stepper/Stepper.d.ts +42 -0
  50. package/cjs/Stepper/Stepper.js +146 -0
  51. package/cjs/Stepper/StepperContext.d.ts +12 -0
  52. package/cjs/Stepper/StepperContext.js +15 -0
  53. package/cjs/Stepper/index.d.ts +4 -0
  54. package/cjs/Stepper/index.js +51 -0
  55. package/cjs/Stepper/types.d.ts +26 -0
  56. package/cjs/Stepper/utils.d.ts +5 -0
  57. package/cjs/Stepper/utils.js +67 -0
  58. package/cjs/Toast/Toast.d.ts +6 -0
  59. package/cjs/{Flag/Flag.js → Toast/Toast.js} +50 -63
  60. package/{esm/Flag/Flag.tailwind.d.ts → cjs/Toast/Toast.tailwind.d.ts} +2 -2
  61. package/cjs/{Flag/Flag.tailwind.js → Toast/Toast.tailwind.js} +7 -7
  62. package/cjs/Toast/Toasts.d.ts +21 -0
  63. package/cjs/Toast/Toasts.js +102 -0
  64. package/cjs/Toast/index.d.ts +4 -0
  65. package/cjs/{Flag → Toast}/index.js +9 -9
  66. package/cjs/Toast/types.d.ts +34 -0
  67. package/cjs/Toast/types.js +5 -0
  68. package/cjs/index.d.ts +1 -1
  69. package/cjs/index.js +4 -4
  70. package/cjs/styles/tailwind.config.js +1 -1
  71. package/cjs/types.d.ts +3 -3
  72. package/cjs/utils/getTextFromReactNode.d.ts +4 -0
  73. package/cjs/utils/getTextFromReactNode.js +20 -0
  74. package/esm/Button/Button.tailwind.js +1 -0
  75. package/esm/Button/PolymorphicButton.js +1 -1
  76. package/esm/Dropdown/Dropdown.d.ts +1 -5
  77. package/esm/Dropdown/Dropdown.js +12 -15
  78. package/esm/Dropdown/DropdownButton.d.ts +3 -0
  79. package/esm/Dropdown/DropdownButton.js +3 -0
  80. package/esm/Dropdown/components/DropdownButtonItem.d.ts +1 -0
  81. package/esm/Dropdown/components/DropdownButtonItem.js +5 -2
  82. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts +1 -0
  83. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js +1 -0
  84. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts +1 -0
  85. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js +1 -0
  86. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts +1 -0
  87. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.js +2 -0
  88. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts +1 -0
  89. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js +1 -0
  90. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts +1 -0
  91. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js +1 -0
  92. package/esm/Dropdown/components/DropdownDivider.d.ts +1 -0
  93. package/esm/Dropdown/components/DropdownDivider.js +2 -0
  94. package/esm/Dropdown/components/DropdownFooterItem.d.ts +1 -0
  95. package/esm/Dropdown/components/DropdownFooterItem.js +1 -0
  96. package/esm/Dropdown/components/DropdownLinkItem.d.ts +1 -0
  97. package/esm/Dropdown/components/DropdownLinkItem.js +5 -2
  98. package/esm/Dropdown/components/DropdownRadioItem.d.ts +1 -0
  99. package/esm/Dropdown/components/DropdownRadioItem.js +6 -2
  100. package/esm/Dropdown/components/DropdownTitle.d.ts +1 -0
  101. package/esm/Dropdown/components/DropdownTitle.js +1 -0
  102. package/esm/Dropdown/components/DropdownToggleItem.d.ts +1 -0
  103. package/esm/Dropdown/components/DropdownToggleItem.js +6 -2
  104. package/esm/EmptyState/EmptyState.js +4 -9
  105. package/esm/MenuButton/MenuButton.d.ts +13 -11
  106. package/esm/MenuButton/MenuButton.js +15 -39
  107. package/esm/MenuButton/components/Content.d.ts +4 -0
  108. package/esm/MenuButton/components/Content.js +32 -0
  109. package/esm/MenuButton/components/DefaultTrigger.d.ts +2 -2
  110. package/esm/MenuButton/components/DefaultTrigger.js +5 -2
  111. package/esm/MenuButton/components/items/Item.d.ts +15 -0
  112. package/esm/MenuButton/components/items/{ButtonItem.js → Item.js} +13 -16
  113. package/esm/MenuButton/components/items/index.d.ts +1 -1
  114. package/esm/MenuButton/components/items/index.js +1 -1
  115. package/esm/MenuButton/index.d.ts +1 -1
  116. package/esm/MenuButton/index.js +1 -1
  117. package/esm/MenuButton/useMenuItemProps.d.ts +3 -3
  118. package/esm/MenuButton/useMenuItemProps.js +1 -1
  119. package/esm/Satellite/locale.d.ts +6 -2
  120. package/esm/Stepper/Step.d.ts +7 -0
  121. package/esm/Stepper/Step.js +110 -0
  122. package/esm/Stepper/Stepper.d.ts +42 -0
  123. package/esm/Stepper/Stepper.js +139 -0
  124. package/esm/Stepper/StepperContext.d.ts +12 -0
  125. package/esm/Stepper/StepperContext.js +9 -0
  126. package/esm/Stepper/index.d.ts +4 -0
  127. package/esm/Stepper/index.js +4 -0
  128. package/esm/Stepper/types.d.ts +26 -0
  129. package/esm/Stepper/utils.d.ts +5 -0
  130. package/esm/Stepper/utils.js +61 -0
  131. package/esm/Toast/Toast.d.ts +6 -0
  132. package/esm/{Flag/Flag.js → Toast/Toast.js} +46 -62
  133. package/{cjs/Flag/Flag.tailwind.d.ts → esm/Toast/Toast.tailwind.d.ts} +2 -2
  134. package/esm/{Flag/Flag.tailwind.js → Toast/Toast.tailwind.js} +7 -7
  135. package/esm/Toast/Toasts.d.ts +21 -0
  136. package/esm/Toast/Toasts.js +93 -0
  137. package/esm/Toast/index.d.ts +4 -0
  138. package/esm/Toast/index.js +4 -0
  139. package/esm/Toast/types.d.ts +34 -0
  140. package/esm/Toast/types.js +1 -0
  141. package/esm/index.d.ts +1 -1
  142. package/esm/index.js +1 -1
  143. package/esm/styles/tailwind.config.js +1 -1
  144. package/esm/types.d.ts +3 -3
  145. package/esm/utils/getTextFromReactNode.d.ts +4 -0
  146. package/esm/utils/getTextFromReactNode.js +15 -0
  147. package/package.json +2 -1
  148. package/satellite.min.css +1 -1
  149. package/cjs/Flag/Flag.d.ts +0 -11
  150. package/cjs/Flag/Flags.d.ts +0 -48
  151. package/cjs/Flag/Flags.js +0 -90
  152. package/cjs/Flag/index.d.ts +0 -4
  153. package/cjs/Flag/types.d.ts +0 -27
  154. package/cjs/MenuButton/components/items/ButtonItem.d.ts +0 -14
  155. package/esm/Flag/Flag.d.ts +0 -11
  156. package/esm/Flag/Flags.d.ts +0 -48
  157. package/esm/Flag/Flags.js +0 -83
  158. package/esm/Flag/index.d.ts +0 -4
  159. package/esm/Flag/index.js +0 -4
  160. package/esm/Flag/types.d.ts +0 -27
  161. package/esm/MenuButton/components/items/ButtonItem.d.ts +0 -14
  162. /package/cjs/{Flag → Stepper}/types.js +0 -0
  163. /package/esm/{Flag → Stepper}/types.js +0 -0
@@ -1,11 +1,12 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
4
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
4
+ var _excluded = ["onDismiss", "title", "icon", "loading", "variant", "locale", "children"];
5
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
5
6
  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; }
6
7
  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; }
8
+ import * as ToastPrimitive from "@radix-ui/react-toast";
7
9
  import cx from "clsx";
8
- import { useEffect, useRef, useState } from "react";
9
10
  import { Check, X } from "react-feather";
10
11
  import { IconButton } from "../Button";
11
12
  import { Card } from "../Card";
@@ -15,7 +16,7 @@ import stl from "../styles/helpers/satellitePrefixer";
15
16
  import isRenderedChild from "../utils/isRenderedChild";
16
17
  import { jsx as _jsx } from "react/jsx-runtime";
17
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
- var DEFAULT_FLAG_LOCALE = {
19
+ var DEFAULT_TOAST_LOCALE = {
19
20
  dismissText: "Dismiss"
20
21
  };
21
22
  var VARIANT_CLASSNAMES = {
@@ -34,13 +35,7 @@ var VARIANT_SPINNER_CLASSNAMES = {
34
35
  orange: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-orange-500"]))),
35
36
  red: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-red-500"])))
36
37
  };
37
-
38
- /**
39
- * The `Toast` component is a brief notification that providing timely feedback to users before vanishing after a short duration.
40
- *
41
- * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
42
- */
43
- export var Flag = function Flag(_ref) {
38
+ export var Toast = function Toast(_ref) {
44
39
  var onDismiss = _ref.onDismiss,
45
40
  title = _ref.title,
46
41
  _ref$icon = _ref.icon,
@@ -49,68 +44,57 @@ export var Flag = function Flag(_ref) {
49
44
  loading = _ref$loading === void 0 ? false : _ref$loading,
50
45
  _ref$variant = _ref.variant,
51
46
  variant = _ref$variant === void 0 ? "accent" : _ref$variant,
52
- autoDismissAfter = _ref.autoDismissAfter,
53
47
  propsLocale = _ref.locale,
54
- children = _ref.children;
55
- var contextLocale = useLocale("flag");
56
- var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
57
- var _useState = useState(false),
58
- _useState2 = _slicedToArray(_useState, 2),
59
- hovered = _useState2[0],
60
- setHovered = _useState2[1];
61
- var onDismissRef = useRef();
62
- onDismissRef.current = onDismiss;
63
- var hasTitle = title !== undefined;
64
- useEffect(function () {
65
- if (!autoDismissAfter || hovered) return;
66
- var timer = setTimeout(function () {
67
- var _onDismissRef$current;
68
- (_onDismissRef$current = onDismissRef.current) === null || _onDismissRef$current === void 0 || _onDismissRef$current.call(onDismissRef);
69
- }, autoDismissAfter);
70
- return function () {
71
- return clearTimeout(timer);
72
- };
73
- }, [autoDismissAfter, hovered]);
74
- return /*#__PURE__*/_jsx(Card, {
48
+ children = _ref.children,
49
+ rest = _objectWithoutProperties(_ref, _excluded);
50
+ var contextLocale = useLocale("toast");
51
+ var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOAST_LOCALE), contextLocale), propsLocale);
52
+ if (process.env.NODE_ENV !== "production") {
53
+ if (typeof onDismiss === "undefined") {
54
+ console.warn("Toast: You should always include an `onDismiss` callback, this is crucial for users with limited abilities.");
55
+ }
56
+ }
57
+ return /*#__PURE__*/_jsx(Card, _objectSpread(_objectSpread({}, rest), {}, {
75
58
  fullBleed: true,
76
- className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"]))),
59
+ className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["toast shadow-z500"]))),
77
60
  children: /*#__PURE__*/_jsxs("div", {
78
61
  className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
79
- onMouseEnter: function onMouseEnter() {
80
- return setHovered(true);
81
- },
82
- onMouseLeave: function onMouseLeave() {
83
- return setHovered(false);
84
- },
85
62
  children: [loading ? /*#__PURE__*/_jsx(ProgressSpinner, {
86
- size: 16,
87
- className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
63
+ size: 24,
64
+ className: VARIANT_SPINNER_CLASSNAMES[variant]
88
65
  }) : /*#__PURE__*/_jsx(Icon, {
89
- className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
90
- size: 16
66
+ className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-1"]))), VARIANT_CLASSNAMES[variant]),
67
+ size: 24
91
68
  }), /*#__PURE__*/_jsxs("div", {
92
- className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4 min-w-0 break-words"]))),
69
+ className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-1 ml-4 min-w-0 break-words"]))),
93
70
  children: [/*#__PURE__*/_jsxs("div", {
94
- className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"]))),
95
- children: [hasTitle ? /*#__PURE__*/_jsx("h3", {
96
- className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["overflow-hidden"]))),
97
- children: title
98
- }) : /*#__PURE__*/_jsx("div", {
99
- className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["min-w-0"]))),
100
- children: children
101
- }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
102
- icon: X,
103
- title: locale.dismissText,
104
- variant: "subtle",
105
- size: "small",
106
- onClick: onDismiss
71
+ className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex justify-between"]))),
72
+ children: [/*#__PURE__*/_jsx(ToastPrimitive.Title, {
73
+ asChild: true,
74
+ children: /*#__PURE__*/_jsx("h3", {
75
+ className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["overflow-hidden mt-0.5"]))),
76
+ children: title
77
+ })
78
+ }), onDismiss && /*#__PURE__*/_jsx(ToastPrimitive.Close, {
79
+ asChild: true,
80
+ onClick: function onClick(e) {
81
+ // Prevent the default Radix handler so that `onDismiss` is not called twice in the `Toasts` component.
82
+ e.preventDefault();
83
+ onDismiss === null || onDismiss === void 0 || onDismiss();
84
+ },
85
+ children: /*#__PURE__*/_jsx(IconButton, {
86
+ icon: X,
87
+ title: locale.dismissText,
88
+ variant: "subtle",
89
+ size: "small"
90
+ })
107
91
  })]
108
- }), hasTitle && isRenderedChild(children) && /*#__PURE__*/_jsx("div", {
109
- className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
92
+ }), isRenderedChild(children) && /*#__PURE__*/_jsx(ToastPrimitive.Description, {
93
+ className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
110
94
  children: children
111
95
  })]
112
96
  })]
113
97
  })
114
- });
98
+ }));
115
99
  };
116
- export default Flag;
100
+ export default Toast;
@@ -1,5 +1,5 @@
1
- export = flagPlugin;
2
- declare const flagPlugin: {
1
+ export = toastPlugin;
2
+ declare const toastPlugin: {
3
3
  handler: import("tailwindcss/types/config").PluginCreator;
4
4
  config?: Partial<import("tailwindcss/types/config").Config> | undefined;
5
5
  };
@@ -1,33 +1,33 @@
1
1
  import _plugin from "tailwindcss/plugin";
2
2
  // @ts-check
3
3
  var plugin = _plugin;
4
- var flagPlugin = plugin(function (_ref) {
4
+ var toastPlugin = plugin(function (_ref) {
5
5
  var addComponents = _ref.addComponents;
6
6
  var TRANSITION_TIMEOUT = 500;
7
7
  addComponents({
8
- ".flag": {
8
+ ".toast": {
9
9
  width: "320px"
10
10
  }
11
11
  });
12
12
  addComponents({
13
- ".flags_item-enter": {
13
+ ".toasts_item-enter": {
14
14
  opacity: "0.01",
15
15
  transform: "translate(0, 80px)"
16
16
  },
17
- ".flags_item-enter-active": {
17
+ ".toasts_item-enter-active": {
18
18
  opacity: "1",
19
19
  transform: "translate(0, 0)",
20
20
  transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
21
21
  },
22
- ".flags_item-exit": {
22
+ ".toasts_item-exit": {
23
23
  opacity: "1",
24
24
  transform: "translate(0, 0)"
25
25
  },
26
- ".flags_item-exit-active": {
26
+ ".toasts_item-exit-active": {
27
27
  opacity: "0.01",
28
28
  transform: "translate(0, 80px)",
29
29
  transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
30
30
  }
31
31
  });
32
32
  });
33
- export default flagPlugin;
33
+ export default toastPlugin;
@@ -0,0 +1,21 @@
1
+ import type { VFC } from "react";
2
+ import type { Notification } from "./types";
3
+ export declare type ToastsLocale = {
4
+ hotkeyLabel?: string;
5
+ };
6
+ export interface ToastsProps {
7
+ /**
8
+ * Define the array of notifications.
9
+ * @example [{ id: "test", title: "Test", content: "Example" }]
10
+ */
11
+ notifications: Notification[];
12
+ /** Define the `Toasts` locale. */
13
+ locale?: ToastsLocale;
14
+ }
15
+ /**
16
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
17
+ *
18
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
19
+ */
20
+ export declare const Toasts: VFC<ToastsProps>;
21
+ export default Toasts;
@@ -0,0 +1,93 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
5
+ var _excluded = ["content", "id", "autoDismissAfter"];
6
+ 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; }
7
+ 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; }
8
+ import * as ToastPrimitive from "@radix-ui/react-toast";
9
+ import { CSSTransition, TransitionGroup } from "react-transition-group";
10
+ import { useCreatePortal, useLocale } from "../Satellite";
11
+ import stl from "../styles/helpers/satellitePrefixer";
12
+ import { prefersReducedMotion } from "../utils/prefersReducedMotion";
13
+ import Toast from "./Toast";
14
+ import { jsx as _jsx } from "react/jsx-runtime";
15
+ import { jsxs as _jsxs } from "react/jsx-runtime";
16
+ var DEFAULT_TOASTS_LOCALE = {
17
+ hotkeyLabel: "Notifications"
18
+ };
19
+ var TRANSITION_TIMEOUT = 500;
20
+
21
+ /**
22
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
23
+ *
24
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
25
+ */
26
+ export var Toasts = function Toasts(_ref) {
27
+ var _ref$notifications = _ref.notifications,
28
+ notifications = _ref$notifications === void 0 ? [] : _ref$notifications,
29
+ propsLocale = _ref.locale;
30
+ var contextLocale = useLocale("toasts");
31
+ var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOASTS_LOCALE), contextLocale), propsLocale);
32
+ var createPortal = useCreatePortal();
33
+ if (process.env.NODE_ENV !== "production") {
34
+ if (notifications.length > 3) {
35
+ console.warn("Toasts: You should not display more than 3 toasts simultaneously.");
36
+ }
37
+ if (notifications.find(function (n) {
38
+ return n.autoDismissAfter && n.autoDismissAfter < 2000;
39
+ })) {
40
+ console.warn("Toasts: You should not set `autoDismissAfter` to less than 2000 ms, even for brief messages.");
41
+ }
42
+ }
43
+ return createPortal( /*#__PURE__*/_jsxs(ToastPrimitive.Provider, {
44
+ children: [/*#__PURE__*/_jsx(TransitionGroup, {
45
+ component: null,
46
+ children: notifications.map(function (_ref2) {
47
+ var content = _ref2.content,
48
+ id = _ref2.id,
49
+ autoDismissAfter = _ref2.autoDismissAfter,
50
+ rest = _objectWithoutProperties(_ref2, _excluded);
51
+ return /*#__PURE__*/_jsx(CSSTransition, {
52
+ classNames: !prefersReducedMotion ? {
53
+ enter: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["toasts_item-enter"]))),
54
+ enterActive: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toasts_item-enter-active"]))),
55
+ exit: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["toasts_item-exit"]))),
56
+ exitActive: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["toasts_item-exit-active"])))
57
+ } : {},
58
+ timeout: !prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
59
+ appear: true,
60
+ children: /*#__PURE__*/_jsx(ToastPrimitive.Root, {
61
+ open: true,
62
+ onOpenChange: function onOpenChange(open) {
63
+ var _rest$onDismiss;
64
+ if (!open) (_rest$onDismiss = rest.onDismiss) === null || _rest$onDismiss === void 0 || _rest$onDismiss.call(rest);
65
+ },
66
+ onSwipeEnd: function onSwipeEnd(e) {
67
+ return e.preventDefault();
68
+ } // Prevent swipe gesture
69
+ ,
70
+ duration: autoDismissAfter || Infinity,
71
+ // Accessibility issue from Radix: `role="status"` is not allowed on a `li` element, as a workaround,
72
+ // we use it on the child.
73
+ // See https://github.com/radix-ui/primitives/issues/1750
74
+ role: "listitem",
75
+ "aria-live": undefined,
76
+ "aria-atomic": undefined,
77
+ children: /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, rest), {}, {
78
+ role: "status",
79
+ "aria-live": "polite",
80
+ "aria-atomic": "true",
81
+ children: content
82
+ }))
83
+ })
84
+ }, id);
85
+ })
86
+ }), /*#__PURE__*/_jsx(ToastPrimitive.Viewport, {
87
+ hotkey: ["metaKey", "F8"],
88
+ label: "".concat(locale.hotkeyLabel, " (CmdKey+F8/WinKey+F8)}"),
89
+ className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4 gap-4"])))
90
+ })]
91
+ }));
92
+ };
93
+ export default Toasts;
@@ -0,0 +1,4 @@
1
+ export * from "./Toast";
2
+ export * from "./Toasts";
3
+ export * from "./types";
4
+ export { default } from "./Toast";
@@ -0,0 +1,4 @@
1
+ export * from "./Toast";
2
+ export * from "./Toasts";
3
+ export * from "./types";
4
+ export { default } from "./Toast";
@@ -0,0 +1,34 @@
1
+ import type { ReactNode } from "react";
2
+ import type { IconComponentType } from "../Icons";
3
+ import type { ColorVariant } from "../types";
4
+ export declare type Notification = {
5
+ /** Defines an unique ID for the `Toast`. */
6
+ id: string;
7
+ /** Defines the title for the `Toast`. */
8
+ title: string;
9
+ /** Defines the content for the `Toast`. */
10
+ content?: ReactNode;
11
+ /** Defines the icon for the `Toast`. */
12
+ icon?: IconComponentType;
13
+ /**
14
+ * Defines the color variant of the `Toast`.
15
+ * @default false
16
+ */
17
+ loading?: boolean;
18
+ /**
19
+ * Defines the color variant of the `Toast`.
20
+ * @default "blue"
21
+ */
22
+ variant?: ColorVariant;
23
+ /** Defines if and how long before the `Toast` should be dismissed (in ms). */
24
+ autoDismissAfter?: number;
25
+ /**
26
+ * Defines a function called when the `Toast` dismiss button is clicked or the `autoDismissAfter` time has elapsed.
27
+ * Dismiss button won't be rendered if absent.
28
+ */
29
+ onDismiss?: () => void;
30
+ /** Define locale for the `Toast`. */
31
+ locale?: {
32
+ dismissText?: string;
33
+ };
34
+ };
@@ -0,0 +1 @@
1
+ export {};
package/esm/index.d.ts CHANGED
@@ -20,7 +20,7 @@ export * from "./Dropdown";
20
20
  export * from "./Dropzone";
21
21
  export * from "./EmptyState";
22
22
  export * from "./Field";
23
- export * from "./Flag";
23
+ export * from "./Toast";
24
24
  export * from "./FlexGrid";
25
25
  export * from "./HelpUnderline";
26
26
  export * from "./Icons";
package/esm/index.js CHANGED
@@ -20,7 +20,7 @@ export * from "./Dropdown";
20
20
  export * from "./Dropzone";
21
21
  export * from "./EmptyState";
22
22
  export * from "./Field";
23
- export * from "./Flag";
23
+ export * from "./Toast";
24
24
  export * from "./FlexGrid";
25
25
  export * from "./HelpUnderline";
26
26
  export * from "./Icons";
@@ -143,5 +143,5 @@ export default {
143
143
  }
144
144
  }
145
145
  },
146
- plugins: [require("./base.tailwind"), require("../utilities/overlay.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Separator/Separator.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
146
+ plugins: [require("./base.tailwind"), require("../utilities/overlay.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Toast/Toast.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Separator/Separator.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
147
147
  };
package/esm/types.d.ts CHANGED
@@ -13,12 +13,12 @@ export declare type AtLeastOne<Type, Union = {
13
13
  export declare type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
14
14
  [Property in Key]-?: Type[Property];
15
15
  };
16
- declare type Without<Type, Union> = {
17
- [Property in Exclude<keyof Type, keyof Union>]?: never;
18
- };
19
16
  /**
20
17
  * Makes two types mutually exclusive
21
18
  * https://stackoverflow.com/questions/42123407/does-typescript-support-mutually-exclusive-types
22
19
  */
20
+ declare type Without<Type, Union> = {
21
+ [Property in Exclude<keyof Type, keyof Union>]?: never;
22
+ };
23
23
  export declare type XOR<Type, Union> = Type | Union extends object ? (Without<Type, Union> & Union) | (Without<Union, Type> & Type) : Type | Union;
24
24
  export {};
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Returns the text content of a React node.
3
+ */
4
+ export declare const getTextFromReactNode: (node: React.ReactNode) => string;
@@ -0,0 +1,15 @@
1
+ import { Children, isValidElement } from "react";
2
+
3
+ /**
4
+ * Returns the text content of a React node.
5
+ */
6
+ export var getTextFromReactNode = function getTextFromReactNode(node) {
7
+ if (typeof node === "string") return node;
8
+ if (typeof node === "number") return node.toString();
9
+ if ( /*#__PURE__*/isValidElement(node)) {
10
+ return Children.toArray(node.props.children).map(function (child) {
11
+ return getTextFromReactNode(child);
12
+ }).join(" ");
13
+ }
14
+ return "";
15
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@algolia/satellite",
3
- "version": "1.0.0-beta.175",
3
+ "version": "1.0.0-beta.176",
4
4
  "description": "Algolia design system React components",
5
5
  "sideEffects": false,
6
6
  "scripts": {
@@ -80,6 +80,7 @@
80
80
  "@radix-ui/react-slider": "^1.1.2",
81
81
  "@radix-ui/react-slot": "^1.0.2",
82
82
  "@radix-ui/react-tabs": "^1.0.4",
83
+ "@radix-ui/react-toast": "^1.1.5",
83
84
  "@radix-ui/react-tooltip": "^1.0.6",
84
85
  "clsx": "^2.0.0",
85
86
  "color": "^4.2.3",