ywana-core8 0.1.83 → 0.1.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/__previewjs__/Wrapper.tsx +8 -5
  2. package/build-doc.sh +10 -0
  3. package/dist/index.cjs +627 -194
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +353 -105
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.modern.js +628 -196
  8. package/dist/index.modern.js.map +1 -1
  9. package/dist/index.umd.js +629 -196
  10. package/dist/index.umd.js.map +1 -1
  11. package/doc/README.md +196 -0
  12. package/doc/craco.config.js +31 -0
  13. package/doc/generate-examples.cjs +310 -0
  14. package/doc/package-lock.json +17298 -0
  15. package/doc/package.json +33 -0
  16. package/doc/public/index.html +22 -0
  17. package/doc/src/App.css +171 -0
  18. package/doc/src/App.js +214 -0
  19. package/doc/src/components/ExamplePage.js +104 -0
  20. package/doc/src/components/WelcomePage.js +84 -0
  21. package/doc/src/examples/button.example.js +47 -0
  22. package/doc/src/examples/input.example.js +91 -0
  23. package/doc/src/index.css +237 -0
  24. package/doc/src/index.js +11 -0
  25. package/package.json +9 -2
  26. package/preview.config.js +38 -0
  27. package/src/html/accordion.example.js +2 -2
  28. package/src/html/actions-cell.css +108 -0
  29. package/src/html/actions-cell.example.js +587 -0
  30. package/src/html/actions-cell.js +260 -0
  31. package/src/html/checkbox.example.js +2 -2
  32. package/src/html/chip.example.js +2 -2
  33. package/src/html/color.example.js +2 -2
  34. package/src/html/form.example.js +2 -2
  35. package/src/html/header2.example.js +2 -2
  36. package/src/html/index.js +1 -0
  37. package/src/html/menu.css +9 -2
  38. package/src/html/menu.js +14 -2
  39. package/src/html/progress.example.js +2 -2
  40. package/src/html/property.example.js +2 -2
  41. package/src/html/radio.example.js +2 -2
  42. package/src/html/switch.example.js +2 -2
  43. package/src/html/tab.example.js +2 -2
  44. package/src/html/table.css +47 -1
  45. package/src/html/table.example.js +1012 -0
  46. package/src/html/table.js +12 -7
  47. package/src/html/table2-actions-test.js +138 -0
  48. package/src/html/table2.css +40 -3
  49. package/src/html/table2.example.js +330 -0
  50. package/src/html/table2.js +56 -13
  51. package/src/html/textfield.css +17 -4
  52. package/src/html/tokenfield.example.js +2 -2
  53. package/src/html/tree.css +42 -7
  54. package/src/html/tree.example.js +169 -7
  55. package/src/html/tree.js +216 -93
  56. package/src/widgets/calendar/Calendar.js +1 -1
  57. /package/{ACCORDION_EVALUATION.md → doc/evalulations/ACCORDION_EVALUATION.md} +0 -0
  58. /package/{CHECKBOX_EVALUATION.md → doc/evalulations/CHECKBOX_EVALUATION.md} +0 -0
  59. /package/{CHIP_EVALUATION.md → doc/evalulations/CHIP_EVALUATION.md} +0 -0
  60. /package/{COLOR_EVALUATION.md → doc/evalulations/COLOR_EVALUATION.md} +0 -0
  61. /package/{COMPONENTS_EVALUATION.md → doc/evalulations/COMPONENTS_EVALUATION.md} +0 -0
  62. /package/{FORM_EVALUATION.md → doc/evalulations/FORM_EVALUATION.md} +0 -0
  63. /package/{HEADER_EVALUATION.md → doc/evalulations/HEADER_EVALUATION.md} +0 -0
  64. /package/{ICON_EVALUATION.md → doc/evalulations/ICON_EVALUATION.md} +0 -0
  65. /package/{LIST_EVALUATION.md → doc/evalulations/LIST_EVALUATION.md} +0 -0
  66. /package/{PROGRESS_EVALUATION.md → doc/evalulations/PROGRESS_EVALUATION.md} +0 -0
  67. /package/{RADIO_EVALUATION.md → doc/evalulations/RADIO_EVALUATION.md} +0 -0
  68. /package/{RADIO_VISUAL_FIX.md → doc/evalulations/RADIO_VISUAL_FIX.md} +0 -0
  69. /package/{SECTION_IMPROVEMENTS.md → doc/evalulations/SECTION_IMPROVEMENTS.md} +0 -0
  70. /package/{SWITCH_EVALUATION.md → doc/evalulations/SWITCH_EVALUATION.md} +0 -0
  71. /package/{SWITCH_VISUAL_FIX.md → doc/evalulations/SWITCH_VISUAL_FIX.md} +0 -0
  72. /package/{TAB_EVALUATION.md → doc/evalulations/TAB_EVALUATION.md} +0 -0
  73. /package/{TEXTFIELD_EVALUATION.md → doc/evalulations/TEXTFIELD_EVALUATION.md} +0 -0
  74. /package/{TOOLTIP_FIX.md → doc/evalulations/TOOLTIP_FIX.md} +0 -0
  75. /package/{TREE_EVALUATION.md → doc/evalulations/TREE_EVALUATION.md} +0 -0
  76. /package/src/incubator/{PDFViewer.js → pdfViewer.js} +0 -0
@@ -1,12 +1,12 @@
1
1
  import 'material-design-icons-iconfont/dist/material-design-icons.css';
2
- import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment as Fragment$2 } from 'react';
2
+ import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment as Fragment$2, createContext } from 'react';
3
3
  import ResumableJS from 'resumablejs';
4
4
  import RSwitch from 'react-switch';
5
5
  import { Store, ReactNotifications } from 'react-notifications-component';
6
6
  import 'react-notifications-component/dist/theme.css';
7
7
  import moment$1 from 'moment';
8
8
  import { extendMoment } from 'moment-range';
9
- import 'moment/locale/es';
9
+ import 'moment/locale/es.js';
10
10
  import axios from 'axios';
11
11
  import equal from 'deep-equal';
12
12
 
@@ -1348,7 +1348,7 @@ var PropTypes = propTypes;
1348
1348
  */
1349
1349
  var SiteContext = React.createContext({});
1350
1350
 
