@algolia/satellite 1.6.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/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 +1 -1
- 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 +58 -55
- package/dist/cjs/Fields/Form/stories/MultiStep.js +474 -468
- 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/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
- 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/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 +2 -2
- 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 +59 -56
- package/dist/esm/Fields/Form/stories/MultiStep.js +475 -469
- 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/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
- 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 +2 -1
@@ -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 {};
|
@@ -0,0 +1,139 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
5
|
+
var _excluded = ["children", "className"],
|
6
|
+
_excluded2 = ["onChange", "multiple"],
|
7
|
+
_excluded3 = ["onChange", "multiple", "collapsible"];
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
10
|
+
import * as RadixAccordion from "@radix-ui/react-accordion";
|
11
|
+
import cx from "clsx";
|
12
|
+
import { forwardRef } from "react";
|
13
|
+
import { ChevronDownIcon } from "../../Icons";
|
14
|
+
import stl from "../../styles/helpers/satellitePrefixer";
|
15
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
16
|
+
var ICON_SIZE = 16;
|
17
|
+
var TRIGGER_ICON_SIZE = 20;
|
18
|
+
|
19
|
+
/**
|
20
|
+
* The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
|
21
|
+
*
|
22
|
+
* See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
|
23
|
+
*/
|
24
|
+
export var Accordion = function Accordion(_ref) {
|
25
|
+
var children = _ref.children,
|
26
|
+
className = _ref.className,
|
27
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
28
|
+
var sharedProps = {
|
29
|
+
className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"]))), className)
|
30
|
+
};
|
31
|
+
if (props.multiple) {
|
32
|
+
var _onChange = props.onChange,
|
33
|
+
_multiple = props.multiple,
|
34
|
+
_rest = _objectWithoutProperties(props, _excluded2);
|
35
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, _rest), sharedProps), {}, {
|
36
|
+
type: "multiple",
|
37
|
+
onValueChange: _onChange,
|
38
|
+
children: children
|
39
|
+
}));
|
40
|
+
}
|
41
|
+
var onChange = props.onChange,
|
42
|
+
multiple = props.multiple,
|
43
|
+
_props$collapsible = props.collapsible,
|
44
|
+
collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
|
45
|
+
rest = _objectWithoutProperties(props, _excluded3);
|
46
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
|
47
|
+
type: "single",
|
48
|
+
onValueChange: onChange,
|
49
|
+
collapsible: collapsible,
|
50
|
+
children: children
|
51
|
+
}));
|
52
|
+
};
|
53
|
+
Accordion.displayName = "Accordion";
|
54
|
+
var AccordionItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
55
|
+
var value = _ref2.value,
|
56
|
+
disabled = _ref2.disabled,
|
57
|
+
children = _ref2.children,
|
58
|
+
className = _ref2.className;
|
59
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Item, {
|
60
|
+
value: value,
|
61
|
+
disabled: disabled,
|
62
|
+
ref: ref,
|
63
|
+
className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group/accordion-item flex flex-col"]))), className),
|
64
|
+
children: children
|
65
|
+
});
|
66
|
+
});
|
67
|
+
AccordionItem.displayName = "AccordionItem";
|
68
|
+
var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
69
|
+
var children = _ref3.children,
|
70
|
+
description = _ref3.description,
|
71
|
+
Icon = _ref3.icon,
|
72
|
+
_ref3$iconClassName = _ref3.iconClassName,
|
73
|
+
iconClassName = _ref3$iconClassName === void 0 ? stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["typo-subdued"]))) : _ref3$iconClassName,
|
74
|
+
_ref3$iconBgClassName = _ref3.iconBgClassName,
|
75
|
+
iconBgClassName = _ref3$iconBgClassName === void 0 ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-100"]))) : _ref3$iconBgClassName,
|
76
|
+
meta = _ref3.meta,
|
77
|
+
triggerIcon = _ref3.triggerIcon,
|
78
|
+
triggerClassName = _ref3.triggerClassName,
|
79
|
+
className = _ref3.className;
|
80
|
+
var TriggerIcon = triggerIcon || ChevronDownIcon;
|
81
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Header, {
|
82
|
+
className: className,
|
83
|
+
children: /*#__PURE__*/_jsxs(RadixAccordion.Trigger, {
|
84
|
+
ref: ref,
|
85
|
+
className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["group/accordion-trigger flex gap-x-3 items-center w-full justify-between px-3.5 py-2.5 group-first/accordion-item:rounded-t group-last/accordion-item:rounded-b bg-white border-2 border-transparent focus-visible:outline-none focus-visible:border-accent-600 enabled:hover:bg-grey-50 motion-safe:transition-colors"]))), triggerClassName),
|
86
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
87
|
+
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center gap-x-3 grow"]))),
|
88
|
+
children: [Icon && /*#__PURE__*/_jsx("span", {
|
89
|
+
className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
|
90
|
+
"aria-hidden": true,
|
91
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
92
|
+
className: cx(iconClassName, stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["group-disabled/accordion-trigger:text-grey-300"])))),
|
93
|
+
width: ICON_SIZE,
|
94
|
+
height: ICON_SIZE
|
95
|
+
})
|
96
|
+
}), /*#__PURE__*/_jsxs("div", {
|
97
|
+
className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col gap-y-1 text-left grow"]))),
|
98
|
+
children: [/*#__PURE__*/_jsx("div", {
|
99
|
+
className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
|
100
|
+
children: children
|
101
|
+
}), typeof description !== "undefined" && /*#__PURE__*/_jsx("div", {
|
102
|
+
className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
|
103
|
+
children: description
|
104
|
+
})]
|
105
|
+
})]
|
106
|
+
}), /*#__PURE__*/_jsxs("div", {
|
107
|
+
className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center gap-x-2"]))),
|
108
|
+
children: [typeof meta !== "undefined" && /*#__PURE__*/_jsx("div", {
|
109
|
+
className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
|
110
|
+
children: meta
|
111
|
+
}), /*#__PURE__*/_jsx(TriggerIcon, {
|
112
|
+
className: cx(stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
|
113
|
+
// Don't rotate the trigger icon if it's a custom one.
|
114
|
+
!triggerIcon && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([" group-data-[state=open]/accordion-trigger:rotate-180 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out"])))),
|
115
|
+
width: TRIGGER_ICON_SIZE,
|
116
|
+
height: TRIGGER_ICON_SIZE,
|
117
|
+
"aria-hidden": true
|
118
|
+
})]
|
119
|
+
})]
|
120
|
+
})
|
121
|
+
});
|
122
|
+
});
|
123
|
+
AccordionHeader.displayName = "AccordionHeader";
|
124
|
+
var AccordionContent = /*#__PURE__*/forwardRef(function (_ref4, ref) {
|
125
|
+
var children = _ref4.children,
|
126
|
+
className = _ref4.className;
|
127
|
+
return /*#__PURE__*/_jsx(RadixAccordion.Content, {
|
128
|
+
ref: ref,
|
129
|
+
className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
|
130
|
+
children: /*#__PURE__*/_jsx("div", {
|
131
|
+
className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["px-4 pt-2 pb-4"]))),
|
132
|
+
children: children
|
133
|
+
})
|
134
|
+
});
|
135
|
+
});
|
136
|
+
AccordionContent.displayName = "AccordionContent";
|
137
|
+
Accordion.Item = AccordionItem;
|
138
|
+
Accordion.Header = AccordionHeader;
|
139
|
+
Accordion.Content = AccordionContent;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import _plugin from "tailwindcss/plugin";
|
2
|
+
// @ts-check
|
3
|
+
var plugin = _plugin;
|
4
|
+
var accordionPlugin = plugin(function (_ref) {
|
5
|
+
var addComponents = _ref.addComponents;
|
6
|
+
var animationDuration = "300ms";
|
7
|
+
var animationEasing = "ease-out";
|
8
|
+
addComponents({
|
9
|
+
/* eslint-disable @algolia/stl/prefer-stl-helper */
|
10
|
+
"@media (prefers-reduced-motion: no-preference)": {
|
11
|
+
".accordion-content": {
|
12
|
+
"&[data-state='open']": {
|
13
|
+
animation: "stl-accordion-content-slide-down ".concat(animationDuration, " ").concat(animationEasing)
|
14
|
+
},
|
15
|
+
"&[data-state='closed']": {
|
16
|
+
animation: "stl-accordion-content-slide-up ".concat(animationDuration, " ").concat(animationEasing)
|
17
|
+
}
|
18
|
+
}
|
19
|
+
},
|
20
|
+
"@keyframes stl-accordion-content-slide-down": {
|
21
|
+
from: {
|
22
|
+
height: "0",
|
23
|
+
opacity: "0"
|
24
|
+
},
|
25
|
+
to: {
|
26
|
+
height: "var(--radix-accordion-content-height)",
|
27
|
+
opacity: "1"
|
28
|
+
}
|
29
|
+
},
|
30
|
+
"@keyframes stl-accordion-content-slide-up": {
|
31
|
+
from: {
|
32
|
+
height: "var(--radix-accordion-content-height)",
|
33
|
+
opacity: "1"
|
34
|
+
},
|
35
|
+
to: {
|
36
|
+
height: "0",
|
37
|
+
opacity: "0"
|
38
|
+
}
|
39
|
+
}
|
40
|
+
/* eslint-enable @algolia/stl/prefer-stl-helper */
|
41
|
+
});
|
42
|
+
});
|
43
|
+
export default accordionPlugin;
|
@@ -15,7 +15,7 @@ declare type ToggleGroupSingleProps = {
|
|
15
15
|
type: "single";
|
16
16
|
/**
|
17
17
|
* Defines the controlled value of the pressed item.
|
18
|
-
* Must be used in conjunction with `
|
18
|
+
* Must be used in conjunction with `onChange`.
|
19
19
|
*/
|
20
20
|
value?: RadixToggleGroupSingleProps["value"];
|
21
21
|
/**
|
@@ -31,7 +31,7 @@ declare type ToggleGroupMultipleProps = {
|
|
31
31
|
type: "multiple";
|
32
32
|
/**
|
33
33
|
* Defines the controlled value of the pressed items.
|
34
|
-
* Must be used in conjunction with `
|
34
|
+
* Must be used in conjunction with `onChange`.
|
35
35
|
*/
|
36
36
|
value?: RadixToggleGroupMultipleProps["value"];
|
37
37
|
/**
|
@@ -1,3 +1,5 @@
|
|
1
|
+
export type { AccordionProps as ExperimentalAccordionProps, AccordionContentProps as ExperimentalAccordionContentProps, AccordionHeaderProps as ExperimentalAccordionHeaderProps, AccordionItemProps as ExperimentalAccordionItemProps, } from "./Accordion/Accordion";
|
2
|
+
export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
|
1
3
|
export * from "./Button/Button";
|
2
4
|
export * from "./ButtonGroup/ButtonGroup";
|
3
5
|
export * from "./ButtonLink/ButtonLink";
|