@fudanda/workflow 0.0.0-stage → 2.20261024.1-beta.1

package/vendor/coze/source/form-extensions/components/tree-variable-selector/composite-select-tree-panel.tsx

@@ -0,0 +1,165 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
+
+import classnames from 'classnames';
+import { Divider, List } from '@coze-arch/coze-design';
+import type { TreeNodeData } from '@coze-arch/bot-semi/Tree';
+
+import { sortTreeDataByGroup } from './utils';
+import type { ITreeNodeData, SelectType } from './types';
+import { CompositeSelectOption } from './composite-select-option';
+
+import styles from './composite-select.module.less';
+
+interface Props {
+  treeData?: ITreeNodeData[];
+  onOptionHover?: (option: TreeNodeData) => void;
+  onSelect?: (data?: TreeNodeData, type?: SelectType) => void;
+  getOptionPopupContainer?: () => HTMLElement;
+  activeOption?: string | number | undefined;
+  emptyContent?: ReactNode;
+  extraOption?: ReactNode;
+  value?: string[];
+  controlledActive?: boolean;
+}
+
+const CompositeSelectTreePanel = React.forwardRef(
+  (
+    {
+      treeData,
+      onOptionHover,
+      onSelect,
+      getOptionPopupContainer,
+      activeOption,
+      emptyContent,
+      extraOption,
+      value,
+      controlledActive = true,
+    }: Props,
+    treeRef,
+  ) => {
+    const treeDataSortByGroup = useMemo(
+      () => sortTreeDataByGroup(treeData),
+      [treeData],
+    );
+
+    const handleOptionHover = useCallback(
+      (option: TreeNodeData) => {
+        onOptionHover?.(option);
+      },
+      [onOptionHover],
+    );
+
+    const [isHoverOption, setIsHoverOption] = useState(false);
+
+    const treeListWrapperMaxHeight = useMemo(
+      () =>
+        treeDataSortByGroup?.find(item => item.groupId) ? '262px' : '252px',
+      [treeDataSortByGroup],
+    );
+
+    const isNodeVariable = value?.length === 1;
+
+    const renderContent = () => {
+      if (!extraOption) {
+        return treeDataSortByGroup?.length ? (
+          <List>
+            {treeDataSortByGroup?.map((item, index) => (
+              <>
+                {treeDataSortByGroup[index - 1] &&
+                treeDataSortByGroup[index - 1].groupId !== item.groupId ? (
+                  <Divider style={{ width: 'calc(100% - 8px)' }} margin={4} />
+                ) : null}
+                <List.Item className="!p-0 !border-none">
+                  <CompositeSelectOption
+                    ref={treeRef}
+                    data={item}
+                    active={
+                      isHoverOption
+                        ? item.value === activeOption
+                        : item.value === activeOption && controlledActive
+                    }
+                    onMouseOver={() => {
+                      handleOptionHover(item);
+                      setIsHoverOption(true);
+                    }}
+                    onSelect={onSelect}
+                    getPopupContainer={getOptionPopupContainer}
+                  />
+                </List.Item>
+              </>
+            ))}
+          </List>
+        ) : (
+          <div className="px-6 py-3 coz-fg-secondary text-center">
+            {emptyContent}
+          </div>
+        );
+      }
+
+      return (
+        <>
+          {extraOption}
+
+          <List>
+            {treeDataSortByGroup?.map((item, index) => (
+              <>
+                {treeDataSortByGroup[index - 1] &&
+                treeDataSortByGroup[index - 1].groupId !== item.groupId ? (
+                  <Divider style={{ width: 'calc(100% - 8px)' }} margin={4} />
+                ) : null}
+                <List.Item className="!p-0 !border-none">
+                  <CompositeSelectOption
+                    data={item}
+                    active={
+                      isHoverOption
+                        ? item.value === activeOption
+                        : item.value === activeOption && controlledActive
+                    }
+                    selected={isNodeVariable && item.value === value?.[0]}
+                    onMouseOver={() => {
+                      handleOptionHover(item);
+                      setIsHoverOption(true);
+                    }}
+                    onSelect={onSelect}
+                    getPopupContainer={getOptionPopupContainer}
+                  />
+                </List.Item>
+              </>
+            ))}
+          </List>
+        </>
+      );
+    };
+
+    return (
+      <div
+        className={classnames('w-full', styles['node-list-wrapper'])}
+        style={{
+          maxHeight: treeListWrapperMaxHeight,
+        }}
+      >
+        {/* The Search component of coze-design will cause an error in the popover positioning. Please note for the time being. */}
+        {/* <Search className="mb-1" value={query} onChange={setQuery} /> */}
+        {renderContent()}
+      </div>
+    );
+  },
+);
+
+export default CompositeSelectTreePanel;