1351
- var _excluded$h = ["format", "children", "className", "size", "weight", "color", "align", "transform", "decoration", "truncate", "maxLength", "locale", "currency", "minimumFractionDigits", "maximumFractionDigits", "dateStyle", "timeStyle", "fallback", "loading", "skeleton", "copyable", "selectable", "as", "style", "onClick"];
1351
+ var _excluded$i = ["format", "children", "className", "size", "weight", "color", "align", "transform", "decoration", "truncate", "maxLength", "locale", "currency", "minimumFractionDigits", "maximumFractionDigits", "dateStyle", "timeStyle", "fallback", "loading", "skeleton", "copyable", "selectable", "as", "style", "onClick"];
1352
1352
  function _catch$d(body, recover) {
1353
1353
  try {
1354
1354
  var result = body();
@@ -1419,7 +1419,7 @@ var Text = function Text(props) {
1419
1419
  as = _props$as === void 0 ? 'span' : _props$as,
1420
1420
  style = props.style,
1421
1421
  onClick = props.onClick,
1422
- restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
1422
+ restProps = _objectWithoutPropertiesLoose(props, _excluded$i);
1423
1423
  var site = useContext(SiteContext);
1424
1424
 
1425
1425
  // Memoize formatted value for performance
@@ -1805,7 +1805,7 @@ Icon.defaultProps = {
1805
1805
  className: ''
1806
1806
  };
1807
1807
 
1808
- var _excluded$g = ["className", "sections", "disabled", "allowMultiple", "animated", "onCheck", "onToggle", "onSectionChange", "ariaLabel"],
1808
+ var _excluded$h = ["className", "sections", "disabled", "allowMultiple", "animated", "onCheck", "onToggle", "onSectionChange", "ariaLabel"],
1809
1809
  _excluded2$9 = ["checked", "icon", "title", "subtitle", "open", "disabled", "animated", "sectionIndex", "onToggle", "onCheck", "toolbar", "info", "children", "ariaLabel"];
1810
1810
 
1811
1811
  /**
@@ -1825,7 +1825,7 @@ var Accordion = function Accordion(props) {
1825
1825
  onToggle = props.onToggle,
1826
1826
  onSectionChange = props.onSectionChange,
1827
1827
  ariaLabel = props.ariaLabel,
1828
- restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
1828
+ restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
1829
1829
  var _useState = useState([]),
1830
1830
  openSections = _useState[0],
1831
1831
  setOpenSections = _useState[1];
@@ -2071,6 +2071,340 @@ Accordion.defaultProps = {
2071
2071
  animated: true
2072
2072
  };
2073
2073
 
2074
+ /**
2075
+ * Page Context
2076
+ */
2077
+ var MenuContext = React.createContext({});
2078
+
2079
+ /**
2080
+ * Menu
2081
+ **/
2082
+ var Menu = function Menu(props) {
2083
+ var children = props.children;
2084
+ return /*#__PURE__*/React.createElement("ul", null, children);
2085
+ };
2086
+
2087
+ /**
2088
+ * Menu Icon
2089
+ */
2090
+ var MenuIcon = function MenuIcon(props) {
2091
+ var _props$icon = props.icon,
2092
+ icon = _props$icon === void 0 ? "more_vert" : _props$icon,
2093
+ children = props.children,
2094
+ _props$align = props.align,
2095
+ align = _props$align === void 0 ? "left" : _props$align,
2096
+ _props$size = props.size,
2097
+ size = _props$size === void 0 ? "normal" : _props$size;
2098
+ var _useState = useState(false),
2099
+ open = _useState[0],
2100
+ setOpen = _useState[1];
2101
+ function toggle() {
2102
+ setOpen(!open);
2103
+ }
2104
+
2105
+ // Convertir valores de align a clases CSS
2106
+ var getAlignClass = function getAlignClass(alignment) {
2107
+ switch (alignment) {
2108
+ case 'right':
2109
+ return 'alignRight';
2110
+ case 'left':
2111
+ return 'alignLeft';
2112
+ default:
2113
+ return 'alignLeft';
2114
+ // Por defecto a la izquierda
2115
+ }
2116
+ };
2117
+ return /*#__PURE__*/React.createElement(MenuContext.Provider, {
2118
+ value: [open, setOpen]
2119
+ }, /*#__PURE__*/React.createElement("div", {
2120
+ className: "menu-icon"
2121
+ }, /*#__PURE__*/React.createElement(Icon, {
2122
+ icon: icon,
2123
+ size: size,
2124
+ clickable: true,
2125
+ action: toggle
2126
+ }), open ? /*#__PURE__*/React.createElement("menu", {
2127
+ className: getAlignClass(align)
2128
+ }, children) : null, open ? /*#__PURE__*/React.createElement("div", {
2129
+ className: "overlay",
2130
+ onClick: toggle
2131
+ }) : null));
2132
+ };
2133
+
2134
+ /**
2135
+ * Menu Item
2136
+ */
2137
+ var MenuItem = function MenuItem(props) {
2138
+ var icon = props.icon,
2139
+ label = props.label,
2140
+ meta = props.meta,
2141
+ _props$disabled = props.disabled,
2142
+ disabled = _props$disabled === void 0 ? false : _props$disabled,
2143
+ _props$size2 = props.size,
2144
+ size = _props$size2 === void 0 ? "normal" : _props$size2,
2145
+ onSelect = props.onSelect;
2146
+ var _useContext = useContext(MenuContext),
2147
+ setOpen = _useContext[1];
2148
+ function select() {
2149
+ if (!disabled) {
2150
+ if (onSelect) onSelect();
2151
+ setOpen(false);
2152
+ }
2153
+ }
2154
+ var style = disabled ? "disabled" : "";
2155
+ var labelTxt = label ? /*#__PURE__*/React.createElement(Text, {
2156
+ format: TEXTFORMATS.STRING
2157
+ }, label) : null;
2158
+ return /*#__PURE__*/React.createElement("li", {
2159
+ className: "menu-item " + style,
2160
+ onClick: select
2161
+ }, icon ? /*#__PURE__*/React.createElement(Icon, {
2162
+ icon: icon,
2163
+ size: size
2164
+ }) : null, /*#__PURE__*/React.createElement("label", null, labelTxt), meta ? /*#__PURE__*/React.createElement("div", {
2165
+ className: "meta"
2166
+ }, meta) : null);
2167
+ };
2168
+
2169
+ /**
2170
+ * Menu Separator
2171
+ */
2172
+ var MenuSeparator = function MenuSeparator(props) {
2173
+ return /*#__PURE__*/React.createElement("li", {
2174
+ className: "menu-separator"
2175
+ });
2176
+ };
2177
+
2178
+ var _excluded$g = ["actions", "maxWidth", "menuIcon", "menuAlign", "menuSize", "className", "style", "gap"];
2179
+
2180
+ /**
2181
+ * ActionsCell - Componente reutilizable para manejar acciones con overflow automático
2182
+ *
2183
+ * Características:
2184
+ * - Detecta automáticamente si las acciones exceden el ancho máximo
2185
+ * - Convierte automáticamente a menú desplegable cuando es necesario
2186
+ * - Extrae acciones de componentes React para crear elementos de menú
2187
+ * - Reutilizable en tablas, headers, accordions, listas, etc.
2188
+ */
2189
+ var ActionsCell = function ActionsCell(_ref) {
2190
+ var actions = _ref.actions,
2191
+ _ref$maxWidth = _ref.maxWidth,
2192
+ maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
2193
+ _ref$menuIcon = _ref.menuIcon,
2194
+ menuIcon = _ref$menuIcon === void 0 ? "more_horiz" : _ref$menuIcon,
2195
+ _ref$menuAlign = _ref.menuAlign,
2196
+ menuAlign = _ref$menuAlign === void 0 ? "left" : _ref$menuAlign,
2197
+ _ref$menuSize = _ref.menuSize,
2198
+ menuSize = _ref$menuSize === void 0 ? "small" : _ref$menuSize,
2199
+ _ref$className = _ref.className,
2200
+ className = _ref$className === void 0 ? "" : _ref$className,
2201
+ _ref$style = _ref.style,
2202
+ style = _ref$style === void 0 ? {} : _ref$style,
2203
+ _ref$gap = _ref.gap,
2204
+ gap = _ref$gap === void 0 ? "4px" : _ref$gap,
2205
+ restProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
2206
+ var _useState = useState(false),
2207
+ isOverflowing = _useState[0],
2208
+ setIsOverflowing = _useState[1];
2209
+ var _useState2 = useState(false),
2210
+ isReady = _useState2[0],
2211
+ setIsReady = _useState2[1];
2212
+ var actionsRef = useRef(null);
2213
+ var containerRef = useRef(null);
2214
+
2215
+ // Check if actions overflow the max width
2216
+ useEffect(function () {
2217
+ var checkOverflow = function checkOverflow() {
2218
+ if (actions) {
2219
+ try {
2220
+ // Create a temporary element to measure the actual width needed
2221
+ var tempDiv = document.createElement('div');
2222
+ tempDiv.style.cssText = "\n position: absolute;\n visibility: hidden;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: " + gap + ";\n pointer-events: none;\n z-index: -1000;\n top: -1000px;\n left: -1000px;\n ";
2223
+
2224
+ // Create a wrapper to render the actions
2225
+ var actionsWrapper = document.createElement('div');
2226
+ actionsWrapper.style.cssText = "\n display: flex;\n align-items: center;\n gap: " + gap + ";\n flex-wrap: nowrap;\n ";
2227
+
2228
+ // We need to render the React element to measure it properly
2229
+ // For now, we'll use a heuristic based on the number of actions
2230
+ var estimatedWidth = 0;
2231
+ if (actions.props && actions.props.children) {
2232
+ var children = Array.isArray(actions.props.children) ? actions.props.children : [actions.props.children];
2233
+ children.forEach(function (child) {
2234
+ if (child && child.props) {
2235
+ // Estimate width based on button content
2236
+ var hasText = child.props.children && typeof child.props.children === 'string';
2237
+ var textLength = hasText ? child.props.children.length : 0;
2238
+ if (hasText) {
2239
+ // Button with text: ~8px per character + 32px for icon + padding
2240
+ estimatedWidth += textLength * 8 + 32 + 16;
2241
+ } else {
2242
+ // Icon-only button: ~32px + padding
2243
+ estimatedWidth += 32 + 8;
2244
+ }
2245
+ }
2246
+ });
2247
+
2248
+ // Add gap between buttons
2249
+ var gapWidth = parseInt(gap) || 4;
2250
+ estimatedWidth += (children.length - 1) * gapWidth;
2251
+ } else {
2252
+ // Single action
2253
+ var hasText = actions.props && actions.props.children && typeof actions.props.children === 'string';
2254
+ var textLength = hasText ? actions.props.children.length : 0;
2255
+ if (hasText) {
2256
+ estimatedWidth = textLength * 8 + 32 + 16;
2257
+ } else {
2258
+ estimatedWidth = 32 + 8;
2259
+ }
2260
+ }
2261
+
2262
+ // Check if it overflows the max width (with some padding for safety)
2263
+ var shouldOverflow = estimatedWidth > maxWidth - 8; // 8px for container padding
2264
+ setIsOverflowing(shouldOverflow);
2265
+ setIsReady(true);
2266
+ } catch (error) {
2267
+ console.warn('ActionsCell: Error measuring width', error);
2268
+ setIsOverflowing(false);
2269
+ setIsReady(true);
2270
+ }
2271
+ } else {
2272
+ setIsReady(true);
2273
+ }
2274
+ };
2275
+
2276
+ // Use a small delay to ensure DOM is ready
2277
+ var timer = setTimeout(checkOverflow, 10);
2278
+ return function () {
2279
+ return clearTimeout(timer);
2280
+ };
2281
+ }, [actions, maxWidth, gap]);
2282
+
2283
+ // Extract action items from React elements for menu
2284
+ var extractActionItems = function extractActionItems(actionsElement) {
2285
+ if (!actionsElement) return [];
2286
+ var items = [];
2287
+ try {
2288
+ // If it's a div with children (multiple actions)
2289
+ if (actionsElement.props && actionsElement.props.children) {
2290
+ var children = Array.isArray(actionsElement.props.children) ? actionsElement.props.children : [actionsElement.props.children];
2291
+ children.forEach(function (child, index) {
2292
+ if (child && child.props) {
2293
+ var _child$props = child.props,
2294
+ icon = _child$props.icon,
2295
+ label = _child$props.children,
2296
+ onClick = _child$props.onClick,
2297
+ disabled = _child$props.disabled,
2298
+ title = _child$props.title;
2299
+ items.push({
2300
+ id: "action-" + index,
2301
+ icon: icon,
2302
+ label: title || label || "Action " + (index + 1),
2303
+ onSelect: onClick,
2304
+ disabled: disabled
2305
+ });
2306
+ }
2307
+ });
2308
+ } else if (actionsElement.props) {
2309
+ // Single action
2310
+ var _actionsElement$props = actionsElement.props,
2311
+ icon = _actionsElement$props.icon,
2312
+ label = _actionsElement$props.children,
2313
+ onClick = _actionsElement$props.onClick,
2314
+ disabled = _actionsElement$props.disabled,
2315
+ title = _actionsElement$props.title;
2316
+ items.push({
2317
+ id: 'action-0',
2318
+ icon: icon,
2319
+ label: title || label || 'Action',
2320
+ onSelect: onClick,
2321
+ disabled: disabled
2322
+ });
2323
+ }
2324
+ } catch (error) {
2325
+ console.warn('ActionsCell: Error extracting action items', error);
2326
+ }
2327
+ return items;
2328
+ };
2329
+ if (!actions) return null;
2330
+ var containerClasses = ['actions-cell', className].filter(Boolean).join(' ');
2331
+ var containerStyles = _extends({
2332
+ maxWidth: maxWidth + "px",
2333
+ width: isOverflowing ? 'auto' : 'fit-content'
2334
+ }, style);
2335
+ return /*#__PURE__*/React.createElement("div", _extends({
2336
+ ref: containerRef,
2337
+ className: containerClasses,
2338
+ style: containerStyles
2339
+ }, restProps), !isReady ?
2340
+ /*#__PURE__*/
2341
+ // Loading state - show a minimal placeholder
2342
+ React.createElement("div", {
2343
+ className: "actions-cell__loading",
2344
+ style: {
2345
+ width: '48px',
2346
+ height: '32px'
2347
+ }
2348
+ }) : !isOverflowing ?
2349
+ /*#__PURE__*/
2350
+ // Show actions normally
2351
+ React.createElement("div", {
2352
+ ref: actionsRef,
2353
+ className: "actions-cell__content",
2354
+ style: {
2355
+ display: 'flex',
2356
+ alignItems: 'center',
2357
+ gap: gap,
2358
+ flexWrap: 'nowrap'
2359
+ }
2360
+ }, actions) :
2361
+ /*#__PURE__*/
2362
+ // Show menu when overflowing
2363
+ React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
2364
+ ref: actionsRef,
2365
+ style: {
2366
+ position: 'absolute',
2367
+ visibility: 'hidden',
2368
+ whiteSpace: 'nowrap',
2369
+ display: 'flex',
2370
+ alignItems: 'center',
2371
+ gap: gap,
2372
+ pointerEvents: 'none',
2373
+ zIndex: -1000
2374
+ }
2375
+ }, actions), /*#__PURE__*/React.createElement(MenuIcon, {
2376
+ icon: menuIcon,
2377
+ size: menuSize,
2378
+ align: menuAlign
2379
+ }, extractActionItems(actions).map(function (item) {
2380
+ return /*#__PURE__*/React.createElement(MenuItem, {
2381
+ key: item.id,
2382
+ icon: item.icon,
2383
+ label: item.label,
2384
+ onSelect: item.onSelect,
2385
+ disabled: item.disabled
2386
+ });
2387
+ }))));
2388
+ };
2389
+ ActionsCell.propTypes = {
2390
+ /** Acciones a mostrar (componentes React) */
2391
+ actions: PropTypes.node,
2392
+ /** Ancho máximo antes de convertirse en menú */
2393
+ maxWidth: PropTypes.number,
2394
+ /** Icono del menú desplegable */
2395
+ menuIcon: PropTypes.string,
2396
+ /** Alineación del menú (left: se abre hacia la izquierda, right: hacia la derecha, center: centrado) */
2397
+ menuAlign: PropTypes.oneOf(['left', 'right', 'center']),
2398
+ /** Tamaño del icono del menú */
2399
+ menuSize: PropTypes.oneOf(['small', 'medium', 'large']),
2400
+ /** Clase CSS adicional */
2401
+ className: PropTypes.string,
2402
+ /** Estilos adicionales */
2403
+ style: PropTypes.object,
2404
+ /** Espacio entre acciones */
2405
+ gap: PropTypes.string
2406
+ };
2407
+
2074
2408
  var _excluded$f = ["id", "label", "icon", "action", "disabled", "loading", "outlined", "raised", "size", "type", "className", "ariaLabel", "tooltip", "form", "onClick", "onFocus", "onBlur", "onKeyDown"],
