@algolia/satellite 1.5.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
- package/dist/cjs/Actions/Button/Button.tailwind.js +0 -12
- package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/cjs/Actions/index.d.ts +2 -0
- package/dist/cjs/Actions/index.js +18 -0
- package/dist/cjs/Fields/Field/Field.js +2 -2
- package/dist/cjs/Fields/Form/Form.d.ts +12 -10
- package/dist/cjs/Fields/Form/Form.js +50 -38
- package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
- package/dist/cjs/Fields/Form/FormContext.js +2 -2
- package/dist/cjs/Fields/Form/index.d.ts +4 -3
- package/dist/cjs/Fields/Form/index.js +31 -21
- package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
- package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
- package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
- package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
- package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
- package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
- package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
- package/dist/cjs/Fields/Form/stories/JSONForms.js +59 -56
- package/dist/cjs/Fields/Form/stories/MultiStep.js +706 -0
- package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
- package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
- package/dist/cjs/Fields/Form/useForm.js +3 -3
- package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/cjs/Icons/index.d.ts +1 -1
- package/dist/cjs/Icons/index.js +6 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/cjs/Indicators/index.d.ts +1 -0
- package/dist/cjs/Indicators/index.js +11 -0
- package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
- package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/cjs/styles/tailwind.config.js +1 -1
- package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/esm/Actions/Accordion/Accordion.js +139 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
- package/dist/esm/Actions/Button/Button.tailwind.js +0 -12
- package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/esm/Actions/index.d.ts +2 -0
- package/dist/esm/Actions/index.js +2 -2
- package/dist/esm/Fields/Field/Field.js +3 -3
- package/dist/esm/Fields/Form/Form.d.ts +12 -10
- package/dist/esm/Fields/Form/Form.js +52 -40
- package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
- package/dist/esm/Fields/Form/FormContext.js +1 -1
- package/dist/esm/Fields/Form/index.d.ts +4 -3
- package/dist/esm/Fields/Form/index.js +2 -3
- package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
- package/dist/esm/Fields/Form/stories/Complex.js +649 -643
- package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
- package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
- package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
- package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
- package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
- package/dist/esm/Fields/Form/stories/JSONForms.js +60 -57
- package/dist/esm/Fields/Form/stories/MultiStep.js +697 -0
- package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
- package/dist/esm/Fields/Form/useForm.d.ts +1 -1
- package/dist/esm/Fields/Form/useForm.js +3 -3
- package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/esm/Icons/index.d.ts +1 -1
- package/dist/esm/Icons/index.js +1 -1
- package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/esm/Indicators/index.d.ts +1 -0
- package/dist/esm/Indicators/index.js +2 -1
- package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/esm/Layout/Tables/Table/Table.js +4 -2
- package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/esm/styles/tailwind.config.js +1 -1
- package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/satellite.min.css +1 -1
- package/package.json +7 -1
@@ -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
|
16
|
-
var
|
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"])(
|
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"])(
|
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
|
};
|
@@ -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" : "
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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: "
|
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" | "
|
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 {};
|