@dreamcommerce/aurora 3.0.0-80 → 3.0.0-82
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/build/cjs/packages/aurora/src/components/link/link.js +2 -2
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_item.js +5 -3
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_item.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/multiselect/multiselect.js +2 -2
- package/build/cjs/packages/aurora/src/components/select/select.js +2 -2
- package/build/cjs/packages/aurora/src/hooks/use_effect_after_mount.js +25 -0
- package/build/cjs/packages/aurora/src/hooks/use_effect_after_mount.js.map +1 -0
- package/build/cjs/packages/aurora/src/hooks/use_toggle.js +45 -0
- package/build/cjs/packages/aurora/src/hooks/use_toggle.js.map +1 -0
- package/build/cjs/packages/aurora/src/index.js +4 -0
- package/build/cjs/packages/aurora/src/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/link/link.d.ts +5 -1
- package/build/esm/packages/aurora/src/components/link/link.js +2 -2
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js +5 -3
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js.map +1 -1
- package/build/esm/packages/aurora/src/components/multiselect/multiselect.d.ts +5 -2
- package/build/esm/packages/aurora/src/components/multiselect/multiselect.js +2 -2
- package/build/esm/packages/aurora/src/components/select/select.d.ts +5 -2
- package/build/esm/packages/aurora/src/components/select/select.js +2 -2
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.d.ts +22 -0
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.js +39 -0
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.js.map +1 -0
- package/build/esm/packages/aurora/src/components/tree/constants.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/tree/constants.js +2 -0
- package/build/esm/packages/aurora/src/components/tree/constants.js.map +1 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_context.d.ts +17 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_context.js +11 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_context.js.map +1 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_provider.d.ts +3 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js +29 -0
- package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js.map +1 -0
- package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts +22 -0
- package/build/esm/packages/aurora/src/components/tree/css_classes.js +25 -0
- package/build/esm/packages/aurora/src/components/tree/css_classes.js.map +1 -0
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js +10 -0
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js.map +1 -0
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.d.ts +2 -0
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js +19 -0
- package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map +1 -0
- package/build/esm/packages/aurora/src/components/tree/index.d.ts +11 -0
- package/build/esm/packages/aurora/src/components/tree/index.js +12 -0
- package/build/esm/packages/aurora/src/components/tree/index.js.map +1 -0
- package/build/esm/packages/aurora/src/hooks/use_effect_after_mount.js +19 -16
- package/build/esm/packages/aurora/src/hooks/use_effect_after_mount.js.map +1 -1
- package/build/esm/packages/aurora/src/hooks/use_toggle.d.ts +8 -0
- package/build/esm/packages/aurora/src/hooks/use_toggle.js +41 -0
- package/build/esm/packages/aurora/src/hooks/use_toggle.js.map +1 -0
- package/build/esm/packages/aurora/src/index.d.ts +2 -0
- package/build/esm/packages/aurora/src/index.js +2 -0
- package/build/esm/packages/aurora/src/index.js.map +1 -1
- package/build/esm/packages/aurora/src/typings/general.d.ts +6 -2
- package/build/esm/packages/aurora/src/typings/general.js +3 -2
- package/build/esm/packages/aurora/src/typings/general.js.map +1 -1
- package/build/index.css +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
14
|
var _excluded = ["children", "size", "variant", "decoration"];
|
|
15
|
-
var Link =
|
|
15
|
+
var Link = function Link(_ref) {
|
|
16
16
|
var children = _ref.children,
|
|
17
17
|
size = _ref.size,
|
|
18
18
|
variant = _ref.variant,
|
|
@@ -25,7 +25,7 @@ var Link = /*#__PURE__*/React__default['default'].forwardRef(function (_ref) {
|
|
|
25
25
|
decoration: decoration
|
|
26
26
|
}))
|
|
27
27
|
}, props), children);
|
|
28
|
-
}
|
|
28
|
+
};
|
|
29
29
|
Link.displayName = 'Link';
|
|
30
30
|
|
|
31
31
|
exports.Link = Link;
|
|
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
16
|
|
|
17
17
|
var _excluded = ["option", "isSelected", "toggleOption", "className"];
|
|
18
|
-
var MultiSelectItem = /*#__PURE__*/React__default['default'].forwardRef(function (_ref) {
|
|
18
|
+
var MultiSelectItem = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
|
|
19
19
|
var option = _ref.option,
|
|
20
20
|
isSelected = _ref.isSelected,
|
|
21
21
|
toggleOption = _ref.toggleOption,
|
|
@@ -25,12 +25,14 @@ var MultiSelectItem = /*#__PURE__*/React__default['default'].forwardRef(function
|
|
|
25
25
|
event.preventDefault();
|
|
26
26
|
toggleOption(option);
|
|
27
27
|
};
|
|
28
|
-
return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Item, _rollupPluginBabelHelpers.objectSpread2({
|
|
28
|
+
return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Item, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
|
|
29
29
|
onSelect: handleSelect,
|
|
30
30
|
className: cn.cn('aurora-relative aurora-flex aurora-w-full aurora-select-none aurora-rounded-sm aurora-p-2 aurora-outline-none focus:aurora-bg-accent data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 data-[state=checked]:aurora-font-semibold data-[highlighted]:aurora-font-semibold data-[highlighted]:aurora-bg-hover aurora-cursor-pointer aurora-rounded-6', {
|
|
31
31
|
'aurora-bg-hover': isSelected
|
|
32
32
|
}, className)
|
|
33
|
-
}, props),
|
|
33
|
+
}, props), {}, {
|
|
34
|
+
ref: ref
|
|
35
|
+
}), /*#__PURE__*/React__default['default'].createElement(box.Box, {
|
|
34
36
|
align: "center",
|
|
35
37
|
spacing: "2",
|
|
36
38
|
backgroundColor: "transparent"
|
package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
|
|
15
15
|
var _excluded = ["id", "options", "isGrouped", "placeholder", "disabled", "hasSearch", "searchPlaceholder", "hasErrors", "onValueChange"];
|
|
16
|
-
var MultiSelect =
|
|
16
|
+
var MultiSelect = function MultiSelect(_ref) {
|
|
17
17
|
var id = _ref.id,
|
|
18
18
|
options = _ref.options,
|
|
19
19
|
_ref$isGrouped = _ref.isGrouped,
|
|
@@ -74,7 +74,7 @@ var MultiSelect = /*#__PURE__*/React__default['default'].forwardRef(function (_r
|
|
|
74
74
|
hasSearch: hasSearch,
|
|
75
75
|
searchPlaceholder: searchPlaceholder
|
|
76
76
|
})));
|
|
77
|
-
}
|
|
77
|
+
};
|
|
78
78
|
MultiSelect.displayName = 'MultiSelect';
|
|
79
79
|
|
|
80
80
|
exports.MultiSelect = MultiSelect;
|
|
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
16
|
|
|
17
17
|
var _excluded = ["children", "id", "defaultValue", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "hasError", "onValueChange"];
|
|
18
|
-
var Select =
|
|
18
|
+
var Select = function Select(_ref) {
|
|
19
19
|
var _options$find;
|
|
20
20
|
var children = _ref.children,
|
|
21
21
|
id = _ref.id,
|
|
@@ -76,7 +76,7 @@ var Select = /*#__PURE__*/React__default['default'].forwardRef(function (_ref) {
|
|
|
76
76
|
filterTerm: filterTerm,
|
|
77
77
|
setFilterTerm: setFilterTerm
|
|
78
78
|
}));
|
|
79
|
-
}
|
|
79
|
+
};
|
|
80
80
|
Select.displayName = SelectPrimitive.Root.displayName;
|
|
81
81
|
|
|
82
82
|
exports.Select = Select;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* uses effect only if component is allready mounted
|
|
9
|
+
* @param {Function} cb callback
|
|
10
|
+
* @param dependencies array of dependencies
|
|
11
|
+
* @returns {void} void
|
|
12
|
+
*/
|
|
13
|
+
function useEffectAfterMount(cb, dependencies) {
|
|
14
|
+
var justMounted = React.useRef(true);
|
|
15
|
+
React.useEffect(function () {
|
|
16
|
+
if (!justMounted.current) {
|
|
17
|
+
return cb();
|
|
18
|
+
}
|
|
19
|
+
justMounted.current = false;
|
|
20
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
21
|
+
}, dependencies);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
exports.useEffectAfterMount = useEffectAfterMount;
|
|
25
|
+
//# sourceMappingURL=use_effect_after_mount.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
7
|
+
var use_effect_after_mount = require('./use_effect_after_mount.js');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Hook used for toggling dropdown
|
|
11
|
+
* @param defaultIsOpen should dropdown be opened at render
|
|
12
|
+
* @param onToggleCb callback onToggle
|
|
13
|
+
* @param closeAllDropdowns close all already opened dropdowns
|
|
14
|
+
* @returns {Array} tuple - open state and and method to change open state
|
|
15
|
+
*/
|
|
16
|
+
function useToggle() {
|
|
17
|
+
var defaultIsOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
18
|
+
var onToggleCb = arguments.length > 1 ? arguments[1] : undefined;
|
|
19
|
+
var closeAllDropdowns = arguments.length > 2 ? arguments[2] : undefined;
|
|
20
|
+
var _useState = React.useState(defaultIsOpen),
|
|
21
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
22
|
+
isOpen = _useState2[0],
|
|
23
|
+
setIsOpen = _useState2[1];
|
|
24
|
+
var onToggle = React.useCallback(function () {
|
|
25
|
+
closeAllDropdowns && closeAllDropdowns();
|
|
26
|
+
setIsOpen(function (oldIsOpen) {
|
|
27
|
+
return !oldIsOpen;
|
|
28
|
+
});
|
|
29
|
+
}, []);
|
|
30
|
+
var open = React.useCallback(function () {
|
|
31
|
+
return setIsOpen(true);
|
|
32
|
+
}, []);
|
|
33
|
+
var close = React.useCallback(function () {
|
|
34
|
+
return setIsOpen(false);
|
|
35
|
+
}, []);
|
|
36
|
+
use_effect_after_mount.useEffectAfterMount(function () {
|
|
37
|
+
if (typeof onToggleCb === 'function') {
|
|
38
|
+
onToggleCb(isOpen);
|
|
39
|
+
}
|
|
40
|
+
}, [isOpen]);
|
|
41
|
+
return [isOpen, onToggle, open, close];
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
exports.useToggle = useToggle;
|
|
45
|
+
//# sourceMappingURL=use_toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -49,6 +49,7 @@ var badge_constants = require('./components/badge/badge_constants.js');
|
|
|
49
49
|
var badge = require('./components/badge/badge.js');
|
|
50
50
|
var sidebar_constants = require('./components/sidebar/sidebar_constants.js');
|
|
51
51
|
var use_sidebar = require('./components/sidebar/hooks/use_sidebar.js');
|
|
52
|
+
var use_click_outside = require('./hooks/use_click_outside.js');
|
|
52
53
|
var sidebar = require('./components/sidebar/sidebar.js');
|
|
53
54
|
var sidebar_toggle = require('./components/sidebar/components/sidebar_toggle.js');
|
|
54
55
|
var tooltip = require('./components/tooltip/tooltip.js');
|
|
@@ -106,6 +107,7 @@ var xhr_image_picker = require('./components/xhr_image_picker/xhr_image_picker.j
|
|
|
106
107
|
var xhr_image_picker_control = require('./components/controls/xhr_image_picker_control/xhr_image_picker_control.js');
|
|
107
108
|
var values_syncer = require('./components/values_syncer/values_syncer.js');
|
|
108
109
|
var values_syncer_control = require('./components/controls/values_syncer_control/values_syncer_control.js');
|
|
110
|
+
var use_toggle = require('./hooks/use_toggle.js');
|
|
109
111
|
|
|
110
112
|
|
|
111
113
|
|
|
@@ -166,6 +168,7 @@ exports.Badge = badge.Badge;
|
|
|
166
168
|
exports.SIDEBAR_SIDE = sidebar_constants.SIDEBAR_SIDE;
|
|
167
169
|
exports.SIDEBAR_VARIANTS = sidebar_constants.SIDEBAR_VARIANTS;
|
|
168
170
|
exports.useSidebar = use_sidebar.useSidebar;
|
|
171
|
+
exports.useClickOutside = use_click_outside.useClickOutside;
|
|
169
172
|
exports.Sidebar = sidebar.Sidebar;
|
|
170
173
|
exports.SidebarToggle = sidebar_toggle.SidebarToggle;
|
|
171
174
|
exports.Tooltip = tooltip.Tooltip;
|
|
@@ -231,4 +234,5 @@ exports.XhrImagePicker = xhr_image_picker.XhrImagePicker;
|
|
|
231
234
|
exports.XhrImagePickerControl = xhr_image_picker_control.XhrImagePickerControl;
|
|
232
235
|
exports.ValuesSyncer = values_syncer.ValuesSyncer;
|
|
233
236
|
exports.ValuesSyncerControl = values_syncer_control.ValuesSyncerControl;
|
|
237
|
+
exports.useToggle = use_toggle.useToggle;
|
|
234
238
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { TLinkProps } from "./link_types";
|
|
3
|
-
export declare const Link:
|
|
4
|
+
export declare const Link: {
|
|
5
|
+
({ children, size, variant, decoration, ...props }: PropsWithChildren<TLinkProps>): React.JSX.Element;
|
|
6
|
+
displayName: string;
|
|
7
|
+
};
|
|
@@ -4,7 +4,7 @@ import { cn } from '../../utilities/cn.js';
|
|
|
4
4
|
import { linkVariants } from './link_variants.js';
|
|
5
5
|
|
|
6
6
|
var _excluded = ["children", "size", "variant", "decoration"];
|
|
7
|
-
var Link =
|
|
7
|
+
var Link = function Link(_ref) {
|
|
8
8
|
var children = _ref.children,
|
|
9
9
|
size = _ref.size,
|
|
10
10
|
variant = _ref.variant,
|
|
@@ -17,7 +17,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref) {
|
|
|
17
17
|
decoration: decoration
|
|
18
18
|
}))
|
|
19
19
|
}, props), children);
|
|
20
|
-
}
|
|
20
|
+
};
|
|
21
21
|
Link.displayName = 'Link';
|
|
22
22
|
|
|
23
23
|
export { Link };
|
|
@@ -7,7 +7,7 @@ import { Typography } from '../../typography/typography.js';
|
|
|
7
7
|
import { Checkbox } from '../../checkbox/checkbox.js';
|
|
8
8
|
|
|
9
9
|
var _excluded = ["option", "isSelected", "toggleOption", "className"];
|
|
10
|
-
var MultiSelectItem = /*#__PURE__*/React.forwardRef(function (_ref) {
|
|
10
|
+
var MultiSelectItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
11
11
|
var option = _ref.option,
|
|
12
12
|
isSelected = _ref.isSelected,
|
|
13
13
|
toggleOption = _ref.toggleOption,
|
|
@@ -17,12 +17,14 @@ var MultiSelectItem = /*#__PURE__*/React.forwardRef(function (_ref) {
|
|
|
17
17
|
event.preventDefault();
|
|
18
18
|
toggleOption(option);
|
|
19
19
|
};
|
|
20
|
-
return /*#__PURE__*/React.createElement(Item, _objectSpread2({
|
|
20
|
+
return /*#__PURE__*/React.createElement(Item, _objectSpread2(_objectSpread2({
|
|
21
21
|
onSelect: handleSelect,
|
|
22
22
|
className: cn('aurora-relative aurora-flex aurora-w-full aurora-select-none aurora-rounded-sm aurora-p-2 aurora-outline-none focus:aurora-bg-accent data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 data-[state=checked]:aurora-font-semibold data-[highlighted]:aurora-font-semibold data-[highlighted]:aurora-bg-hover aurora-cursor-pointer aurora-rounded-6', {
|
|
23
23
|
'aurora-bg-hover': isSelected
|
|
24
24
|
}, className)
|
|
25
|
-
}, props),
|
|
25
|
+
}, props), {}, {
|
|
26
|
+
ref: ref
|
|
27
|
+
}), /*#__PURE__*/React.createElement(Box, {
|
|
26
28
|
align: "center",
|
|
27
29
|
spacing: "2",
|
|
28
30
|
backgroundColor: "transparent"
|
package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import { TMultiSelectProps } from './multiselect_types';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export declare const MultiSelect:
|
|
2
|
+
import React, { PropsWithChildren } from 'react';
|
|
3
|
+
export declare const MultiSelect: {
|
|
4
|
+
({ id, options, isGrouped, placeholder, disabled, hasSearch, searchPlaceholder, hasErrors, onValueChange, ...props }: PropsWithChildren<TMultiSelectProps>): React.JSX.Element;
|
|
5
|
+
displayName: string;
|
|
6
|
+
};
|
|
@@ -5,7 +5,7 @@ import { MultiSelectContent } from './components/multiselect_content.js';
|
|
|
5
5
|
import { MultiSelectTrigger } from './components/multiselect_trigger.js';
|
|
6
6
|
|
|
7
7
|
var _excluded = ["id", "options", "isGrouped", "placeholder", "disabled", "hasSearch", "searchPlaceholder", "hasErrors", "onValueChange"];
|
|
8
|
-
var MultiSelect =
|
|
8
|
+
var MultiSelect = function MultiSelect(_ref) {
|
|
9
9
|
var id = _ref.id,
|
|
10
10
|
options = _ref.options,
|
|
11
11
|
_ref$isGrouped = _ref.isGrouped,
|
|
@@ -66,7 +66,7 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref) {
|
|
|
66
66
|
hasSearch: hasSearch,
|
|
67
67
|
searchPlaceholder: searchPlaceholder
|
|
68
68
|
})));
|
|
69
|
-
}
|
|
69
|
+
};
|
|
70
70
|
MultiSelect.displayName = 'MultiSelect';
|
|
71
71
|
|
|
72
72
|
export { MultiSelect };
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
|
2
2
|
import { TSelectProps } from './select_types';
|
|
3
|
-
export declare const Select:
|
|
3
|
+
export declare const Select: {
|
|
4
|
+
({ children, id, defaultValue, options, disabled, placeholder, hasSearch, searchPlaceholder, hasClearValueButton, innerAdditionalContent, hasError, onValueChange, ...props }: PropsWithChildren<TSelectProps>): React.JSX.Element;
|
|
5
|
+
displayName: string | undefined;
|
|
6
|
+
};
|
|
@@ -7,7 +7,7 @@ import { SelectTrigger } from './components/select_trigger.js';
|
|
|
7
7
|
import { SelectValue } from './components/select_value.js';
|
|
8
8
|
|
|
9
9
|
var _excluded = ["children", "id", "defaultValue", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "hasError", "onValueChange"];
|
|
10
|
-
var Select =
|
|
10
|
+
var Select = function Select(_ref) {
|
|
11
11
|
var _options$find;
|
|
12
12
|
var children = _ref.children,
|
|
13
13
|
id = _ref.id,
|
|
@@ -68,7 +68,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref) {
|
|
|
68
68
|
filterTerm: filterTerm,
|
|
69
69
|
setFilterTerm: setFilterTerm
|
|
70
70
|
}));
|
|
71
|
-
}
|
|
71
|
+
};
|
|
72
72
|
Select.displayName = Root.displayName;
|
|
73
73
|
|
|
74
74
|
export { Select };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ITreeNode } from "../context/tree_context";
|
|
3
|
+
import { TPropsWithChildren } from "../../../typings/general";
|
|
4
|
+
declare type TTreeContentComponentProps = {
|
|
5
|
+
node: ITreeNode;
|
|
6
|
+
toggleNode: () => void;
|
|
7
|
+
isLeaf: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
};
|
|
10
|
+
declare type TTreeLabelComponentProps = {
|
|
11
|
+
node: ITreeNode;
|
|
12
|
+
isLeaf: boolean;
|
|
13
|
+
};
|
|
14
|
+
declare type TTreeNodeProps = TPropsWithChildren<ITreeNode & {
|
|
15
|
+
cssClassNames?: string;
|
|
16
|
+
collapseIcon?: React.ReactNode;
|
|
17
|
+
expandIcon?: React.ReactNode;
|
|
18
|
+
LabelComponent?: (props: TTreeLabelComponentProps) => React.ReactNode;
|
|
19
|
+
ContentComponent?: (props: TTreeContentComponentProps) => React.ReactNode;
|
|
20
|
+
}>;
|
|
21
|
+
export declare const TreeNode: ({ children, id, cssClassNames, ContentComponent, LabelComponent, disabled, ...rest }: TTreeNodeProps) => React.JSX.Element | null;
|
|
22
|
+
export default TreeNode;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React, { Children, useRef } from 'react';
|
|
2
|
+
import { ArrowDownSFillIcon } from '@auroraAssets/icons/arrow_down_s_fill';
|
|
3
|
+
import { CSSTransition } from 'react-transition-group';
|
|
4
|
+
import '@auroraComponents/tree/context/tree_context';
|
|
5
|
+
import '@auroraTypings/general';
|
|
6
|
+
import { cn } from '@auroraUtilities/cn';
|
|
7
|
+
import { useTree } from '@auroraComponents/tree/hooks/tree_hook';
|
|
8
|
+
import { useTreeNode } from '@auroraComponents/tree/hooks/tree_node_hook';
|
|
9
|
+
export const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent, disabled, ...rest }) => {
|
|
10
|
+
const treeApi = useTree();
|
|
11
|
+
const node = useTreeNode(id, rest);
|
|
12
|
+
const nodeChildrenRef = useRef(null);
|
|
13
|
+
const childrenCount = Children.count(children);
|
|
14
|
+
if (!node)
|
|
15
|
+
return null;
|
|
16
|
+
const toggleNode = () => {
|
|
17
|
+
treeApi.toggleNode(node.id);
|
|
18
|
+
};
|
|
19
|
+
const Label = LabelComponent ? (LabelComponent?.({ node, isLeaf: !children })) : (React.createElement("div", { tabIndex: !children ? 0 : -1, className: "aurora-w-full aurora-px-2 aurora-rounded-4 hover:aurora-bg-hover" }, node.label ? node.label : node.id));
|
|
20
|
+
const Content = ContentComponent ? (ContentComponent?.({ node, toggleNode, isLeaf: !childrenCount })) : (React.createElement("div", { className: "aurora-flex aurora-items-center aurora-rounded-4 hover:aurora-bg-hover" },
|
|
21
|
+
React.createElement("button", { className: "aurora-flex aurora-items-center aurora-p-1 aurora-cursor-pointer", onClick: toggleNode },
|
|
22
|
+
React.createElement("span", { className: "aurora-flex" },
|
|
23
|
+
React.createElement(ArrowDownSFillIcon, { className: cn('aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light -aurora-rotate-90 tree-arrow-transition', {
|
|
24
|
+
'aurora-rotate-0': node.expanded,
|
|
25
|
+
'aurora-fill-disabled': disabled
|
|
26
|
+
}) }))),
|
|
27
|
+
Label));
|
|
28
|
+
return (React.createElement("li", { role: "treeitem", "aria-expanded": node.expanded },
|
|
29
|
+
childrenCount ? Content : Label,
|
|
30
|
+
childrenCount ? (React.createElement(CSSTransition, { unmountOnExit: true, in: node.expanded, timeout: 50, classNames: {
|
|
31
|
+
enter: 'tree__children-enter',
|
|
32
|
+
enterActive: 'tree__children-enter-active',
|
|
33
|
+
exit: 'tree__children-exit',
|
|
34
|
+
exitActive: 'tree__children-exit-active'
|
|
35
|
+
} },
|
|
36
|
+
React.createElement("ul", { className: "aurora-flex aurora-flex-col aurora-gap-2 aurora-mt-2 aurora-pl-4 aurora-scale-100 aurora-origin-top aurora-list-none aurora-will-change-auto tree__children-transition", ref: nodeChildrenRef }, children))) : null));
|
|
37
|
+
};
|
|
38
|
+
export default TreeNode;
|
|
39
|
+
//# sourceMappingURL=tree_node.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree_node.js","sourceRoot":"","sources":["../../../../../../../../src/components/tree/components/tree_node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAA0B,6CAA6C,CAAC;AACxE,OAAmC,wBAAwB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAwB1E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAkB,EAAE,EAAE;IAC7H,MAAM,OAAO,GAAG,OAAO,EAAE,CAAC;IAC1B,MAAM,IAAI,GAAG,WAAW,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACnC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE/C,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAC3B,cAAc,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,CAChD,CAAC,CAAC,CAAC,CACA,6BAAK,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAC,kEAAkE,IAC1G,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAChC,CACT,CAAC;IAEF,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC/B,gBAAgB,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,aAAa,EAAE,CAAC,CACnE,CAAC,CAAC,CAAC,CACA,6BAAK,SAAS,EAAC,wEAAwE;QACnF,gCAAQ,SAAS,EAAC,kEAAkE,EAAC,OAAO,EAAE,UAAU;YACpG,8BAAM,SAAS,EAAC,aAAa;gBACzB,oBAAC,kBAAkB,IACf,SAAS,EAAE,EAAE,CAAC,gGAAgG,EAAE;wBAC5G,iBAAiB,EAAE,IAAI,CAAC,QAAQ;wBAChC,sBAAsB,EAAE,QAAQ;qBACnC,CAAC,GACJ,CACC,CACF;QAER,KAAK,CACJ,CACT,CAAC;IAEF,OAAO,CACH,4BAAI,IAAI,EAAC,UAAU,mBAAgB,IAAI,CAAC,QAAQ;QAC3C,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;QAE/B,aAAa,CAAC,CAAC,CAAC,CACb,oBAAC,aAAa,IACV,aAAa,QACb,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,OAAO,EAAE,EAAE,EACX,UAAU,EAAE;gBACR,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EAAE,6BAA6B;gBAC1C,IAAI,EAAE,qBAAqB;gBAC3B,UAAU,EAAE,4BAA4B;aAC3C;YAED,4BACI,SAAS,EAAC,wKAAwK,EAClL,GAAG,EAAE,eAAe,IAEnB,QAAQ,CACR,CACO,CACnB,CAAC,CAAC,CAAC,IAAI,CACP,CACR,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TREE_ROLE_ATTRIBUTE = "tree";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type ITreeNode = {
|
|
3
|
+
id: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
expanded?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export interface ITreeContext {
|
|
9
|
+
addNode(node: ITreeNode): void;
|
|
10
|
+
updateNode(nodeId: string, node: Partial<ITreeNode>): void;
|
|
11
|
+
hasNode(nodeId: string): boolean;
|
|
12
|
+
getNode(nodeId: string): ITreeNode | undefined;
|
|
13
|
+
removeNode(nodeId: string): void;
|
|
14
|
+
toggleNode(nodeId: string): void;
|
|
15
|
+
}
|
|
16
|
+
export declare const TreeContext: import("react").Context<ITreeContext>;
|
|
17
|
+
export declare const TreeContextProvider: import("react").Provider<ITreeContext>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
export const TreeContext = createContext({
|
|
3
|
+
addNode: () => { },
|
|
4
|
+
updateNode: () => { },
|
|
5
|
+
removeNode: () => { },
|
|
6
|
+
toggleNode: () => { },
|
|
7
|
+
getNode: () => undefined,
|
|
8
|
+
hasNode: () => false
|
|
9
|
+
});
|
|
10
|
+
export const TreeContextProvider = TreeContext.Provider;
|
|
11
|
+
//# sourceMappingURL=tree_context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree_context.js","sourceRoot":"","sources":["../../../../../../../../src/components/tree/context/tree_context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAkBtC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAe;IACnD,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;IACjB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS;IACxB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK;CACvB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,QAAQ,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { TreeContextProvider } from '@auroraComponents/tree/context/tree_context';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import '@auroraTypings/general';
|
|
5
|
+
export const TreeProvider = ({ children }) => {
|
|
6
|
+
const [nodes, setNodes] = useState([]);
|
|
7
|
+
const value = {
|
|
8
|
+
addNode(node) {
|
|
9
|
+
setNodes((nodes) => [...nodes, node]);
|
|
10
|
+
},
|
|
11
|
+
updateNode(nodeId, node) {
|
|
12
|
+
setNodes((nodes) => nodes.map((n) => (n.id === nodeId ? { ...n, ...node } : n)));
|
|
13
|
+
},
|
|
14
|
+
getNode(nodeId) {
|
|
15
|
+
return nodes.find((node) => node.id === nodeId);
|
|
16
|
+
},
|
|
17
|
+
removeNode(nodeId) {
|
|
18
|
+
setNodes((nodes) => nodes.filter((node) => node.id !== nodeId));
|
|
19
|
+
},
|
|
20
|
+
toggleNode(nodeId) {
|
|
21
|
+
setNodes((nodes) => nodes.map((node) => (node.id === nodeId ? { ...node, expanded: !node.expanded } : node)));
|
|
22
|
+
},
|
|
23
|
+
hasNode(nodeId) {
|
|
24
|
+
return !!nodes.find((node) => node.id === nodeId);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
return React.createElement(TreeContextProvider, { value: value }, children);
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=tree_provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree_provider.js","sourceRoot":"","sources":["../../../../../../../../src/components/tree/context/tree_provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,mBAAmB,EAAa,MAAM,6CAA6C,CAAC;AAC3G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAmC,wBAAwB,CAAC;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC7D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC,CAAC;IAEpD,MAAM,KAAK,GAAiB;QACxB,OAAO,CAAC,IAAe;YACnB,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;QAC1C,CAAC;QACD,UAAU,CAAC,MAAc,EAAE,IAAwB;YAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrF,CAAC;QACD,OAAO,CAAC,MAAc;YAClB,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;QACpD,CAAC;QACD,UAAU,CAAC,MAAc;YACrB,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC;QACpE,CAAC;QACD,UAAU,CAAC,MAAc;YACrB,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClH,CAAC;QACD,OAAO,CAAC,MAAc;YAClB,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;QACtD,CAAC;KACJ,CAAC;IAEF,OAAO,oBAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAuB,CAAC;AAC/E,CAAC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare const TREE_CSS_CLASSES: {
|
|
2
|
+
readonly tree: "tree";
|
|
3
|
+
readonly treeNode: "tree__node";
|
|
4
|
+
};
|
|
5
|
+
export declare const TREE_NODE_CSS_CLASSES: {
|
|
6
|
+
readonly treeNode: "tree-node";
|
|
7
|
+
readonly treeNodeTogglerBtn: "tree-node__toggler-btn";
|
|
8
|
+
readonly treeNodeTogglerBtnExpanded: "tree-node__toggler-btn_expanded";
|
|
9
|
+
readonly treeNodeTogglerBtnIcon: "tree-node__toggler-btn-icon";
|
|
10
|
+
readonly treeNodeLabelContent: "tree-node__label-content";
|
|
11
|
+
readonly treeNodeLabel: "tree-node__label";
|
|
12
|
+
readonly treeNodeChildren: "tree-node__children";
|
|
13
|
+
readonly treeNodeChildrenEnter: "tree-node__children-enter";
|
|
14
|
+
readonly treeNodeChildrenEnterActive: "tree-node__children-enter-active";
|
|
15
|
+
readonly treeNodeChildrenExit: "tree-node__children-exit";
|
|
16
|
+
readonly treeNodeChildrenExitActive: "tree-node__children-exit-active";
|
|
17
|
+
readonly treeNodeChildrenExitDone: "tree-node__children-exit-done";
|
|
18
|
+
readonly treeNodeExpanded: "tree-node_expanded";
|
|
19
|
+
readonly treeNodeDisabled: "tree-node_disabled";
|
|
20
|
+
readonly treeNodeFocused: "tree-node_focused";
|
|
21
|
+
readonly treeNodeWithoutChildren: "tree-node_without-children";
|
|
22
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const baseCssClass = 'tree';
|
|
2
|
+
export const TREE_CSS_CLASSES = {
|
|
3
|
+
tree: baseCssClass,
|
|
4
|
+
treeNode: `${baseCssClass}__node`
|
|
5
|
+
};
|
|
6
|
+
const treeNodeBaseCssClass = `tree-node`;
|
|
7
|
+
export const TREE_NODE_CSS_CLASSES = {
|
|
8
|
+
treeNode: treeNodeBaseCssClass,
|
|
9
|
+
treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
|
|
10
|
+
treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
|
|
11
|
+
treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
|
|
12
|
+
treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
|
|
13
|
+
treeNodeLabel: `${treeNodeBaseCssClass}__label`,
|
|
14
|
+
treeNodeChildren: `${treeNodeBaseCssClass}__children`,
|
|
15
|
+
treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
|
|
16
|
+
treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,
|
|
17
|
+
treeNodeChildrenExit: `${treeNodeBaseCssClass}__children-exit`,
|
|
18
|
+
treeNodeChildrenExitActive: `${treeNodeBaseCssClass}__children-exit-active`,
|
|
19
|
+
treeNodeChildrenExitDone: `${treeNodeBaseCssClass}__children-exit-done`,
|
|
20
|
+
treeNodeExpanded: `${treeNodeBaseCssClass}_expanded`,
|
|
21
|
+
treeNodeDisabled: `${treeNodeBaseCssClass}_disabled`,
|
|
22
|
+
treeNodeFocused: `${treeNodeBaseCssClass}_focused`,
|
|
23
|
+
treeNodeWithoutChildren: `${treeNodeBaseCssClass}_without-children`
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=css_classes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css_classes.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/css_classes.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,GAAG,YAAY,QAAQ;CAC3B,CAAC;AAEX,MAAM,oBAAoB,GAAG,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,QAAQ,EAAE,oBAAoB;IAC9B,kBAAkB,EAAE,GAAG,oBAAoB,eAAe;IAC1D,0BAA0B,EAAE,GAAG,oBAAoB,wBAAwB;IAC3E,sBAAsB,EAAE,GAAG,oBAAoB,oBAAoB;IACnE,oBAAoB,EAAE,GAAG,oBAAoB,iBAAiB;IAC9D,aAAa,EAAE,GAAG,oBAAoB,SAAS;IAC/C,gBAAgB,EAAE,GAAG,oBAAoB,YAAY;IACrD,qBAAqB,EAAE,GAAG,oBAAoB,kBAAkB;IAChE,2BAA2B,EAAE,GAAG,oBAAoB,yBAAyB;IAC7E,oBAAoB,EAAE,GAAG,oBAAoB,iBAAiB;IAC9D,0BAA0B,EAAE,GAAG,oBAAoB,wBAAwB;IAC3E,wBAAwB,EAAE,GAAG,oBAAoB,sBAAsB;IACvE,gBAAgB,EAAE,GAAG,oBAAoB,WAAW;IACpD,gBAAgB,EAAE,GAAG,oBAAoB,WAAW;IACpD,eAAe,EAAE,GAAG,oBAAoB,UAAU;IAClD,uBAAuB,EAAE,GAAG,oBAAoB,mBAAmB;CAC7D,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useTree: () => import("../context/tree_context").ITreeContext;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TreeContext } from '@auroraComponents/tree/context/tree_context';
|
|
3
|
+
export const useTree = () => {
|
|
4
|
+
const context = React.useContext(TreeContext);
|
|
5
|
+
if (!context) {
|
|
6
|
+
throw new Error('useTree must be used within a TreeContextProvider');
|
|
7
|
+
}
|
|
8
|
+
return context;
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=tree_hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree_hook.js","sourceRoot":"","sources":["../../../../../../../../src/components/tree/hooks/tree_hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IACxB,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE;QACV,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACxE;IAED,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useTree } from '@auroraComponents/tree/hooks/tree_hook';
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
import '@auroraComponents/tree/context/tree_context';
|
|
4
|
+
export const useTreeNode = (nodeId, props) => {
|
|
5
|
+
const treeApi = useTree();
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (!treeApi.hasNode(nodeId))
|
|
8
|
+
treeApi.addNode({ id: nodeId, ...props });
|
|
9
|
+
});
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (treeApi.hasNode(nodeId) && props)
|
|
12
|
+
treeApi.updateNode(nodeId, props);
|
|
13
|
+
}, [props?.expanded]);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
return () => treeApi.removeNode(nodeId);
|
|
16
|
+
}, []);
|
|
17
|
+
return treeApi.getNode(nodeId);
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=tree_node_hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree_node_hook.js","sourceRoot":"","sources":["../../../../../../../../src/components/tree/hooks/tree_node_hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAA0B,6CAA6C,CAAC;AAExE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,KAA0B,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,OAAO,EAAE,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC;YAAE,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,KAAK;YAAE,OAAO,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AACnC,CAAC,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type TTreeProps = {
|
|
3
|
+
cssClassNames?: string;
|
|
4
|
+
cssStyles?: React.CSSProperties;
|
|
5
|
+
onMouseEnter?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
|
|
6
|
+
onMouseLeave?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
|
|
7
|
+
};
|
|
8
|
+
export declare const Tree: React.ForwardRefExoticComponent<TTreeProps & {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
} & React.RefAttributes<HTMLUListElement>>;
|
|
11
|
+
export default Tree;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '@auroraTypings/general';
|
|
3
|
+
import { TREE_ROLE_ATTRIBUTE } from './constants';
|
|
4
|
+
import { TreeProvider } from '@auroraComponents/tree/context/tree_provider';
|
|
5
|
+
import { cn } from '@auroraUtilities/cn';
|
|
6
|
+
// eslint-disable-next-line react/display-name
|
|
7
|
+
export const Tree = React.forwardRef(({ children, cssClassNames, cssStyles, onMouseEnter, onMouseLeave }, ref) => {
|
|
8
|
+
return (React.createElement(TreeProvider, null,
|
|
9
|
+
React.createElement("ul", { role: TREE_ROLE_ATTRIBUTE, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, style: cssStyles, className: cn('aurora-list-none aurora-flex aurora-flex-col aurora-gap-2', cssClassNames) }, children)));
|
|
10
|
+
});
|
|
11
|
+
export default Tree;
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAmC,wBAAwB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AASzC,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAkC,EAAE,GAAgC,EAAE,EAAE;IACrI,OAAO,CACH,oBAAC,YAAY;QACT,4BACI,IAAI,EAAE,mBAAmB,EACzB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,EAAE,CAAC,2DAA2D,EAAE,aAAa,CAAC,IAExF,QAAQ,CACR,CACM,CAClB,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,eAAe,IAAI,CAAC"}
|