2075
2409
  _excluded2$8 = ["states", "state", "className", "disabled", "onStateChange"];
2076
2410
  function _catch$c(body, recover) {
@@ -4863,96 +5197,6 @@ List.defaultProps = {
4863
5197
  role: 'list'
4864
5198
  };
4865
5199
 
4866
- /**
4867
- * Page Context
4868
- */
4869
- var MenuContext = React.createContext({});
4870
-
4871
- /**
4872
- * Menu
4873
- **/
4874
- var Menu = function Menu(props) {
4875
- var children = props.children;
4876
- return /*#__PURE__*/React.createElement("ul", null, children);
4877
- };
4878
-
4879
- /**
4880
- * Menu Icon
4881
- */
4882
- var MenuIcon = function MenuIcon(props) {
4883
- var _props$icon = props.icon,
4884
- icon = _props$icon === void 0 ? "more_vert" : _props$icon,
4885
- children = props.children,
4886
- align = props.align,
4887
- _props$size = props.size,
4888
- size = _props$size === void 0 ? "normal" : _props$size;
4889
- var _useState = useState(false),
4890
- open = _useState[0],
4891
- setOpen = _useState[1];
4892
- function toggle() {
4893
- setOpen(!open);
4894
- }
4895
- return /*#__PURE__*/React.createElement(MenuContext.Provider, {
4896
- value: [open, setOpen]
4897
- }, /*#__PURE__*/React.createElement("div", {
4898
- className: "menu-icon"
4899
- }, /*#__PURE__*/React.createElement(Icon, {
4900
- icon: icon,
4901
- size: size,
4902
- clickable: true,
4903
- action: toggle
4904
- }), open ? /*#__PURE__*/React.createElement("menu", {
4905
- className: "" + align
4906
- }, children) : null, open ? /*#__PURE__*/React.createElement("div", {
4907
- className: "overlay",
4908
- onClick: toggle
4909
- }) : null));
4910
- };
4911
-
4912
- /**
4913
- * Menu Item
4914
- */
4915
- var MenuItem = function MenuItem(props) {
4916
- var icon = props.icon,
4917
- label = props.label,
4918
- meta = props.meta,
4919
- _props$disabled = props.disabled,
4920
- disabled = _props$disabled === void 0 ? false : _props$disabled,
4921
- _props$size2 = props.size,
4922
- size = _props$size2 === void 0 ? "normal" : _props$size2,
4923
- onSelect = props.onSelect;
4924
- var _useContext = useContext(MenuContext),
4925
- setOpen = _useContext[1];
4926
- function select() {
4927
- if (!disabled) {
4928
- if (onSelect) onSelect();
4929
- setOpen(false);
4930
- }
4931
- }
4932
- var style = disabled ? "disabled" : "";
4933
- var labelTxt = label ? /*#__PURE__*/React.createElement(Text, {
4934
- format: TEXTFORMATS.STRING
4935
- }, label) : null;
4936
- return /*#__PURE__*/React.createElement("li", {
4937
- className: "menu-item " + style,
4938
- onClick: select
4939
- }, icon ? /*#__PURE__*/React.createElement(Icon, {
4940
- icon: icon,
4941
- size: size
4942
- }) : null, /*#__PURE__*/React.createElement("label", null, labelTxt), meta ? /*#__PURE__*/React.createElement("div", {
4943
- className: "meta"
4944
- }, meta) : null);
4945
- };
4946
-
4947
- /**
4948
- * Menu Separator
4949
- */
4950
- var MenuSeparator = function MenuSeparator(props) {
4951
- return /*#__PURE__*/React.createElement("li", {
4952
- className: "menu-separator"
4953
- });
4954
- };
4955
-
4956
5200
  var _excluded$9 = ["id", "className", "label", "name", "initial", "value", "editable", "onChange", "options", "type", "disabled", "required", "placeholder", "multiline", "rows", "maxLength", "minLength", "pattern", "validateValue", "size", "variant", "layout", "nameWidth", "copyable", "error", "helperText", "onFocus", "onBlur", "onValidationError", "clearable", "readOnly", "loading", "skeleton", "style"];
4957
5201
  function _catch$a(body, recover) {
4958
5202
  try {
@@ -6561,6 +6805,11 @@ var DataTable = function DataTable(props) {
6561
6805
  var _useState2 = useState(false),
6562
6806
  allChecked = _useState2[0],
6563
6807
  setAllChecked = _useState2[1];
6808
+
6809
+ // Detectar si alguna fila tiene info para mostrar la columna de expansión
6810
+ var hasInfoRows = rows.some(function (row) {
6811
+ return row.info;
6812
+ });
6564
6813
  function changeSort(id) {
6565
6814
  if (multisort) {
6566
6815
  var _Object$assign;
@@ -6641,15 +6890,16 @@ var DataTable = function DataTable(props) {
6641
6890
  }).length] : [2, 1],
6642
6891
  rowspan = _ref2[0],
6643
6892
  colspan = _ref2[1];
6893
+ var headerClasses = (resizableStyle + " " + id).trim();
6644
6894
  return /*#__PURE__*/React.createElement("th", {
6645
6895
  key: id,
6646
- className: resizableStyle,
6896
+ className: headerClasses,
6647
6897
  rowSpan: rowspan,
6648
6898
  colSpan: colspan
6649
6899
  }, /*#__PURE__*/React.createElement("div", null, id === "checked" && onCheckAll ? /*#__PURE__*/React.createElement(CheckBox, {
6650
6900
  onChange: checkAll,
6651
6901
  value: allChecked
6652
- }) : /*#__PURE__*/React.createElement(Text, {
6902
+ }) : id === "actions" ? null : /*#__PURE__*/React.createElement(Text, {
6653
6903
  key: "th_" + id
6654
6904
  }, label), sortable ? /*#__PURE__*/React.createElement(SortIcon, {
6655
6905
  sortDir: sortDir[id],
@@ -6657,10 +6907,13 @@ var DataTable = function DataTable(props) {
6657
6907
  return changeSort(id);
6658
6908
  }
6659
6909
  }) : null));
6660
- }), /*#__PURE__*/React.createElement("th", {
6910
+ }), hasInfoRows ? /*#__PURE__*/React.createElement("th", {
6661
6911
  rowSpan: 2,
6662
- colSpan: 1
6663
- })), /*#__PURE__*/React.createElement("tr", null, columns.filter(function (_ref3) {
6912
+ colSpan: 1,
6913
+ style: {
6914
+ width: '3rem'
6915
+ }
6916
+ }) : null), /*#__PURE__*/React.createElement("tr", null, columns.filter(function (_ref3) {
6664
6917
  var type = _ref3.type;
6665
6918
  return type === TYPES$1.ENTITY;
6666
6919
  }).map(function (column) {
@@ -6683,7 +6936,8 @@ var DataTable = function DataTable(props) {
6683
6936
  onSelect: select,
6684
6937
  onDrop: moveRow,
6685
6938
  editable: editable,
6686
- expanded: expanded
6939
+ expanded: expanded,
6940
+ hasInfoRows: hasInfoRows
6687
6941
  });
6688
6942
  }) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
6689
6943
  colSpan: 1000
@@ -6764,7 +7018,9 @@ var DataTableRow$1 = function DataTableRow(props) {
6764
7018
  onSelect = props.onSelect,
6765
7019
  editable = props.editable,
6766
7020
  _props$expanded2 = props.expanded,
6767
- expanded = _props$expanded2 === void 0 ? false : _props$expanded2;
7021
+ expanded = _props$expanded2 === void 0 ? false : _props$expanded2,
7022
+ _props$hasInfoRows = props.hasInfoRows,
7023
+ hasInfoRows = _props$hasInfoRows === void 0 ? false : _props$hasInfoRows;
6768
7024
  var _row$selected = row.selected,
6769
7025
  selected = _row$selected === void 0 ? false : _row$selected,
6770
7026
  className = row.className;
@@ -6788,16 +7044,16 @@ var DataTableRow$1 = function DataTableRow(props) {
6788
7044
  cell: row[column.id],
6789
7045
  editable: editable || column.editable
6790
7046
  });
6791
- }), row.info ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
7047
+ }), hasInfoRows ? row.info ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
6792
7048
  icon: infoIcon,
