@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
@@ -6,16 +6,22 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.Skeleton = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
11
  var _clsx = _interopRequireDefault(require("clsx"));
12
12
  var _Icons = require("../../Icons");
13
13
  var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
- var _templateObject, _templateObject2;
16
- var _excluded = ["circle", "image", "className"];
15
+ var _excluded = ["circle", "image", "className", "size"];
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
17
  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; }
18
18
  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) { (0, _defineProperty2["default"])(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; }
19
+ var DEFAULT_SKELETON_SIZES = {
20
+ sm: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full h-8"]))),
21
+ md: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-full h-16"]))),
22
+ lg: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full h-32"])))
23
+ };
24
+
19
25
  /**
20
26
  * The `Skeleton` component is used to display a placeholder during loading.
21
27
  *
@@ -28,12 +34,13 @@ var Skeleton = exports.Skeleton = function Skeleton(_ref) {
28
34
  _ref$image = _ref.image,
29
35
  image = _ref$image === void 0 ? false : _ref$image,
30
36
  className = _ref.className,
37
+ size = _ref.size,
31
38
  props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
32
39
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
33
40
  "aria-hidden": true,
34
- className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), className),
41
+ className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200/80 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), size && DEFAULT_SKELETON_SIZES[size], className),
35
42
  children: image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ImageIcon, {
36
- className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
43
+ className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
37
44
  }) : null
38
45
  }));
39
46
  };
@@ -8,3 +8,4 @@ export * from "./ProgressSpinner";
8
8
  export * from "./ScrollIndicator";
9
9
  export * from "./Tag";
10
10
  export * from "./Toast";
11
+ export * from "./Skeleton";
@@ -112,4 +112,15 @@ Object.keys(_Toast).forEach(function (key) {
112
112
  return _Toast[key];
113
113
  }
114
114
  });
115
+ });
116
+ var _Skeleton = require("./Skeleton");
117
+ Object.keys(_Skeleton).forEach(function (key) {
118
+ if (key === "default" || key === "__esModule") return;
119
+ if (key in exports && exports[key] === _Skeleton[key]) return;
120
+ Object.defineProperty(exports, key, {
121
+ enumerable: true,
122
+ get: function get() {
123
+ return _Skeleton[key];
124
+ }
125
+ });
115
126
  });
@@ -66,7 +66,7 @@ var SidebarButtonLink = exports.SidebarButtonLink = function SidebarButtonLink(p
66
66
  onBlur: function onBlur() {
67
67
  return setIsInteractedWith(false);
68
68
  },
69
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n h-8 min-w-8 w-full rounded\n flex items-center space-x-3\n border border-transparent\n display-body\n hover:no-underline focus:no-underline\n ", "\n ", "\n ", "\n ", "\n "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
69
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n h-8 min-w-8 w-full rounded\n flex items-center space-x-3\n border border-transparent\n display-body\n hover:no-underline focus:no-underline\n ", "\n ", "\n ", "\n ", "\n "])), disabled ? "cursor-not-allowed opacity-70" : "focusable-visible", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
70
70
  "aria-current": isActive,
71
71
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
72
72
  className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px] shrink-0"])), showColors ? "text-accent-600" : "text-grey-400"),
@@ -30,14 +30,14 @@ var SidebarLink = exports.SidebarLink = function SidebarLink(props) {
30
30
  var isActive = !disabled && !isExternalLink && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
31
31
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
32
32
  id: id,
33
- className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex items-center overflow-hidden w-full\n group hover:no-underline focus:outline-none\n ", "\n "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
33
+ className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex items-center w-full\n group focusable-visible-group hover:no-underline focus:outline-none\n ", "\n "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
34
34
  "aria-current": isActive,
35
35
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
36
36
  className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
37
37
  width: "1rem",
38
38
  height: "1rem"
39
39
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
40
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n flex-1 inline-flex items-center overflow-hidden\n ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued group-focus:text-accent-600 group-hover:text-accent-600"),
40
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n flex-1 inline-flex items-center overflow-hidden\n ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued focusable-visible-group-item group-hover:text-accent-600"),
41
41
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
42
42
  className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
43
43
  children: children
@@ -23,7 +23,7 @@ var SidebarGroupLink = exports.SidebarGroupLink = function SidebarGroupLink(prop
23
23
  var isExternalLink = linkProps.target === "_blank";
24
24
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
25
25
  id: id,
26
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n inline-flex w-full items-center hover:no-underline focus:outline-none leading-md\n ", "\n ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600 focus:text-accent-600"),
26
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n inline-flex w-full items-center hover:no-underline leading-md\n ", "\n ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer focusable-visible", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600"),
27
27
  "aria-current": active,
28
28
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
29
29
  className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
@@ -17,7 +17,7 @@ var _SidebarContext = require("../SidebarContext");
17
17
  var _ActiveLinkIndicator = require("./ActiveLinkIndicator");
18
18
  var _SidebarGroupLink = require("./SidebarGroupLink");
19
19
  var _jsxRuntime = require("react/jsx-runtime");
20
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
20
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
21
21
  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; }
22
22
  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) { (0, _defineProperty2["default"])(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; }
23
23
  var isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
@@ -58,7 +58,7 @@ var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(p
58
58
  className: className,
59
59
  children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
60
60
  type: "button",
61
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
61
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex w-full text-left items-center mb-4 focus:outline-none group focusable-visible-group cursor-pointer"]))),
62
62
  onClick: function onClick() {
63
63
  return setIsOpen(!isOpen);
64
64
  },
@@ -69,7 +69,7 @@ var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(p
69
69
  width: "1rem",
70
70
  height: "1rem"
71
71
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
72
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
72
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 focusable-visible-group-item group-hover:text-accent-500 mr-2"]))),
73
73
  children: props.title
74
74
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronRightIcon, {
75
75
  className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 motion-safe:transition-all motion-safe:duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
@@ -83,10 +83,9 @@ var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(p
83
83
  activeIndex: activeLinkIndex,
84
84
  linksCount: links.length
85
85
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
86
- className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 overflow-hidden"]))),
86
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 min-w-0"]))),
87
87
  children: links.map(function (link, idx) {
88
88
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
89
- className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
90
89
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarGroupLink.SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
91
90
  active: activeLinkIndex === idx
92
91
  }))
@@ -1,4 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
+ import { type DisplayMode } from "../Table";
2
3
  import type { ColumnDefinition, DataConfiguration, GetItemId, PaginationConfiguration, Row, SelectMode, Sorting, Status } from "./types";
3
4
  declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
4
5
  export declare type SortMode = "single" | "multi";
@@ -21,6 +22,7 @@ interface BaseDataTableProps<Item> {
21
22
  pagination?: PaginationConfiguration;
22
23
  /** the `onChange` is triggered when either sorting or paginating */
23
24
  onChange?(dataConfiguration: DataConfiguration): void;
25
+ mode?: DisplayMode;
24
26
  /** Specify the global status of the table */
25
27
  status?: Status;
26
28
  /** Allows for specifying a custom empty state */
@@ -51,5 +53,5 @@ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTable
51
53
  *
52
54
  * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
53
55
  */
54
- export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
56
+ export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, mode, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
55
57
  export {};
@@ -52,6 +52,8 @@ var DataTable = exports.DataTable = function DataTable(_ref) {
52
52
  itemId = _ref.itemId,
53
53
  columns = _ref.columns,
54
54
  onChange = _ref.onChange,
55
+ _ref$mode = _ref.mode,
56
+ mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
55
57
  _ref$status = _ref.status,
56
58
  status = _ref$status === void 0 ? "success" : _ref$status,
57
59
  noDataContent = _ref.noDataContent,
@@ -220,6 +222,7 @@ var DataTable = exports.DataTable = function DataTable(_ref) {
220
222
  })
221
223
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.Table, {
222
224
  className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
225
+ mode: mode,
223
226
  highlight: false,
224
227
  footer: shouldRenderPagination() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.DataTableFooter, {
225
228
  pagination: pagination,
@@ -1,9 +1,11 @@
1
1
  import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes, VFC } from "react";
2
+ export declare type DisplayMode = "comfortable" | "compact";
2
3
  export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
3
4
  footer?: ReactNode;
4
5
  smallFooter?: boolean;
5
6
  hasActions?: boolean;
6
7
  highlight?: boolean;
8
+ mode?: DisplayMode;
7
9
  }
8
10
  /**
9
11
  * The `Table` component is used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
@@ -13,7 +13,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers
13
13
  var _TableFooter = require("./components/TableFooter");
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
15
  var _templateObject, _templateObject2, _templateObject3;
16
- var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
16
+ var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight", "mode"];
17
17
  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; }
18
18
  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) { (0, _defineProperty2["default"])(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; }
19
19
  /**
@@ -29,13 +29,15 @@ var Table = exports.Table = function Table(_ref) {
29
29
  hasActions = _ref.hasActions,
30
30
  _ref$highlight = _ref.highlight,
31
31
  highlight = _ref$highlight === void 0 ? true : _ref$highlight,
32
+ _ref$mode = _ref.mode,
33
+ mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
32
34
  props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
33
35
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
34
36
  className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
35
37
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
36
38
  className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"]))),
37
39
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", _objectSpread(_objectSpread({}, props), {}, {
38
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
40
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", " ", ""])), mode === "compact" && "table-compact", hasActions && "table-with-actions", highlight && "table-with-highlight")
39
41
  }))
40
42
  }), !!footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooter.TableFooter, {
41
43
  size: smallFooter ? "small" : "default",
@@ -11,7 +11,7 @@ var tablePlugin = plugin(function (_ref) {
11
11
  borderCollapse: "collapse",
12
12
  textAlign: "left",
13
13
  "th, td": {
14
- padding: "14px 16px"
14
+ padding: "12px 16px"
15
15
  },
16
16
  thead: {
17
17
  backgroundColor: theme("colors.grey.50")
@@ -24,6 +24,11 @@ var tablePlugin = plugin(function (_ref) {
24
24
  borderBottom: "1px solid ".concat(theme("colors.grey.100"))
25
25
  }
26
26
  },
27
+ ".table-compact": {
28
+ "th, td": {
29
+ padding: "10px 16px"
30
+ }
31
+ },
27
32
  ".table-with-actions": {
28
33
  "th:last-of-type, td:last-of-type": {
29
34
  textAlign: "right"
@@ -1,5 +1,5 @@
1
- import type { IconComponentType } from "Icons";
2
1
  import type { FC } from "react";
2
+ import type { IconComponentType } from "../../../../Icons";
3
3
  import type { BaseItemProps } from "../../useMenuItemProps";
4
4
  declare type LinkItemNavigationType = "auto" | "reload" | "newTab";
5
5
  export declare type LinkItemProps = BaseItemProps & {
@@ -1,6 +1,6 @@
1
1
  import type { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
2
- import type { IconComponentType } from "Icons";
3
2
  import type { FC } from "react";
3
+ import type { IconComponentType } from "../../../../Icons";
4
4
  export interface ToggleItemProps extends Omit<DropdownMenuCheckboxItemProps, "asChild"> {
5
5
  startIcon?: IconComponentType;
6
6
  }
@@ -141,5 +141,5 @@ module.exports = {
141
141
  }
142
142
  }
143
143
  },
144
- plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
144
+ plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Actions/Accordion/Accordion.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
145
145
  };
@@ -1 +1 @@
1
- export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "left" | "right" | "top" | "bottom" | "all" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "item" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;
1
+ export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "item" | "all" | "left" | "right" | "top" | "bottom" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;
@@ -0,0 +1,142 @@
1
+ import * as RadixAccordion from "@radix-ui/react-accordion";
2
+ import type { ReactNode, VFC } from "react";
3
+ import type { IconComponentType } from "../../Icons";
4
+ declare type AccordionSharedProps = {
5
+ children: ReactNode;
6
+ /**
7
+ * Defines a class name for the `Accordion`.
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Defines whether the `Accordion` is disabled, preventing the user from interacting with the accordion and all its items.
12
+ */
13
+ disabled?: boolean;
14
+ };
15
+ declare type AccordionSingleProps = {
16
+ /**
17
+ * Defines whether a single or multiple items can be expanded at a time.
18
+ * @default false
19
+ */
20
+ multiple?: false;
21
+ /**
22
+ * Defines the controlled value of the item to expand when `multiple` is `false`.
23
+ * Must be used in conjunction with `onValueChange`.
24
+ */
25
+ value?: RadixAccordion.AccordionSingleProps["value"];
26
+ /**
27
+ * Defines the value of the item to expand when initially rendered and `multiple` is `false`.
28
+ * Use when you do not need to control the state of the items.
29
+ */
30
+ defaultValue?: RadixAccordion.AccordionSingleProps["defaultValue"];
31
+ /**
32
+ * Defines the event handler called when the expanded state of an item changes and `multiple` is `false`.
33
+ */
34
+ onChange?: RadixAccordion.AccordionSingleProps["onValueChange"];
35
+ /**
36
+ * Allows closing content when clicking trigger for an open item when `multiple` is `false`.
37
+ * @default true
38
+ */
39
+ collapsible?: boolean;
40
+ };
41
+ declare type AccordionMultipleProps = {
42
+ /**
43
+ * Defines whether a single or multiple items can be expanded at a time.
44
+ * @default false
45
+ */
46
+ multiple: true;
47
+ /**
48
+ * Defines the controlled value of the item to expand when `multiple` is `true`.
49
+ * Must be used in conjunction with `onValueChange`.
50
+ */
51
+ value?: RadixAccordion.AccordionMultipleProps["value"];
52
+ /**
53
+ * Defines the value of the item to expand when initially rendered when `multiple` is `true`.
54
+ * Use when you do not need to control the state of the items.
55
+ */
56
+ defaultValue?: RadixAccordion.AccordionMultipleProps["defaultValue"];
57
+ /**
58
+ * Defines the event handler called when the expanded state of an item changes and `multiple` is `true`.
59
+ */
60
+ onChange?: RadixAccordion.AccordionMultipleProps["onValueChange"];
61
+ /**
62
+ * Only available when `multiple` is `false`.
63
+ */
64
+ collapsible?: never;
65
+ };
66
+ export declare type AccordionProps = AccordionSharedProps & (AccordionSingleProps | AccordionMultipleProps);
67
+ export declare type AccordionItemProps = {
68
+ children: ReactNode;
69
+ /**
70
+ * Defines a class name for the item.
71
+ */
72
+ className?: string;
73
+ /**
74
+ * Defines a unique value for the item.
75
+ */
76
+ value: string;
77
+ /**
78
+ * Defines whether the item is disabled, preventing the user from interacting with the item.
79
+ */
80
+ disabled?: boolean;
81
+ };
82
+ export declare type AccordionHeaderProps = {
83
+ /**
84
+ * Defines the title of the header.
85
+ */
86
+ children: ReactNode;
87
+ /**
88
+ * Defines a class name for the header.
89
+ */
90
+ className?: string;
91
+ /**
92
+ * Defines an icon to display next to the title and description.
93
+ */
94
+ icon?: IconComponentType;
95
+ /**
96
+ * Defines a class name for the icon.
97
+ */
98
+ iconClassName?: string;
99
+ /**
100
+ * Defines a class name for the icon background.
101
+ */
102
+ iconBgClassName?: string;
103
+ /**
104
+ * Defines a description for the header.
105
+ */
106
+ description?: ReactNode;
107
+ /**
108
+ * Defines a meta value for the header.
109
+ */
110
+ meta?: ReactNode;
111
+ /**
112
+ * Defines an icon to display as the trigger.
113
+ * Defaults to a chevron icon.
114
+ */
115
+ triggerIcon?: IconComponentType;
116
+ /**
117
+ * Defines a class name for the trigger.
118
+ */
119
+ triggerClassName?: string;
120
+ };
121
+ export declare type AccordionContentProps = {
122
+ children: ReactNode;
123
+ /**
124
+ * Defines a class name for the content.
125
+ */
126
+ className?: string;
127
+ };
128
+ declare type AccordionComponent = VFC<AccordionProps> & {
129
+ Item: typeof AccordionItem;
130
+ Header: typeof AccordionHeader;
131
+ Content: typeof AccordionContent;
132
+ };
133
+ /**
134
+ * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
135
+ *
136
+ * See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
137
+ */
138
+ export declare const Accordion: AccordionComponent;
139
+ declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
140
+ declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLButtonElement>>;
141
+ declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
142
+ export {};