@canlooks/can-ui 0.0.49 → 0.0.51

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 (11) hide show
  1. package/dist/cjs/components/tree/tree.style.js +2 -2
  2. package/dist/cjs/components/tree/treeNode.js +1 -1
  3. package/dist/cjs/components/treeSelect/treeSelect.js +6 -6
  4. package/dist/cjs/utils/tree.js +2 -0
  5. package/dist/esm/components/tree/tree.style.js +2 -2
  6. package/dist/esm/components/tree/treeNode.js +1 -1
  7. package/dist/esm/components/treeSelect/treeSelect.js +6 -6
  8. package/dist/esm/utils/tree.js +3 -1
  9. package/documentation/dist/assets/{index-G5dn8x9O.js → index-Db8Y9DzG.js} +154 -154
  10. package/documentation/dist/index.html +1 -1
  11. package/package.json +1 -1
package/dist/cjs/components/tree/tree.style.js CHANGED
@@ -76,8 +76,8 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
76
76
  align-items: center;
77
77
  justify-content: center;
78
78
 
79
- .${exports.classes.icon} > svg {
80
- transition: transform .25s ${easing.easeOut};
79
+ .${exports.classes.icon} {
80
+ transition: rotate .25s ${easing.easeOut};
81
81
  }
82
82
  }
83
83
 
package/dist/cjs/components/tree/treeNode.js CHANGED
@@ -30,7 +30,7 @@ exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled,
30
30
  ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
31
31
  : hasChildren &&
32
32
  (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronRight_1.faChevronRight, className: tree_style_1.classes.icon, style: {
33
- rotate: currentExpanded ? '90deg' : '0'
33
+ rotate: currentExpanded ? '90deg' : '0deg'
34
34
  } }) }), showCheckbox &&
35
35
  (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
36
36
  e.stopPropagation();
package/dist/cjs/components/treeSelect/treeSelect.js CHANGED
@@ -57,24 +57,24 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
57
57
  (0, react_1.useMemo)(() => {
58
58
  // 单选模式下，选中一次就自动关闭弹框
59
59
  !props.multiple && setInnerOpen(false);
60
- }, [innerValue.current, props.multiple]);
60
+ }, [innerValue, props.multiple]);
61
61
  const clearHandler = () => {
62
62
  onClear?.();
63
63
  setInnerValue(props.multiple ? [] : void 0);
64
64
  };
65
65
  const renderBackfillFn = () => {
66
66
  if (renderBackfill) {
67
- return renderBackfill(innerValue.current);
67
+ return renderBackfill(innerValue);
68
68
  }
69
69
  if (props.multiple) {
70
- return (0, utils_1.toArray)(innerValue.current)?.map(v => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
70
+ return (0, utils_1.toArray)(innerValue)?.map(v => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
71
71
  }
72
- return ((0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfillWrap, children: optionsMap.get(innerValue.current)?.[props.labelKey] ?? innerValue.current }));
72
+ return ((0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
73
73
  };
74
- return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
74
+ return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
75
75
  popperProps?.onPointerDown?.(e);
76
76
  e.preventDefault();
77
- }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
77
+ }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
78
78
  ? (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.placeholder, children: placeholder })
79
79
  : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
80
80
  ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
package/dist/cjs/utils/tree.js CHANGED
@@ -8,7 +8,9 @@ function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenK
8
8
  const expandedSet = (0, react_1.useMemo)(() => {
9
9
  return new Set(innerExpanded.current);
10
10
  }, [innerExpanded.current]);
11
+ const sync = (0, hooks_1.useSync)({ expandedSet, onExpandedChange });
11
12
  const toggleExpanded = (0, react_1.useCallback)((value) => {
13
+ const { expandedSet, onExpandedChange } = sync.current;
12
14
  const currentExpanded = expandedSet.has(value);
13
15
  setInnerExpanded(o => {
14
16
  const newExpanded = currentExpanded
package/dist/esm/components/tree/tree.style.js CHANGED
@@ -72,8 +72,8 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
72
72
  align-items: center;
73
73
  justify-content: center;
74
74
 
75
- .${classes.icon} > svg {
76
- transition: transform .25s ${easing.easeOut};
75
+ .${classes.icon} {
76
+ transition: rotate .25s ${easing.easeOut};
77
77
  }
78
78
  }
79
79
 
package/dist/esm/components/tree/treeNode.js CHANGED
@@ -27,7 +27,7 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
27
27
  ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
28
28
  : hasChildren &&
29
29
  _jsx(Icon, { icon: faChevronRight, className: classes.icon, style: {
30
- rotate: currentExpanded ? '90deg' : '0'
30
+ rotate: currentExpanded ? '90deg' : '0deg'
31
31
  } }) }), showCheckbox &&
32
32
  _jsx(Checkbox, { className: classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
33
33
  e.stopPropagation();
package/dist/esm/components/treeSelect/treeSelect.js CHANGED
@@ -54,24 +54,24 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
54
54
  useMemo(() => {
55
55
  // 单选模式下，选中一次就自动关闭弹框
56
56
  !props.multiple && setInnerOpen(false);
57
- }, [innerValue.current, props.multiple]);
57
+ }, [innerValue, props.multiple]);
58
58
  const clearHandler = () => {
59
59
  onClear?.();
60
60
  setInnerValue(props.multiple ? [] : void 0);
61
61
  };
62
62
  const renderBackfillFn = () => {
63
63
  if (renderBackfill) {
64
- return renderBackfill(innerValue.current);
64
+ return renderBackfill(innerValue);
65
65
  }
66
66
  if (props.multiple) {
67
- return toArray(innerValue.current)?.map(v => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
67
+ return toArray(innerValue)?.map(v => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
68
68
  }
69
- return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue.current)?.[props.labelKey] ?? innerValue.current }));
69
+ return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
70
70
  };
71
- return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
71
+ return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
72
72
  popperProps?.onPointerDown?.(e);
73
73
  e.preventDefault();
74
- }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
74
+ }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
75
75
  ? _jsx("div", { className: classes.placeholder, children: placeholder })
76
76
  : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
77
77
  ? _jsx(LoadingIndicator, {})
package/dist/esm/utils/tree.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import { useCallback, useDeferredValue, useMemo } from 'react';
2
- import { useControlled } from './hooks';
2
+ import { useControlled, useSync } from './hooks';
3
3
  export function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenKey = 'children', searchTokenKey = 'searchToken', defaultExpanded = [], expanded, onExpandedChange, defaultSearchValue = '', searchValue, onSearchChange }) {
4
4
  const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
5
5
  const expandedSet = useMemo(() => {
6
6
  return new Set(innerExpanded.current);
7
7
  }, [innerExpanded.current]);
8
+ const sync = useSync({ expandedSet, onExpandedChange });
8
9
  const toggleExpanded = useCallback((value) => {
10
+ const { expandedSet, onExpandedChange } = sync.current;
9
11
  const currentExpanded = expandedSet.has(value);
10
12
  setInnerExpanded(o => {
11
13
  const newExpanded = currentExpanded