6793
7049
  clickable: true,
6794
7050
  action: function action() {
6795
7051
  return toggleInfo(!isInfoOpen);
6796
7052
  }
6797
- })) : /*#__PURE__*/React.createElement("td", null)), row.info && isInfoOpen ? /*#__PURE__*/React.createElement("tr", {
7053
+ })) : /*#__PURE__*/React.createElement("td", null) : null), row.info && isInfoOpen ? /*#__PURE__*/React.createElement("tr", {
6798
7054
  className: "table-row-info"
6799
7055
  }, /*#__PURE__*/React.createElement("td", {
6800
- colSpan: columns.length + 1
7056
+ colSpan: columns.length + (hasInfoRows ? 1 : 0)
6801
7057
  }, isFunction$2(row.info) ? row.info() : row.info)) : null);
6802
7058
  };
6803
7059
 
@@ -8344,7 +8600,6 @@ var DataTable2 = function DataTable2(props) {
8344
8600
 
8345
8601
  // Handle tool selection
8346
8602
  var handleToolSelect = useCallback(function (toolId) {
8347
- console.log('handleToolSelect called with toolId:', toolId);
8348
8603
  setActiveTool(function (prev) {
8349
8604
  var newTool = prev === toolId ? null : toolId;
8350
8605
  console.log('Tool changed from', prev, 'to', newTool);
@@ -8361,12 +8616,12 @@ var DataTable2 = function DataTable2(props) {
8361
8616
  var defaultTools = useMemo(function () {
8362
8617
  return [{
8363
8618
  id: 'columns',
8364
- icon: 'person',
8619
+ icon: 'view_column',
8365
8620
  title: 'Configurar columnas',
8366
8621
  component: ColumnsPanel
8367
8622
  }, {
8368
8623
  id: 'export',
8369
- icon: 'person',
8624
+ icon: 'ios_share',
8370
8625
  title: 'Exportar datos',
8371
8626
  component: ExportPanel
8372
8627
  }];
@@ -8447,12 +8702,19 @@ var DataTable2 = function DataTable2(props) {
8447
8702
  return ['datatable2', "datatable2--" + size, "datatable2--" + density, "datatable2--" + theme, readability && 'datatable2--readable', readability && "datatable2--readable-" + readability, striped && 'datatable2--striped', bordered && 'datatable2--bordered', !hover && 'datatable2--no-hover', loading && 'datatable2--loading', skeleton && 'datatable2--skeleton', className].filter(Boolean).join(' ');
8448
8703
  }, [size, density, theme, readability, striped, bordered, hover, loading, skeleton, className]);
8449
8704
 
8450
- // Check if any row has actions column
8705
+ // Check if any row has actions column or if there's an actions column defined
8451
8706
  var hasActionsColumn = useMemo(function () {
8452
- return rows.some(function (row) {
8707
+ var hasActionsColumnDefined = columns.some(function (col) {
8708
+ return col.id === 'actions';
8709
+ });
8710
+ var hasRowsWithActions = rows.some(function (row) {
8711
+ return row.actions && Array.isArray(row.actions);
8712
+ });
8713
+ var hasRowsWithInfo = rows.some(function (row) {
8453
8714
  return row.info;
8454
- }) || filterable;
8455
- }, [rows, filterable]);
8715
+ });
8716
+ return hasActionsColumnDefined || hasRowsWithActions || hasRowsWithInfo || filterable;
8717
+ }, [columns, rows, filterable]);
8456
8718
 
8457
8719
  // Función de ordenamiento (similar a table.js)
8458
8720
  var multiSort = useCallback(function (array, sortObject) {
@@ -8931,7 +9193,9 @@ var DataTableSummaryRow = function DataTableSummaryRow(_ref5) {
8931
9193
  }, summary.formatted) :
8932
9194
  // Mostrar "Total" en la primera columna si no hay checkboxes ni números
8933
9195
  index === 0 && !shouldShowCheckboxes && !showRowNumbers ? /*#__PURE__*/React.createElement("strong", null, "Total") : null);
8934
- }), hasActionsColumn && /*#__PURE__*/React.createElement("td", {
9196
+ }), hasActionsColumn && !columns.some(function (col) {
9197
+ return col.id === 'actions';
9198
+ }) && /*#__PURE__*/React.createElement("td", {
8935
9199
  className: "datatable2__summary-cell datatable2__summary-cell--actions"
8936
9200
  }));
8937
9201
  };
@@ -9132,9 +9396,11 @@ var DataTableHeader = function DataTableHeader(_ref8) {
9132
9396
  width: columnWidths[column.id],
9133
9397
  onResize: onColumnResize
9134
9398
  });
