@lobehub/ui 2.14.0 → 2.15.1
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/es/Accordion/Accordion.d.ts +4 -0
- package/es/Accordion/Accordion.js +125 -0
- package/es/Accordion/AccordionItem.d.ts +4 -0
- package/es/Accordion/AccordionItem.js +274 -0
- package/es/Accordion/ArrowIcon.d.ts +3 -0
- package/es/Accordion/ArrowIcon.js +36 -0
- package/es/Accordion/context.d.ts +16 -0
- package/es/Accordion/context.js +9 -0
- package/es/Accordion/index.d.ts +3 -0
- package/es/Accordion/index.js +3 -0
- package/es/Accordion/style.d.ts +12 -0
- package/es/Accordion/style.js +19 -0
- package/es/Accordion/type.d.ts +131 -0
- package/es/Accordion/type.js +1 -0
- package/es/DraggableSideNav/DraggableSideNav.js +116 -109
- package/es/DraggableSideNav/style.js +3 -3
- package/es/DraggableSideNav/type.d.ts +32 -26
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/es/styles/theme/customStylish.js +11 -11
- package/package.json +1 -1
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["children", "className", "style", "accordion", "defaultExpandedKeys", "expandedKeys", "onExpandedChange", "variant", "gap", "showDivider", "disableAnimation", "hideIndicator", "indicatorPlacement", "keepContentMounted", "classNames", "styles", "motionProps"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
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; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
11
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
13
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
14
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
15
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
16
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
17
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
18
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
19
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
21
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
22
|
+
import { Divider } from 'antd';
|
|
23
|
+
import { LayoutGroup } from 'framer-motion';
|
|
24
|
+
import { Children, Fragment, forwardRef, isValidElement, memo, useCallback } from 'react';
|
|
25
|
+
import useMergeState from 'use-merge-value';
|
|
26
|
+
import { AccordionContext } from "./context";
|
|
27
|
+
import { useStyles } from "./style";
|
|
28
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
29
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
31
|
+
var Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
32
|
+
var children = _ref.children,
|
|
33
|
+
userClassName = _ref.className,
|
|
34
|
+
userStyle = _ref.style,
|
|
35
|
+
_ref$accordion = _ref.accordion,
|
|
36
|
+
accordion = _ref$accordion === void 0 ? false : _ref$accordion,
|
|
37
|
+
_ref$defaultExpandedK = _ref.defaultExpandedKeys,
|
|
38
|
+
defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
|
|
39
|
+
expandedKeysProp = _ref.expandedKeys,
|
|
40
|
+
onExpandedChange = _ref.onExpandedChange,
|
|
41
|
+
_ref$variant = _ref.variant,
|
|
42
|
+
variant = _ref$variant === void 0 ? 'borderless' : _ref$variant,
|
|
43
|
+
gap = _ref.gap,
|
|
44
|
+
_ref$showDivider = _ref.showDivider,
|
|
45
|
+
showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
|
|
46
|
+
_ref$disableAnimation = _ref.disableAnimation,
|
|
47
|
+
disableAnimation = _ref$disableAnimation === void 0 ? false : _ref$disableAnimation,
|
|
48
|
+
_ref$hideIndicator = _ref.hideIndicator,
|
|
49
|
+
hideIndicator = _ref$hideIndicator === void 0 ? false : _ref$hideIndicator,
|
|
50
|
+
_ref$indicatorPlaceme = _ref.indicatorPlacement,
|
|
51
|
+
indicatorPlacement = _ref$indicatorPlaceme === void 0 ? 'start' : _ref$indicatorPlaceme,
|
|
52
|
+
_ref$keepContentMount = _ref.keepContentMounted,
|
|
53
|
+
keepContentMounted = _ref$keepContentMount === void 0 ? false : _ref$keepContentMount,
|
|
54
|
+
classNames = _ref.classNames,
|
|
55
|
+
customStyles = _ref.styles,
|
|
56
|
+
motionProps = _ref.motionProps,
|
|
57
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
58
|
+
var _useStyles = useStyles(),
|
|
59
|
+
cx = _useStyles.cx,
|
|
60
|
+
styles = _useStyles.styles;
|
|
61
|
+
var _useMergeState = useMergeState(defaultExpandedKeys, {
|
|
62
|
+
onChange: onExpandedChange,
|
|
63
|
+
value: expandedKeysProp
|
|
64
|
+
}),
|
|
65
|
+
_useMergeState2 = _slicedToArray(_useMergeState, 2),
|
|
66
|
+
expandedKeys = _useMergeState2[0],
|
|
67
|
+
setExpandedKeys = _useMergeState2[1];
|
|
68
|
+
var toggleExpand = useCallback(function (key) {
|
|
69
|
+
var prev = expandedKeys;
|
|
70
|
+
var newKeys;
|
|
71
|
+
if (accordion) {
|
|
72
|
+
newKeys = prev.includes(key) ? [] : [key];
|
|
73
|
+
} else {
|
|
74
|
+
newKeys = prev.includes(key) ? prev.filter(function (k) {
|
|
75
|
+
return k !== key;
|
|
76
|
+
}) : [].concat(_toConsumableArray(prev), [key]);
|
|
77
|
+
}
|
|
78
|
+
setExpandedKeys(newKeys);
|
|
79
|
+
}, [accordion, expandedKeys, setExpandedKeys]);
|
|
80
|
+
var isExpanded = useCallback(function (key) {
|
|
81
|
+
return expandedKeys.includes(key);
|
|
82
|
+
}, [expandedKeys]);
|
|
83
|
+
var contextValue = {
|
|
84
|
+
disableAnimation: disableAnimation,
|
|
85
|
+
expandedKeys: expandedKeys,
|
|
86
|
+
hideIndicator: hideIndicator,
|
|
87
|
+
indicatorPlacement: indicatorPlacement,
|
|
88
|
+
isExpanded: isExpanded,
|
|
89
|
+
keepContentMounted: keepContentMounted,
|
|
90
|
+
motionProps: motionProps,
|
|
91
|
+
onToggle: toggleExpand,
|
|
92
|
+
showDivider: showDivider,
|
|
93
|
+
variant: variant
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
// Convert children to array and filter valid elements
|
|
97
|
+
var validChildren = Children.toArray(children).filter(isValidElement);
|
|
98
|
+
var content = /*#__PURE__*/_jsx(_Fragment, {
|
|
99
|
+
children: validChildren.map(function (child, index) {
|
|
100
|
+
// Extract itemKey from child props to use as React key
|
|
101
|
+
var childKey = child.props.itemKey || index;
|
|
102
|
+
return /*#__PURE__*/_jsxs(Fragment, {
|
|
103
|
+
children: [child, showDivider && index < validChildren.length - 1 && /*#__PURE__*/_jsx(Divider, {
|
|
104
|
+
className: styles.divider
|
|
105
|
+
})]
|
|
106
|
+
}, childKey);
|
|
107
|
+
})
|
|
108
|
+
});
|
|
109
|
+
return /*#__PURE__*/_jsx(AccordionContext.Provider, {
|
|
110
|
+
value: contextValue,
|
|
111
|
+
children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
|
|
112
|
+
className: cx(styles.base, classNames === null || classNames === void 0 ? void 0 : classNames.base, userClassName),
|
|
113
|
+
ref: ref,
|
|
114
|
+
style: _objectSpread(_objectSpread({
|
|
115
|
+
gap: gap
|
|
116
|
+
}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.base), userStyle)
|
|
117
|
+
}, rest), {}, {
|
|
118
|
+
children: disableAnimation ? content : /*#__PURE__*/_jsx(LayoutGroup, {
|
|
119
|
+
children: content
|
|
120
|
+
})
|
|
121
|
+
}))
|
|
122
|
+
});
|
|
123
|
+
}));
|
|
124
|
+
Accordion.displayName = 'Accordion';
|
|
125
|
+
export default Accordion;
|
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
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; }
|
|
5
|
+
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; }
|
|
6
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
7
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
8
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
9
|
+
import { AnimatePresence, LazyMotion, m } from 'framer-motion';
|
|
10
|
+
import { memo, useCallback } from 'react';
|
|
11
|
+
import { Flexbox } from 'react-layout-kit';
|
|
12
|
+
import Block from "../Block";
|
|
13
|
+
import Text from "../Text";
|
|
14
|
+
import ArrowIcon from "./ArrowIcon";
|
|
15
|
+
import { useAccordionContext } from "./context";
|
|
16
|
+
import { useStyles } from "./style";
|
|
17
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
20
|
+
var loadFeatures = function loadFeatures() {
|
|
21
|
+
return import('framer-motion').then(function (res) {
|
|
22
|
+
return res.domAnimation;
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
var AccordionItem = /*#__PURE__*/memo(function (_ref) {
|
|
26
|
+
var _ref2, _ref3;
|
|
27
|
+
var itemKey = _ref.itemKey,
|
|
28
|
+
title = _ref.title,
|
|
29
|
+
children = _ref.children,
|
|
30
|
+
action = _ref.action,
|
|
31
|
+
_ref$disabled = _ref.disabled,
|
|
32
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
33
|
+
itemHideIndicator = _ref.hideIndicator,
|
|
34
|
+
itemIndicatorPlacement = _ref.indicatorPlacement,
|
|
35
|
+
customIndicator = _ref.indicator,
|
|
36
|
+
classNames = _ref.classNames,
|
|
37
|
+
_ref$paddingInline = _ref.paddingInline,
|
|
38
|
+
paddingInline = _ref$paddingInline === void 0 ? 16 : _ref$paddingInline,
|
|
39
|
+
_ref$paddingBlock = _ref.paddingBlock,
|
|
40
|
+
paddingBlock = _ref$paddingBlock === void 0 ? 8 : _ref$paddingBlock,
|
|
41
|
+
customStyles = _ref.styles;
|
|
42
|
+
var _useStyles = useStyles(),
|
|
43
|
+
cx = _useStyles.cx,
|
|
44
|
+
styles = _useStyles.styles;
|
|
45
|
+
var context = useAccordionContext();
|
|
46
|
+
var isExpanded = context.isExpanded,
|
|
47
|
+
onToggle = context.onToggle,
|
|
48
|
+
contextHideIndicator = context.hideIndicator,
|
|
49
|
+
contextIndicatorPlacement = context.indicatorPlacement,
|
|
50
|
+
keepContentMounted = context.keepContentMounted,
|
|
51
|
+
disableAnimation = context.disableAnimation,
|
|
52
|
+
contextMotionProps = context.motionProps,
|
|
53
|
+
_context$variant = context.variant,
|
|
54
|
+
variant = _context$variant === void 0 ? 'filled' : _context$variant;
|
|
55
|
+
var isOpen = isExpanded(itemKey);
|
|
56
|
+
var hideIndicatorFinal = (_ref2 = itemHideIndicator !== null && itemHideIndicator !== void 0 ? itemHideIndicator : contextHideIndicator) !== null && _ref2 !== void 0 ? _ref2 : false;
|
|
57
|
+
var indicatorPlacementFinal = (_ref3 = itemIndicatorPlacement !== null && itemIndicatorPlacement !== void 0 ? itemIndicatorPlacement : contextIndicatorPlacement) !== null && _ref3 !== void 0 ? _ref3 : 'start';
|
|
58
|
+
var handleToggle = useCallback(function () {
|
|
59
|
+
if (!disabled) {
|
|
60
|
+
onToggle(itemKey);
|
|
61
|
+
}
|
|
62
|
+
}, [disabled, itemKey, onToggle]);
|
|
63
|
+
var handleKeyDown = useCallback(function (e) {
|
|
64
|
+
if (disabled) return;
|
|
65
|
+
switch (e.key) {
|
|
66
|
+
case 'Enter':
|
|
67
|
+
case ' ':
|
|
68
|
+
{
|
|
69
|
+
e.preventDefault();
|
|
70
|
+
handleToggle();
|
|
71
|
+
break;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}, [disabled, handleToggle]);
|
|
75
|
+
|
|
76
|
+
// Build indicator
|
|
77
|
+
var renderIndicator = function renderIndicator() {
|
|
78
|
+
if (hideIndicatorFinal) return null;
|
|
79
|
+
if (customIndicator) {
|
|
80
|
+
if (typeof customIndicator === 'function') {
|
|
81
|
+
return /*#__PURE__*/_jsx("span", {
|
|
82
|
+
"aria-hidden": "true",
|
|
83
|
+
className: cx(styles.indicator, classNames === null || classNames === void 0 ? void 0 : classNames.indicator),
|
|
84
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator,
|
|
85
|
+
children: customIndicator({
|
|
86
|
+
isDisabled: disabled,
|
|
87
|
+
isOpen: isOpen
|
|
88
|
+
})
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
return /*#__PURE__*/_jsx("span", {
|
|
92
|
+
"aria-hidden": "true",
|
|
93
|
+
className: cx(styles.indicator, classNames === null || classNames === void 0 ? void 0 : classNames.indicator),
|
|
94
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator,
|
|
95
|
+
children: customIndicator
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
return /*#__PURE__*/_jsx("span", {
|
|
99
|
+
"aria-hidden": "true",
|
|
100
|
+
className: cx(styles.indicator, classNames === null || classNames === void 0 ? void 0 : classNames.indicator),
|
|
101
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator,
|
|
102
|
+
children: /*#__PURE__*/_jsx(ArrowIcon, {
|
|
103
|
+
className: cx(styles.icon, isOpen && styles.iconRotate)
|
|
104
|
+
})
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
// Animation variants
|
|
109
|
+
var motionProps = _objectSpread({
|
|
110
|
+
animate: isOpen ? 'enter' : 'exit',
|
|
111
|
+
exit: 'exit',
|
|
112
|
+
initial: 'exit',
|
|
113
|
+
variants: {
|
|
114
|
+
enter: {
|
|
115
|
+
height: 'auto',
|
|
116
|
+
opacity: 1,
|
|
117
|
+
transition: {
|
|
118
|
+
duration: 0.3,
|
|
119
|
+
ease: [0.4, 0, 0.2, 1]
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
exit: {
|
|
123
|
+
height: 0,
|
|
124
|
+
opacity: 0,
|
|
125
|
+
transition: {
|
|
126
|
+
duration: 0.3,
|
|
127
|
+
ease: [0.4, 0, 0.2, 1]
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}, contextMotionProps);
|
|
132
|
+
|
|
133
|
+
// Render content
|
|
134
|
+
var renderContent = function renderContent() {
|
|
135
|
+
if (disableAnimation) {
|
|
136
|
+
if (keepContentMounted) {
|
|
137
|
+
return /*#__PURE__*/_jsx("div", {
|
|
138
|
+
className: cx('accordion-content', styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
|
|
139
|
+
role: "region",
|
|
140
|
+
style: _objectSpread({
|
|
141
|
+
display: isOpen ? 'block' : 'none'
|
|
142
|
+
}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
|
|
143
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
144
|
+
className: styles.contentInner,
|
|
145
|
+
children: children
|
|
146
|
+
})
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
return isOpen && /*#__PURE__*/_jsx("div", {
|
|
150
|
+
className: cx('accordion-content', styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
|
|
151
|
+
role: "region",
|
|
152
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
|
|
153
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
154
|
+
className: styles.contentInner,
|
|
155
|
+
children: children
|
|
156
|
+
})
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
return keepContentMounted ? /*#__PURE__*/_jsx(LazyMotion, {
|
|
160
|
+
features: loadFeatures,
|
|
161
|
+
children: /*#__PURE__*/_jsx(m.div, _objectSpread(_objectSpread({}, motionProps), {}, {
|
|
162
|
+
style: {
|
|
163
|
+
overflow: 'hidden'
|
|
164
|
+
},
|
|
165
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
166
|
+
className: cx('accordion-content', styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
|
|
167
|
+
role: "region",
|
|
168
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
|
|
169
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
170
|
+
className: styles.contentInner,
|
|
171
|
+
children: children
|
|
172
|
+
})
|
|
173
|
+
})
|
|
174
|
+
}))
|
|
175
|
+
}) : /*#__PURE__*/_jsx(AnimatePresence, {
|
|
176
|
+
initial: false,
|
|
177
|
+
children: isOpen && /*#__PURE__*/_jsx(LazyMotion, {
|
|
178
|
+
features: loadFeatures,
|
|
179
|
+
children: /*#__PURE__*/_jsx(m.div, _objectSpread(_objectSpread({}, motionProps), {}, {
|
|
180
|
+
style: {
|
|
181
|
+
overflow: 'hidden'
|
|
182
|
+
},
|
|
183
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
184
|
+
className: cx('accordion-content', styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
|
|
185
|
+
role: "region",
|
|
186
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
|
|
187
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
188
|
+
className: styles.contentInner,
|
|
189
|
+
children: children
|
|
190
|
+
})
|
|
191
|
+
})
|
|
192
|
+
}))
|
|
193
|
+
})
|
|
194
|
+
});
|
|
195
|
+
};
|
|
196
|
+
var titleNode = typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
197
|
+
className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
|
|
198
|
+
ellipsis: true,
|
|
199
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.title,
|
|
200
|
+
children: title
|
|
201
|
+
}) : title;
|
|
202
|
+
var actionNode = action && /*#__PURE__*/_jsx(Flexbox, {
|
|
203
|
+
align: 'center',
|
|
204
|
+
className: cx('accordion-action', styles.action, classNames === null || classNames === void 0 ? void 0 : classNames.action),
|
|
205
|
+
flex: 'none',
|
|
206
|
+
gap: 4,
|
|
207
|
+
horizontal: true,
|
|
208
|
+
onClick: function onClick(e) {
|
|
209
|
+
return e.stopPropagation();
|
|
210
|
+
},
|
|
211
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.action,
|
|
212
|
+
children: action
|
|
213
|
+
});
|
|
214
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
215
|
+
className: cx('accordion-item', styles.item, classNames === null || classNames === void 0 ? void 0 : classNames.base),
|
|
216
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.base,
|
|
217
|
+
children: [/*#__PURE__*/_jsx(Block, {
|
|
218
|
+
className: cx('accordion-header', styles.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
|
|
219
|
+
clickable: !disabled,
|
|
220
|
+
gap: 4,
|
|
221
|
+
horizontal: true,
|
|
222
|
+
justify: 'space-between',
|
|
223
|
+
onClick: handleToggle,
|
|
224
|
+
onKeyDown: handleKeyDown,
|
|
225
|
+
paddingBlock: paddingBlock,
|
|
226
|
+
paddingInline: paddingInline,
|
|
227
|
+
style: {
|
|
228
|
+
alignItems: 'center',
|
|
229
|
+
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
230
|
+
opacity: disabled ? 0.5 : undefined,
|
|
231
|
+
overflow: 'hidden',
|
|
232
|
+
width: '100%'
|
|
233
|
+
},
|
|
234
|
+
variant: variant,
|
|
235
|
+
children: indicatorPlacementFinal === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
236
|
+
children: [/*#__PURE__*/_jsxs(Flexbox, {
|
|
237
|
+
align: 'center',
|
|
238
|
+
flex: 1,
|
|
239
|
+
gap: 2,
|
|
240
|
+
horizontal: true,
|
|
241
|
+
style: {
|
|
242
|
+
overflow: 'hidden'
|
|
243
|
+
},
|
|
244
|
+
children: [titleNode, renderIndicator()]
|
|
245
|
+
}), /*#__PURE__*/_jsx(Flexbox, {
|
|
246
|
+
align: 'center',
|
|
247
|
+
flex: 'none',
|
|
248
|
+
gap: 4,
|
|
249
|
+
horizontal: true,
|
|
250
|
+
children: actionNode
|
|
251
|
+
})]
|
|
252
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
253
|
+
children: [/*#__PURE__*/_jsx(Flexbox, {
|
|
254
|
+
align: 'center',
|
|
255
|
+
flex: 1,
|
|
256
|
+
gap: 2,
|
|
257
|
+
horizontal: true,
|
|
258
|
+
style: {
|
|
259
|
+
overflow: 'hidden'
|
|
260
|
+
},
|
|
261
|
+
children: titleNode
|
|
262
|
+
}), /*#__PURE__*/_jsxs(Flexbox, {
|
|
263
|
+
align: 'center',
|
|
264
|
+
flex: 'none',
|
|
265
|
+
gap: 4,
|
|
266
|
+
horizontal: true,
|
|
267
|
+
children: [actionNode, renderIndicator()]
|
|
268
|
+
})]
|
|
269
|
+
})
|
|
270
|
+
}), renderContent()]
|
|
271
|
+
});
|
|
272
|
+
});
|
|
273
|
+
AccordionItem.displayName = 'AccordionItem';
|
|
274
|
+
export default AccordionItem;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["size", "style"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
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; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { memo } from 'react';
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
var ArrowIcon = /*#__PURE__*/memo(function (_ref) {
|
|
15
|
+
var _ref$size = _ref.size,
|
|
16
|
+
size = _ref$size === void 0 ? '1em' : _ref$size,
|
|
17
|
+
style = _ref.style,
|
|
18
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({
|
|
20
|
+
fill: "currentColor",
|
|
21
|
+
fillRule: "evenodd",
|
|
22
|
+
height: size,
|
|
23
|
+
style: _objectSpread({
|
|
24
|
+
flex: 'none',
|
|
25
|
+
lineHeight: 1
|
|
26
|
+
}, style),
|
|
27
|
+
viewBox: "0 0 16 16",
|
|
28
|
+
width: size,
|
|
29
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
30
|
+
}, rest), {}, {
|
|
31
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
32
|
+
d: "M7.002 10.624a.5.5 0 01-.752-.432V5.808a.5.5 0 01.752-.432l3.758 2.192a.5.5 0 010 .864l-3.758 2.192z"
|
|
33
|
+
})
|
|
34
|
+
}));
|
|
35
|
+
});
|
|
36
|
+
export default ArrowIcon;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Key } from 'react';
|
|
2
|
+
interface AccordionContextValue {
|
|
3
|
+
disableAnimation?: boolean;
|
|
4
|
+
expandedKeys: Key[];
|
|
5
|
+
hideIndicator?: boolean;
|
|
6
|
+
indicatorPlacement?: 'end' | 'start';
|
|
7
|
+
isExpanded: (key: Key) => boolean;
|
|
8
|
+
keepContentMounted?: boolean;
|
|
9
|
+
motionProps?: any;
|
|
10
|
+
onToggle: (key: Key) => void;
|
|
11
|
+
showDivider?: boolean;
|
|
12
|
+
variant?: 'filled' | 'outlined' | 'borderless';
|
|
13
|
+
}
|
|
14
|
+
export declare const AccordionContext: import("react").Context<AccordionContextValue | null>;
|
|
15
|
+
export declare const useAccordionContext: () => AccordionContextValue;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
export var AccordionContext = /*#__PURE__*/createContext(null);
|
|
3
|
+
export var useAccordionContext = function useAccordionContext() {
|
|
4
|
+
var context = useContext(AccordionContext);
|
|
5
|
+
if (!context) {
|
|
6
|
+
throw new Error('AccordionItem must be used within Accordion');
|
|
7
|
+
}
|
|
8
|
+
return context;
|
|
9
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
+
action: import("antd-style").SerializedStyles;
|
|
3
|
+
base: import("antd-style").SerializedStyles;
|
|
4
|
+
content: import("antd-style").SerializedStyles;
|
|
5
|
+
contentInner: import("antd-style").SerializedStyles;
|
|
6
|
+
divider: import("antd-style").SerializedStyles;
|
|
7
|
+
header: import("antd-style").SerializedStyles;
|
|
8
|
+
icon: import("antd-style").SerializedStyles;
|
|
9
|
+
iconRotate: import("antd-style").SerializedStyles;
|
|
10
|
+
indicator: import("antd-style").SerializedStyles;
|
|
11
|
+
item: import("antd-style").SerializedStyles;
|
|
12
|
+
}>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
token = _ref.token;
|
|
7
|
+
return {
|
|
8
|
+
action: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 0;\n opacity: 0;\n transition:\n opacity,\n width 0.2s ", ";\n "])), token.motionEaseOut),
|
|
9
|
+
base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: 100%;\n "]))),
|
|
10
|
+
content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n overflow: hidden;\n "]))),
|
|
11
|
+
contentInner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n /* Content wrapper for animation */\n "]))),
|
|
12
|
+
divider: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-block: 0;\n "]))),
|
|
13
|
+
header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n &:hover .accordion-action {\n width: auto;\n opacity: 1;\n }\n\n &:focus-visible {\n border-radius: ", "px;\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "])), token.borderRadiusLG, token.colorPrimary),
|
|
14
|
+
icon: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n color: ", ";\n transition: transform 200ms ", ";\n "])), token.colorTextDescription, token.motionEaseOut),
|
|
15
|
+
iconRotate: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n transform: rotate(90deg);\n "]))),
|
|
16
|
+
indicator: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: 18px;\n\n transition: transform 200ms ", ";\n "])), token.motionEaseOut),
|
|
17
|
+
item: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-direction: column;\n "])))
|
|
18
|
+
};
|
|
19
|
+
});
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import type { CSSProperties, HTMLAttributes, Key, ReactNode } from 'react';
|
|
2
|
+
import type { BlockProps } from "../Block";
|
|
3
|
+
export interface AccordionItemProps extends Pick<BlockProps, 'padding' | 'paddingBlock' | 'paddingInline' | 'variant'> {
|
|
4
|
+
/**
|
|
5
|
+
* Action component that appears on hover
|
|
6
|
+
*/
|
|
7
|
+
action?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Content of the accordion item
|
|
10
|
+
*/
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Custom classNames for child elements
|
|
14
|
+
*/
|
|
15
|
+
classNames?: {
|
|
16
|
+
action?: string;
|
|
17
|
+
base?: string;
|
|
18
|
+
content?: string;
|
|
19
|
+
header?: string;
|
|
20
|
+
indicator?: string;
|
|
21
|
+
title?: string;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Whether the item is disabled
|
|
25
|
+
*/
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Whether to hide the chevron indicator
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
hideIndicator?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Custom indicator component or function
|
|
34
|
+
*/
|
|
35
|
+
indicator?: ReactNode | ((props: {
|
|
36
|
+
isDisabled?: boolean;
|
|
37
|
+
isOpen: boolean;
|
|
38
|
+
}) => ReactNode);
|
|
39
|
+
/**
|
|
40
|
+
* Indicator placement
|
|
41
|
+
* @default 'start'
|
|
42
|
+
*/
|
|
43
|
+
indicatorPlacement?: 'end' | 'start';
|
|
44
|
+
/**
|
|
45
|
+
* Unique identifier for the item (use as React key)
|
|
46
|
+
*/
|
|
47
|
+
itemKey: Key;
|
|
48
|
+
/**
|
|
49
|
+
* Custom styles for child elements
|
|
50
|
+
*/
|
|
51
|
+
styles?: {
|
|
52
|
+
action?: CSSProperties;
|
|
53
|
+
base?: CSSProperties;
|
|
54
|
+
content?: CSSProperties;
|
|
55
|
+
header?: CSSProperties;
|
|
56
|
+
indicator?: CSSProperties;
|
|
57
|
+
title?: CSSProperties;
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* Title of the accordion item
|
|
61
|
+
*/
|
|
62
|
+
title: ReactNode;
|
|
63
|
+
}
|
|
64
|
+
export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<BlockProps, 'variant'> {
|
|
65
|
+
/**
|
|
66
|
+
* Whether only one item can be expanded at a time
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
accordion?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Accordion items
|
|
72
|
+
*/
|
|
73
|
+
children?: ReactNode;
|
|
74
|
+
/**
|
|
75
|
+
* Custom classNames for child elements
|
|
76
|
+
*/
|
|
77
|
+
classNames?: {
|
|
78
|
+
base?: string;
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* Default expanded keys (uncontrolled)
|
|
82
|
+
*/
|
|
83
|
+
defaultExpandedKeys?: Key[];
|
|
84
|
+
/**
|
|
85
|
+
* Disable animation
|
|
86
|
+
* @default false
|
|
87
|
+
*/
|
|
88
|
+
disableAnimation?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Controlled expanded keys
|
|
91
|
+
*/
|
|
92
|
+
expandedKeys?: Key[];
|
|
93
|
+
/**
|
|
94
|
+
* Gap between accordion items
|
|
95
|
+
*/
|
|
96
|
+
gap?: number;
|
|
97
|
+
/**
|
|
98
|
+
* Whether to hide the chevron indicator for all items
|
|
99
|
+
* @default false
|
|
100
|
+
*/
|
|
101
|
+
hideIndicator?: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Indicator placement for all items
|
|
104
|
+
* @default 'start'
|
|
105
|
+
*/
|
|
106
|
+
indicatorPlacement?: 'end' | 'start';
|
|
107
|
+
/**
|
|
108
|
+
* Keep content mounted when collapsed
|
|
109
|
+
* @default false
|
|
110
|
+
*/
|
|
111
|
+
keepContentMounted?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Motion props for framer-motion animation
|
|
114
|
+
*/
|
|
115
|
+
motionProps?: any;
|
|
116
|
+
/**
|
|
117
|
+
* Callback when expanded keys change
|
|
118
|
+
*/
|
|
119
|
+
onExpandedChange?: (keys: Key[]) => void;
|
|
120
|
+
/**
|
|
121
|
+
* Whether to show dividers between items
|
|
122
|
+
* @default false
|
|
123
|
+
*/
|
|
124
|
+
showDivider?: boolean;
|
|
125
|
+
/**
|
|
126
|
+
* Custom styles for child elements
|
|
127
|
+
*/
|
|
128
|
+
styles?: {
|
|
129
|
+
base?: CSSProperties;
|
|
130
|
+
};
|
|
131
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|