package/vendor/coze/source/form-extensions/components/tree-variable-selector/composite-select.module.less

@@ -0,0 +1,96 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable plugin/disallow-first-level-global */
+/* stylelint-disable rule-empty-line-before */
+/* stylelint-disable declaration-no-important */
+
+
+.composite-select {
+  border: 1px solid rgba(var(--coze-stroke-6),var(--coze-stroke-6-alpha));
+
+  &:hover {
+    border: 1px solid rgba(var(--coze-stroke-6),var(--coze-stroke-6-alpha));
+  }
+
+  :global(.semi-input-wrapper),
+  :global(.semi-input-wrapper:hover) {
+    border: none !important;
+  }
+
+  &:global(.semi-select:hover) {
+    background-color: rgba(var(--coze-bg-6),var(--coze-bg-6-alpha));
+  }
+
+  :global(.semi-input-wrapper) {
+    position: inherit;
+  }
+
+  .select-clear {
+    display: none;
+    &:hover {
+      color: var(--coz-fg-hglt);
+    }
+  }
+
+  &.has-value.show-clear:hover {
+    .select-clear {
+      display: block;
+    }
+
+    .select-arrow-down {
+      display: none;
+    }
+  }
+
+  &-error {
+    border-color: var(--semi-color-danger);
+  }
+
+}
+
+.composite-select-focus {
+  border: 1px solid var(--semi-color-focus-border);
+  :global(.semi-input-wrapper) {
+    background-color: transparent;
+  }
+
+  &:global(.semi-select:hover) {
+    background-color: transparent;
+  }
+
+  &:hover {
+    border: 1px solid var(--semi-color-focus-border);
+    :global(.semi-input-wrapper) {
+      background-color: transparent;
+    }
+  }
+
+  :global(.semi-input-wrapper-focus) {
+    border: none !important;
+  }
+}
+
+:global(.semi-input-group) {
+  .composite-select-focus {
+    border-radius: 0 8px 8px 0;
+  }
+}
+
+
+.node-list-wrapper {
+  overflow-y: auto;
+  max-height: 240px;
+  :global(.coz-search) {
+    min-width: 192px;
+  }
+  :global(.semi-input-wrapper) {
+    width: 192px !important;
+  }
+}
+
+
+.composite-select-input-wrapper {
+  :global(.semi-input) {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}

package/vendor/coze/source/form-extensions/components/tree-variable-selector/composite-select.tsx

@@ -0,0 +1,265 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {
+  type FC,
+  useState,
+  type ReactNode,
+  useRef,
+  useCallback,
+} from 'react';
+
+import classnames from 'classnames';
+import { IconCozArrowDown } from '@coze-arch/coze-design/icons';
+import { Popover, Input } from '@coze-arch/coze-design';
+import type { TreeNodeData } from '@coze-arch/bot-semi/Tree';
+import { type ValidateStatus } from '@coze-arch/bot-semi/Input';
+import { IconClear } from '@douyinfe/semi-icons';
+
+import { ValueDisplay } from './value-display';
+import { type ITreeNodeData } from './types';
+import { useTreeVariableSelectorContext } from './context';
+import CompositeSelectTreePanel from './composite-select-tree-panel';
+
+import styles from './composite-select.module.less';
+
+interface CompositeSelectProps {
+  id?: string;
+  value?: string[];
+  treeData?: ITreeNodeData[];
+  onChange?: (value?: ITreeNodeData) => void;
+  onBlur?: (e: React.MouseEvent) => void;
+  invalidContent?: string;
+  placeholder?: string;
+  emptyContent?: ReactNode;
+  disabled?: boolean;
+  readonly?: boolean;
+  validateStatus?: ValidateStatus;
+  onSelect?: (data?: ITreeNodeData) => void;
+  onClear?: () => void;
+  showClear?: boolean;
+  trigger?: ReactNode;
+  onPopoverVisibleChange?: (visible: boolean) => void;
+  renderExtraOption?: (
+    data?: TreeNodeData[],
+    action?: {
+      hiddenPopover: () => void;
+    },
+  ) => ReactNode;
+  popoverStyle?: React.CSSProperties;
+}
+
+const SELECT_POPOVER_CLASS = 'tree-variable-selector-popover';
+const DEFAULT_MIN_WIDTH = 200;
+
+export const CompositeSelect: FC<CompositeSelectProps> = props => {
+  const {
+    value,
+    treeData,
+    placeholder,
+    emptyContent,
+    disabled,
+    readonly,
+    validateStatus,
+    onSelect,
+    onBlur,
+    showClear,
+    onClear,
+    trigger,
+    onPopoverVisibleChange,
+    renderExtraOption,
+    popoverStyle = {},
+  } = props;
+  const { query, setQuery, testId, valueSubVariableMeta } =
+    useTreeVariableSelectorContext();
+  const [activeOption, setActiveOption] = useState<string | undefined>(
+    value?.[0],
+  );
+
+  const [focus, setFocus] = useState(false);
+  const [popoverVisible, setPopoverVisible] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  const handleFocus = () => {
+    setFocus(true);
+    inputRef.current?.focus();
+  };
+
+  const handleVisibilityChange = (visibility: boolean) => {
+    if (!visibility) {
+      setFocus(false);
+      setQuery?.('');
+    }
+    setPopoverVisible(visibility);
+    onPopoverVisibleChange?.(visibility);
+  };
+
+  const getOptionPopupContainer = useCallback(
+    () =>
+      (document.querySelector(`.${SELECT_POPOVER_CLASS}`) as HTMLElement) ||
+      document.body,
+    [],
+  );
+
+  const handleOptionHover = useCallback(
+    (option: TreeNodeData) => {
+      setActiveOption(option?.value as string);
+    },
+    [setActiveOption],
+  );
+
+  const handleSelect = useCallback(
+    (data?: TreeNodeData) => {
+      onSelect?.(data);
+      setPopoverVisible(false);
+    },
+    [onSelect, setPopoverVisible],
+  );
+
+  const renderExtraOptionWithWrapper = () => {
+    const extraOptionNode = renderExtraOption?.(treeData, {
+      hiddenPopover: () => setPopoverVisible(false),
+    });
+
+    if (!extraOptionNode) {
+      return undefined;
+    }
+
+    return (
+      <div onMouseOver={() => setActiveOption(undefined)}>
+        {extraOptionNode}
+      </div>
+    );
+  };
+
+  return (
+    <Popover
+      className={SELECT_POPOVER_CLASS}
+      motion={false}
+      position="bottomLeft"
+      trigger="click"
+      visible={popoverVisible}
+      onVisibleChange={handleVisibilityChange}
+      style={{
+        minWidth: triggerRef.current?.clientWidth || DEFAULT_MIN_WIDTH,
+        maxWidth: 340,
+        borderRadius: 8,
+        ...popoverStyle,
+      }}
+      content={
+        <CompositeSelectTreePanel
+          treeData={treeData}
+          activeOption={activeOption}
+          emptyContent={emptyContent}
+          onSelect={handleSelect}
+          onOptionHover={handleOptionHover}
+          getOptionPopupContainer={getOptionPopupContainer}
+          extraOption={renderExtraOptionWithWrapper()}
+          value={value}
+        />
+      }
+    >
+      {trigger ? (
+        trigger
+      ) : (
+        <div
+          ref={triggerRef}
+          role="combobox"
+          data-testid={testId}
+          className={classnames(
+            'semi-select semi-select-small relative !w-full flex bg-transparent rounded-[6px]',
+            styles['composite-select'],
+            {
+              [styles['composite-select-focus']]: focus,
+              'pointer-events-auto': !readonly,
+              'pointer-events-none': readonly,
+              [styles['composite-select-error']]: validateStatus === 'error',
+              [styles['has-value']]: !!value?.length,
+              [styles['show-clear']]: showClear,
+            },
+          )}
+          onFocus={handleFocus}
+          onBlur={onBlur as unknown as React.FocusEventHandler<HTMLDivElement>}
+        >
+          <div
+            className={classnames('relative pl-1 flex-1', {
+              'cursor-not-allowed': disabled || readonly,
+            })}
+            onClick={e => {
+              if (disabled || readonly) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            }}
+          >
+            {!query && value?.length ? (
+              <ValueDisplay
+                className={classnames({
+                  'opacity-60': focus,
+                })}
+              />
+            ) : null}
+            <div className="h-full flex items-center">
+              <Input
+                ref={inputRef}
+                borderless
+                placeholder={valueSubVariableMeta ? '' : placeholder}
+                className={classnames(
+                  'h-full !bg-transparent !hover:border-none !p-0.5 flex items-center',
+                  styles['composite-select-input-wrapper'],
+                )}
+                disabled={disabled}
+                value={query}
+                onChange={setQuery}
+                size="small"
+              />
+            </div>
+          </div>
+
+          <div
+            className={classnames(
+              'semi-select-arrow w-6 h-full right-0 flex items-center justify-center',
+              {
+                'cursor-not-allowed': disabled || readonly,
+              },
+            )}
+            onClick={e => {
+              if (disabled || readonly) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            }}
+          >
+            {!disabled && !readonly && (
+              <IconClear
+                className={styles['select-clear']}
+                onClick={e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onClear?.();
+                }}
+              />
+            )}
+            <IconCozArrowDown
+              className={`text-base ${styles['select-arrow-down']}`}
+            />
+          </div>
+        </div>
+      )}
+    </Popover>
+  );
+};