9135
- }), hasActionsColumn && /*#__PURE__*/React.createElement("th", {
9399
+ }), hasActionsColumn && !columns.some(function (col) {
9400
+ return col.id === 'actions';
9401
+ }) && /*#__PURE__*/React.createElement("th", {
9136
9402
  className: "datatable2__actions-header"
9137
- }, "Actions")), filterable && /*#__PURE__*/React.createElement(DataTableFiltersRow, {
9403
+ })), filterable && /*#__PURE__*/React.createElement(DataTableFiltersRow, {
9138
9404
  columns: columns,
9139
9405
  onClear: onClearFilters,
9140
9406
  showRowNumbers: showRowNumbers,
@@ -9382,6 +9648,34 @@ var DataTableRow = function DataTableRow(_ref1) {
9382
9648
  }
9383
9649
  }));
9384
9650
  }
9651
+
9652
+ // Manejar columna "actions" de manera especial
9653
+ if (column.id === 'actions') {
9654
+ return /*#__PURE__*/React.createElement("td", {
9655
+ key: column.id,
9656
+ className: "datatable2__actions-cell"
9657
+ }, row.actions && Array.isArray(row.actions) && /*#__PURE__*/React.createElement("div", {
9658
+ className: "datatable2__actions-container"
9659
+ }, row.actions.map(function (action, index) {
9660
+ return /*#__PURE__*/React.createElement("span", {
9661
+ key: index,
9662
+ className: "datatable2__action-item"
9663
+ }, action);
9664
+ })), row.info && /*#__PURE__*/React.createElement(Icon, {
9665
+ icon: isExpanded ? "expand_less" : "expand_more",
9666
+ size: "small",
9667
+ clickable: true,
9668
+ action: function action() {
9669
+ if (row.info && typeof row.info === 'object' && row.info.action) {
9670
+ row.info.action(row);
9671
+ }
9672
+ if (onRowExpand) {
9673
+ onRowExpand(row.id);
9674
+ }
9675
+ },
9676
+ className: "datatable2__expand-icon"
9677
+ }));
9678
+ }
9385
9679
  return /*#__PURE__*/React.createElement(DataTableCell, {
9386
9680
  key: column.id,
9387
9681
  column: column,
@@ -9393,7 +9687,9 @@ var DataTableRow = function DataTableRow(_ref1) {
9393
9687
  onCellEdit: onCellEdit,
9394
9688
  cellClassName: cellClassName
9395
9689
  });
9396
- }), hasActionsColumn && /*#__PURE__*/React.createElement("td", {
9690
+ }), hasActionsColumn && !columns.some(function (col) {
9691
+ return col.id === 'actions';
9692
+ }) && /*#__PURE__*/React.createElement("td", {
9397
9693
  className: "datatable2__actions-cell"
9398
9694
  }, row.info && /*#__PURE__*/React.createElement(Icon, {
9399
9695
  icon: isExpanded ? "expand_less" : "expand_more",
@@ -9406,7 +9702,8 @@ var DataTableRow = function DataTableRow(_ref1) {
9406
9702
  if (onRowExpand) {
9407
9703
  onRowExpand(row.id);
9408
9704
  }
9409
- }
9705
+ },
9706
+ className: "datatable2__expand-icon"
9410
9707
  })));
9411
9708
  };
9412
9709
 
@@ -9569,7 +9866,9 @@ var DataTableFiltersRow = function DataTableFiltersRow(_ref11) {
9569
9866
  key: column.id,
9570
9867
  className: "datatable2__filter-cell"
9571
9868
  }, column.filterable ? renderFilterField(column) : null);
9572
- }), hasActionsColumn && /*#__PURE__*/React.createElement("td", {
9869
+ }), hasActionsColumn && !columns.some(function (col) {
9870
+ return col.id === 'actions';
9871
+ }) && /*#__PURE__*/React.createElement("td", {
9573
9872
  className: "datatable2__filter-cell datatable2__filter-cell--actions"
9574
9873
  }, /*#__PURE__*/React.createElement(Icon, {
9575
9874
  icon: "close",
@@ -11341,10 +11640,20 @@ Token.defaultProps = {
11341
11640
  variant: 'default'
11342
11641
  };
11343
11642
 
11344
- var _excluded$4 = ["nodes", "children", "searchable", "searchPlaceholder", "searchBy", "filterable", "sortable", "sortBy", "sortDirection", "multiSelect", "onMultiSelect", "expandAll", "collapseAll", "onExpandAll", "onCollapseAll", "disabled", "loading", "empty", "emptyMessage", "emptyIcon", "className", "style", "ariaLabel"],
11643
+ var _excluded$4 = ["nodes", "children", "searchable", "searchPlaceholder", "searchBy", "filterable", "sortable", "sortBy", "sortDirection", "multiSelect", "onMultiSelect", "showExpandIcon", "onExpandAll", "onCollapseAll", "disabled", "loading", "empty", "emptyMessage", "emptyIcon", "className", "style", "ariaLabel"],
11345
11644
  _excluded2$1 = ["id", "icon", "label", "tooltip", "open", "children", "actions", "onSelect", "disabled", "draggable", "onDragStart", "onDragEnd", "onDrop", "expandable", "level", "hasChildren", "loading", "badge", "className", "style"],
11346
11645
  _excluded3 = ["id", "icon", "label", "actions", "onSelect", "selected", "onCheck", "checked", "disabled", "draggable", "onDragStart", "onDragEnd", "onDrop", "level", "badge", "tooltip", "className", "style"];
11347
11646
 
11647
+ // Context for tree state
11648
+ var TreeContext = createContext({
11649
+ multiSelect: false,
11650
+ selectedItems: [],
11651
+ onMultiSelect: null,
11652
+ searchTerm: '',
11653
+ forceExpandAll: false,
11654
+ forceCollapseAll: false
11655
+ });
11656
+
11348
11657
  /**
11349
11658
  * Enhanced Tree component with improved functionality while maintaining 100% compatibility
11350
11659
  */
@@ -11356,13 +11665,13 @@ var Tree = function Tree(props) {
11356
11665
  searchable = _props$searchable === void 0 ? false : _props$searchable,
11357
11666
  _props$searchPlacehol = props.searchPlaceholder,
11358
11667
  searchPlaceholder = _props$searchPlacehol === void 0 ? "Search..." : _props$searchPlacehol,
11668
+ _props$searchBy = props.searchBy,
11669
+ searchBy = _props$searchBy === void 0 ? ['label'] : _props$searchBy,
11359
11670
  _props$multiSelect = props.multiSelect,
11360
11671
  multiSelect = _props$multiSelect === void 0 ? false : _props$multiSelect,
11361
11672
  onMultiSelect = props.onMultiSelect,
11362
- _props$expandAll = props.expandAll,
11363
- expandAll = _props$expandAll === void 0 ? false : _props$expandAll,
11364
- _props$collapseAll = props.collapseAll,
11365
- collapseAll = _props$collapseAll === void 0 ? false : _props$collapseAll,
11673
+ _props$showExpandIcon = props.showExpandIcon,
11674
+ showExpandIcon = _props$showExpandIcon === void 0 ? false : _props$showExpandIcon,
11366
11675
  onExpandAll = props.onExpandAll,
11367
11676
  onCollapseAll = props.onCollapseAll,
11368
11677
  _props$disabled = props.disabled,
@@ -11383,8 +11692,18 @@ var Tree = function Tree(props) {
11383
11692
  searchTerm = _useState[0],
11384
11693
  setSearchTerm = _useState[1];
11385
11694
  var _useState2 = useState([]),
11695
+ selectedItems = _useState2[0],
11386
11696
  setSelectedItems = _useState2[1];
11387
11697
  useState(new Set());
11698
+ var _useState4 = useState(false),
11699
+ allExpanded = _useState4[0],
11700
+ setAllExpanded = _useState4[1];
11701
+ var _useState5 = useState(false),
11702
+ forceExpandAll = _useState5[0],
11703
+ setForceExpandAll = _useState5[1];
11704
+ var _useState6 = useState(false),
11705
+ forceCollapseAll = _useState6[0],
11706
+ setForceCollapseAll = _useState6[1];
11388
11707
  var treeRef = useRef(null);
11389
11708
 
11390
11709
  // Validate props
@@ -11397,8 +11716,70 @@ var Tree = function Tree(props) {
11397
11716
  setSearchTerm(value);
11398
11717
  }, []);
11399
11718
 
11719
+ // Apply expansion state to nodes based on current tree state
11720
+ var applyExpansionState = useCallback(function (nodeElements) {
11721
+ return React.Children.toArray(nodeElements).map(function (child) {
11722
+ var _child$type;
11723
+ if (!React.isValidElement(child)) return child;
11724
+
11725
+ // If it's a TreeNode, apply the current expansion state
11726
+ if (((_child$type = child.type) == null ? void 0 : _child$type.displayName) === 'TreeNode' || child.props.hasOwnProperty('open')) {
11727
+ var processedChildren = child.props.children ? applyExpansionState(child.props.children) : child.props.children;
11728
+ return React.cloneElement(child, _extends({}, child.props, {
11729
+ open: allExpanded,
11730
+ // Apply current expansion state
11731
+ children: processedChildren
11732
+ }));
11733
+ }
11734
+ return child;
11735
+ });
11736
+ }, [allExpanded]);
11737
+
11738
+ // Filter nodes based on search term and auto-expand matching nodes
11739
+ var filterNodes = useCallback(function (nodeElements, searchTerm) {
11740
+ if (!searchTerm.trim()) {
11741
+ // When search is cleared, apply current expansion state
11742
+ return applyExpansionState(nodeElements);
11743
+ }
11744
+ return React.Children.toArray(nodeElements).map(function (child) {
11745
+ if (!React.isValidElement(child)) return child;
11746
+
11747
+ // Check if current node matches search
11748
+ var label = child.props.label || '';
11749
+ var matches = searchBy.some(function (field) {
11750
+ var value = child.props[field] || label;
11751
+ return typeof value === 'string' && value.toLowerCase().includes(searchTerm.toLowerCase());
11752
+ });
11753
+
11754
+ // Check if any children match (recursive)
11755
+ var hasMatchingChildren = false;
11756
+ var filteredChildren = child.props.children;
11757
+ if (child.props.children) {
11758
+ filteredChildren = filterNodes(child.props.children, searchTerm);
11759
+ hasMatchingChildren = React.Children.count(filteredChildren) > 0;
11760
+ }
11761
+
11762
+ // If current node or children match, include it and auto-expand
11763
+ if (matches || hasMatchingChildren) {
11764
+ var _child$type2;
11765
+ // Clone the element and force it to be open if it's a TreeNode
11766
+ if (((_child$type2 = child.type) == null ? void 0 : _child$type2.displayName) === 'TreeNode' || child.props.hasOwnProperty('open')) {
11767
+ return React.cloneElement(child, _extends({}, child.props, {
11768
+ open: true,
11769
+ // Auto-expand nodes with matches during search
11770
+ children: filteredChildren
11771
+ }));
11772
+ }
11773
+ return React.cloneElement(child, _extends({}, child.props, {
11774
+ children: filteredChildren
11775
+ }));
11776
+ }
11777
+ return null;
11778
+ }).filter(Boolean);
11779
+ }, [searchBy, applyExpansionState]);
11780
+
11400
11781
  // Handle multi-selection
11401
- useCallback(function (id, selected) {
11782
+ var handleMultiSelect = useCallback(function (id, selected) {
11402
11783
  if (!multiSelect) return;
11403
11784
  setSelectedItems(function (prev) {
11404
11785
  var newSelected = selected ? [].concat(prev, [id]) : prev.filter(function (item) {
@@ -11411,15 +11792,26 @@ var Tree = function Tree(props) {
11411
11792
  });
11412
11793
  }, [multiSelect, onMultiSelect]);
11413
11794
 
11414
- // Handle expand/collapse all
11415
- var handleExpandAll = useCallback(function () {
11416
- if (onExpandAll) onExpandAll();
11417
- // Implementation would depend on tree structure
11418
- }, [onExpandAll]);
11419
- var handleCollapseAll = useCallback(function () {
11420
- if (onCollapseAll) onCollapseAll();
11421
- // Implementation would depend on tree structure
11422
- }, [onCollapseAll]);
11795
+ // Handle expand/collapse toggle - using context to propagate to all TreeNodes
11796
+ var handleExpandToggle = useCallback(function () {
11797
+ var newState = !allExpanded;
11798
+ setAllExpanded(newState);
11799
+ if (newState) {
11800
+ if (onExpandAll) onExpandAll();
11801
+ // Trigger expand all via context
11802
+ setForceExpandAll(true);
11803
+ setTimeout(function () {
11804
+ return setForceExpandAll(false);
11805
+ }, 100);
11806
+ } else {
11807
+ if (onCollapseAll) onCollapseAll();
11808
+ // Trigger collapse all via context
11809
+ setForceCollapseAll(true);
11810
+ setTimeout(function () {
11811
+ return setForceCollapseAll(false);
11812
+ }, 100);
11813
+ }
11814
+ }, [allExpanded, onExpandAll, onCollapseAll]);
11423
11815
 
11424
11816
  // Generate CSS classes
11425
11817
  var cssClasses = ['tree', disabled && 'tree--disabled', loading && 'tree--loading', searchable && 'tree--searchable', multiSelect && 'tree--multi-select', className].filter(Boolean).join(' ');
@@ -11467,11 +11859,23 @@ var Tree = function Tree(props) {
11467
11859
  size: "large"
11468
11860
  }), /*#__PURE__*/React.createElement(Text, null, emptyMessage)));
11469
11861
  }
11470
- return /*#__PURE__*/React.createElement("div", _extends({
11862
+ var contextValue = {
11863
+ multiSelect: multiSelect,
11864
+ selectedItems: selectedItems,
11865
+ onMultiSelect: handleMultiSelect,
11866
+ searchTerm: searchTerm,
11867
+ forceExpandAll: forceExpandAll,
11868
+ forceCollapseAll: forceCollapseAll
11869
+ };
11870
+ return /*#__PURE__*/React.createElement(TreeContext.Provider, {
11871
+ value: contextValue
11872
+ }, /*#__PURE__*/React.createElement("div", _extends({
11471
11873
  className: cssClasses,
11472
11874
  style: style,
11473
11875
  ref: treeRef
11474
- }, ariaAttributes, restProps), searchable && /*#__PURE__*/React.createElement("div", {
11876
+ }, ariaAttributes, restProps), (searchable || showExpandIcon) && /*#__PURE__*/React.createElement("div", {
11877
+ className: "tree__header " + (!searchable && showExpandIcon ? 'tree__header--expand-only' : '')
11878
+ }, searchable && /*#__PURE__*/React.createElement("div", {
11475
11879
  className: "tree__search"
11476
11880
  }, /*#__PURE__*/React.createElement(TextField, {
11477
11881
  id: "tree-search",
@@ -11481,29 +11885,17 @@ var Tree = function Tree(props) {
11481
11885
  icon: "search",
11482
11886
  outlined: true,
11483
11887
  size: "small"
11484
- })), (expandAll || collapseAll) && /*#__PURE__*/React.createElement("div", {
11485
- className: "tree__controls"
11486
- }, expandAll && /*#__PURE__*/React.createElement("button", {
11487
- className: "tree__control-button",
11488
- onClick: handleExpandAll,
11489
- "aria-label": "Expand all nodes"
11490
- }, /*#__PURE__*/React.createElement(Icon, {
11491
- icon: "unfold_more",
11492
- size: "small"
11493
- }), /*#__PURE__*/React.createElement(Text, {
11494
- size: "sm"
11495
- }, "Expand All")), collapseAll && /*#__PURE__*/React.createElement("button", {
11496
- className: "tree__control-button",
11497
- onClick: handleCollapseAll,
11498
- "aria-label": "Collapse all nodes"
11888
+ })), showExpandIcon && /*#__PURE__*/React.createElement("div", {
11889
+ className: "tree__expand-control"
11499
11890
  }, /*#__PURE__*/React.createElement(Icon, {
11500
- icon: "unfold_less",
11501
- size: "small"
11502
- }), /*#__PURE__*/React.createElement(Text, {
11503
- size: "sm"
11504
- }, "Collapse All"))), /*#__PURE__*/React.createElement("div", {
11891
+ icon: allExpanded ? "unfold_less" : "unfold_more",
11892
+ size: "small",
11893
+ clickable: true,
11894
+ action: handleExpandToggle,
11895
+ tooltip: allExpanded ? "Collapse all" : "Expand all"
11896
+ }))), /*#__PURE__*/React.createElement("div", {
11505
11897
  className: "tree__content"
11506
- }, nodes, children));
11898
+ }, nodes, searchable ? filterNodes(children, searchTerm) : applyExpansionState(children))));
11507
11899
  };
11508
11900
 
11509
11901
  /**
@@ -11539,19 +11931,44 @@ var TreeNode = function TreeNode(props) {
11539
11931
  className = props.className,
11540
11932
  style = props.style,
11541
11933
  restProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
11542
- var _useState4 = useState(open),
11543
- isOpen = _useState4[0],
11544
- setIsOpen = _useState4[1];
11545
- var _useState5 = useState(false),
11546
- isDragging = _useState5[0],
11547
- setIsDragging = _useState5[1];
11934
+ var _useState7 = useState(open),
11935
+ isOpen = _useState7[0],
11936
+ setIsOpen = _useState7[1];
11937
+ var _useState8 = useState(false),
11938
+ isDragging = _useState8[0],
11939
+ setIsDragging = _useState8[1];
11548
11940
  var nodeRef = useRef(null);
11549
11941
 
11942
+ // Get tree context for forced expand/collapse
11943
+ var treeContext = useContext(TreeContext);
11944
+ var forceExpandAll = treeContext.forceExpandAll,
11945
+ forceCollapseAll = treeContext.forceCollapseAll;
11946
+
11550
11947
  // Sync with open prop
11551
11948
  useEffect(function () {
11552
11949
  setIsOpen(open);
11553
11950
  }, [open]);
11554
11951
 
11952
+ // Handle forced expand/collapse from tree context
11953
+ useEffect(function () {
11954
+ if (forceExpandAll && expandable) {
11955
+ setIsOpen(true);
11956
+ // Also update the DOM element
11957
+ if (nodeRef.current) {
11958
+ nodeRef.current.open = true;
11959
+ }
11960
+ }
11961
+ }, [forceExpandAll, expandable]);
11962
+ useEffect(function () {
11963
+ if (forceCollapseAll && expandable) {
11964
+ setIsOpen(false);
11965
+ // Also update the DOM element
11966
+ if (nodeRef.current) {
11967
+ nodeRef.current.open = false;
11968
+ }
11969
+ }
11970
+ }, [forceCollapseAll, expandable]);
11971
+
11555
11972
  // Handle selection (maintaining original behavior)
11556
11973
  var handleSelect = useCallback(function (event) {
11557
11974
  if (disabled) return;
@@ -11559,14 +11976,13 @@ var TreeNode = function TreeNode(props) {
11559
11976
  if (onSelect) onSelect(id);
11560
11977
  }, [disabled, onSelect, id]);
11561
11978
 
11562
- // Handle toggle
11979
+ // Handle toggle - sync with details element
11563
11980
  var handleToggle = useCallback(function (event) {
11564
11981
  if (disabled || !expandable) return;
11565
- event.preventDefault();
11566
- event.stopPropagation();
11567
- setIsOpen(function (prev) {
11568
- return !prev;
11569
- });
11982
+
11983
+ // Sync our state with the details element
11984
+ var detailsElement = event.currentTarget;
11985
+ setIsOpen(detailsElement.open);
11570
11986
  }, [disabled, expandable]);
11571
11987
 
11572
11988
  // Handle keyboard interaction
@@ -11644,24 +12060,29 @@ var TreeNode = function TreeNode(props) {
11644
12060
  onDragStart: handleDragStart,
11645
12061
  onDragEnd: handleDragEnd,
11646
12062
  onDrop: handleDrop,
11647
- onDragOver: handleDragOver
12063
+ onDragOver: handleDragOver,
12064
+ onToggle: handleToggle
11648
12065
  }, restProps), /*#__PURE__*/React.createElement("summary", _extends({
11649
12066
  className: "tree-item",
11650
12067
  onClick: function onClick(event) {
11651
- // Si se hace click en el área general del nodo (no en el label), toggle
11652
- if (event.target === event.currentTarget || event.target.closest('.tree-node__toggle')) {
11653
- handleToggle(event);
12068
+ // Si se hace click en el toggle, permitir el comportamiento natural
12069
+ if (event.target.closest('.tree-node__toggle')) {
12070
+ // No hacer nada, dejar que el details maneje el toggle
12071
+ return;
12072
+ }
12073
+
12074
+ // Si hay onSelect y se hace click fuera del toggle, seleccionar
12075
+ if (onSelect) {
12076
+ event.preventDefault(); // Prevenir el toggle del details
12077
+ handleSelect(event);
11654
12078
  }
12079
+ // Si no hay onSelect, permitir el comportamiento natural del details
11655
12080
  },
11656
12081
  onKeyDown: handleKeyDown
11657
12082
  }, ariaAttributes, {
11658
12083
  title: tooltip
11659
12084
  }), hasChildren && expandable && /*#__PURE__*/React.createElement("div", {
11660
- className: "tree-node__toggle",
11661
- onClick: function onClick(event) {
11662
- event.stopPropagation();
11663
- handleToggle(event);
11664
- }
12085
+ className: "tree-node__toggle"
11665
12086
  }, /*#__PURE__*/React.createElement(Icon, {
11666
12087
  icon: isOpen ? 'expand_less' : 'expand_more',
11667
12088
  size: "small",
@@ -11678,11 +12099,7 @@ var TreeNode = function TreeNode(props) {
11678
12099
  icon: "hourglass_empty",
11679
12100
  size: "small"
11680
12101
  })), /*#__PURE__*/React.createElement("div", {
11681
- className: "label " + clickable,
11682
- onClick: function onClick(event) {
11683
- event.stopPropagation();
11684
- handleSelect(event);
11685
- }
12102
+ className: "label " + clickable
11686
12103
  }, /*#__PURE__*/React.createElement("span", {
11687
12104
  className: "tree-node__label-text"
11688
12105
  }, labelTxt), badge && /*#__PURE__*/React.createElement("span", {
@@ -11724,11 +12141,20 @@ var TreeItem = function TreeItem(props) {
11724
12141
  className = props.className,
11725
12142
  style = props.style,
11726
12143
  restProps = _objectWithoutPropertiesLoose(props, _excluded3);
11727
- var _useState6 = useState(false),
11728
- isDragging = _useState6[0],
11729
- setIsDragging = _useState6[1];
12144
+ var _useState9 = useState(false),
12145
+ isDragging = _useState9[0],
12146
+ setIsDragging = _useState9[1];
11730
12147
  var itemRef = useRef(null);
11731
12148
 
12149
+ // Get tree context
12150
+ var treeContext = useContext(TreeContext);
12151
+ var multiSelect = treeContext.multiSelect,
12152
+ selectedItems = treeContext.selectedItems,
12153
+ handleTreeMultiSelect = treeContext.onMultiSelect;
12154
+
12155
+ // Check if this item is selected in multi-select mode
12156
+ var isMultiSelected = multiSelect && selectedItems.includes(id);
12157
+
11732
12158
  // Handle selection (maintaining original behavior)
11733
12159
  var handleSelect = useCallback(function (event) {
11734
12160
  if (disabled) return;
@@ -11736,12 +12162,20 @@ var TreeItem = function TreeItem(props) {
11736
12162
  if (onSelect) onSelect(id);
11737
12163
  }, [disabled, onSelect, id]);
11738
12164
 
11739
- // Handle checkbox (maintaining original behavior)
12165
+ // Handle checkbox (maintaining original behavior + multi-select)
11740
12166
  var handleCheck = useCallback(function (event) {
11741
12167
  if (disabled) return;
11742
12168
  event.stopPropagation();
11743
- if (onCheck) onCheck(id, event.target.checked);
11744
- }, [disabled, onCheck, id]);
12169
+ var isChecked = event.target.checked;
12170
+
12171
+ // Handle original onCheck callback
12172
+ if (onCheck) onCheck(id, isChecked);
12173
+
12174
+ // Handle multi-select if enabled
12175
+ if (multiSelect && handleTreeMultiSelect) {
12176
+ handleTreeMultiSelect(id, isChecked);
12177
+ }
12178
+ }, [disabled, onCheck, id, multiSelect, handleTreeMultiSelect]);
11745
12179
 
11746
12180
  // Handle keyboard interaction
11747
12181
  var handleKeyDown = useCallback(function (event) {
@@ -11808,11 +12242,11 @@ var TreeItem = function TreeItem(props) {
11808
12242
  onDrop: handleDrop,
11809
12243
  onDragOver: handleDragOver,
11810
12244
  title: tooltip
11811
- }, ariaAttributes, restProps), onCheck && /*#__PURE__*/React.createElement("div", {
12245
+ }, ariaAttributes, restProps), (onCheck || multiSelect) && /*#__PURE__*/React.createElement("div", {
11812
12246
  className: "tree-item__checkbox"
11813
12247
  }, /*#__PURE__*/React.createElement("input", {
11814
12248
  type: "checkbox",
11815
- checked: checked,
12249
+ checked: multiSelect ? isMultiSelected : checked,
11816
12250
  onChange: handleCheck,
11817
12251
  disabled: disabled,
11818
12252
  "aria-label": "Select " + (typeof label === 'string' ? label : 'item')
@@ -11855,10 +12289,8 @@ Tree.propTypes = {
11855
12289
  multiSelect: PropTypes.bool,
11856
12290
  /** Multi-selection callback */
11857
12291
  onMultiSelect: PropTypes.func,
11858
- /** Show expand all button */
11859
- expandAll: PropTypes.bool,
11860
- /** Show collapse all button */
11861
- collapseAll: PropTypes.bool,
12292
+ /** Show expand/collapse icon */
12293
+ showExpandIcon: PropTypes.bool,
11862
12294
  /** Expand all callback */
11863
12295
  onExpandAll: PropTypes.func,
11864
12296
  /** Collapse all callback */
@@ -23000,5 +23432,5 @@ var isFunction = function isFunction(value) {
23000
23432
  return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
23001
23433
  };
23002
23434
 
23003
- export { Accordion, ActionButton, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DataTable2, DateRange, DateRange2, Dialog, DropDown, DropDown2, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, _FoldersTreeView as FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Header2, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageLink, PageProvider, PasswordEditor, PasswordField, PasswordField2, Planner, Planner2, Property, RadioButton, RadioGroup, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextArea2, TextField, TextField2, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, useHashPage, validatePassword };
23435
+ export { Accordion, ActionButton, ActionsCell, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DataTable2, DateRange, DateRange2, Dialog, DropDown, DropDown2, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, _FoldersTreeView as FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Header2, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageLink, PageProvider, PasswordEditor, PasswordField, PasswordField2, Planner, Planner2, Property, RadioButton, RadioGroup, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextArea2, TextField, TextField2, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, useHashPage, validatePassword };
23004
23436
  //# sourceMappingURL=index.modern.js.map