package/vendor/coze/source/form-extensions/components/tree-variable-selector/context.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createContext, useContext } from 'react';
+
+import { type ViewVariableMeta } from '@coze-workflow/variable';
+import { type TreeNodeData } from '@coze-arch/bot-semi/Tree';
+
+interface TreeVariableSelectorContext {
+  value?: string[];
+  dataSource?: TreeNodeData[];
+  query?: string;
+  setQuery?: (query: string) => void;
+  forArrayItem?: boolean;
+  invalidContent?: string;
+  testId?: string;
+  valueSubVariableMeta: ViewVariableMeta | null;
+  displayVarName?: string;
+  isUnknownValue?: boolean;
+}
+
+const TreeVariableSelectorContext = createContext<TreeVariableSelectorContext>({
+  valueSubVariableMeta: null,
+});
+
+export const useTreeVariableSelectorContext = () =>
+  useContext(TreeVariableSelectorContext);
+
+export { TreeVariableSelectorContext };

package/vendor/coze/source/form-extensions/components/tree-variable-selector/expand-icon.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { type MouseEvent } from 'react';
+
+import { IconCozArrowDown } from '@coze-arch/coze-design/icons';
+
+export const ExpandIcon = ({
+  onClick,
+}: {
+  onClick?: (e: MouseEvent) => void;
+}) => (
+  <IconCozArrowDown
+    className="coz-fg-secondary text-xs semi-tree-option-expand-icon"
+    onClick={onClick}
+  />
+);