@tdm-design/ui 0.0.15 → 0.0.17

package/lib/select/Select.js

@@ -0,0 +1,340 @@
+"use strict";
+"use client";
+
+// TODO: 4.0 - codemod should help to change `filterOption` to support node props.
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _select = _interopRequireWildcard(require("@rc-component/select"));
+var _util = require("@rc-component/util");
+var _clsx = require("clsx");
+var _hooks = require("../_util/hooks");
+var _motion = require("../_util/motion");
+var _PurePanel = _interopRequireDefault(require("../_util/PurePanel"));
+var _statusUtils = require("../_util/statusUtils");
+var _warning = require("../_util/warning");
+var _configProvider = require("../config-provider");
+var _context = require("../config-provider/context");
+var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
+var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
+var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
+var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
+var _context2 = require("../form/context");
+var _useVariants = _interopRequireDefault(require("../form/hooks/useVariants"));
+var _Compact = require("../space/Compact");
+var _internal = require("../theme/internal");
+var _mergedBuiltinPlacements = _interopRequireDefault(require("./mergedBuiltinPlacements"));
+var _style = _interopRequireDefault(require("./style"));
+var _useIcons = _interopRequireDefault(require("./useIcons"));
+var _usePopupRender = _interopRequireDefault(require("./usePopupRender"));
+var _useShowArrow = _interopRequireDefault(require("./useShowArrow"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+const InternalSelect = (props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    bordered,
+    className,
+    rootClassName,
+    getPopupContainer,
+    popupClassName,
+    dropdownClassName,
+    listHeight = 256,
+    placement,
+    listItemHeight: customListItemHeight,
+    size: customizeSize,
+    disabled: customDisabled,
+    notFoundContent,
+    status: customStatus,
+    builtinPlacements,
+    dropdownMatchSelectWidth,
+    popupMatchSelectWidth,
+    direction: propDirection,
+    style,
+    allowClear,
+    variant: customizeVariant,
+    popupStyle,
+    dropdownStyle,
+    transitionName,
+    tagRender,
+    maxCount,
+    prefix,
+    dropdownRender,
+    /**
+     * @since 5.25.0
+     */
+    popupRender,
+    onDropdownVisibleChange,
+    onOpenChange,
+    styles,
+    classNames,
+    isFilterItem,
+    // TDM_CUSTOM: custom select filter
+    optionFilterProp,
+    maxLines,
+    ...rest
+  } = props;
+  const {
+    getPopupContainer: getContextPopupContainer,
+    getPrefixCls,
+    renderEmpty,
+    direction: contextDirection,
+    virtual,
+    popupMatchSelectWidth: contextPopupMatchSelectWidth,
+    popupOverflow
+  } = React.useContext(_configProvider.ConfigContext);
+  const {
+    showSearch,
+    optionFilterProp: contextOptionFilterProp,
+    maxLines: contextMaxLines,
+    style: contextStyle,
+    styles: contextStyles,
+    className: contextClassName,
+    classNames: contextClassNames
+  } = (0, _context.useComponentConfig)('select');
+  const mergedMaxLines = maxLines ?? contextMaxLines;
+  const [, token] = (0, _internal.useToken)();
+  const listItemHeight = customListItemHeight ?? token?.controlHeight;
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
+  const direction = propDirection ?? contextDirection;
+  const {
+    compactSize,
+    compactItemClassnames
+  } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
+  const [variant, enableVariantCls] = (0, _useVariants.default)('select', customizeVariant, bordered);
+  const rootCls = (0, _useCSSVarCls.default)(prefixCls);
+  const [hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
+  const mode = React.useMemo(() => {
+    const {
+      mode: m
+    } = props;
+    if (m === 'combobox') {
+      return undefined;
+    }
+    if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
+      return 'combobox';
+    }
+    return m;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.mode]);
+  const isMultiple = mode === 'multiple' || mode === 'tags';
+  const showSuffixIcon = (0, _useShowArrow.default)(props.suffixIcon, props.showArrow);
+  const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth ?? contextPopupMatchSelectWidth;
+  const mergedPopupRender = (0, _usePopupRender.default)(popupRender || dropdownRender);
+  const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
+  // ===================== Form Status =====================
+  const {
+    status: contextStatus,
+    hasFeedback,
+    isFormItemInput,
+    feedbackIcon
+  } = React.useContext(_context2.FormItemInputContext);
+  const mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
+  // ===================== Empty =====================
+  let mergedNotFound;
+  if (notFoundContent !== undefined) {
+    mergedNotFound = notFoundContent;
+  } else if (mode === 'combobox') {
+    mergedNotFound = null;
+  } else {
+    mergedNotFound = renderEmpty?.('Select') || /*#__PURE__*/React.createElement(_defaultRenderEmpty.default, {
+      componentName: "Select"
+    });
+  }
+  // ===================== Icons =====================
+  const {
+    suffixIcon,
+    itemIcon,
+    removeIcon,
+    clearIcon
+  } = (0, _useIcons.default)({
+    ...rest,
+    multiple: isMultiple,
+    hasFeedback,
+    feedbackIcon,
+    showSuffixIcon,
+    prefixCls,
+    componentName: 'Select'
+  });
+  const mergedAllowClear = allowClear === true ? {
+    clearIcon
+  } : allowClear;
+  const selectProps = (0, _util.omit)(rest, ['suffixIcon', 'itemIcon']);
+  const mergedSize = (0, _useSize.default)(ctx => customizeSize ?? compactSize ?? ctx);
+  // ===================== Disabled =====================
+  const disabled = React.useContext(_DisabledContext.default);
+  const mergedDisabled = customDisabled ?? disabled;
+  // ========== Merged Props for Semantic ==================
+  const mergedProps = {
+    ...props,
+    variant,
+    status: mergedStatus,
+    disabled: mergedDisabled,
+    size: mergedSize
+  };
+  const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
+    props: mergedProps
+  }, {
+    popup: {
+      _default: 'root'
+    }
+  });
+  const mergedPopupClassName = (0, _clsx.clsx)(mergedClassNames.popup?.root, popupClassName, dropdownClassName, {
+    [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl'
+  }, rootClassName, cssVarCls, rootCls, hashId);
+  const mergedPopupStyle = {
+    ...mergedStyles.popup?.root,
+    ...(popupStyle ?? dropdownStyle)
+  };
+  const mergedClassName = (0, _clsx.clsx)({
+    [`${prefixCls}-lg`]: mergedSize === 'large',
+    [`${prefixCls}-sm`]: mergedSize === 'small',
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-${variant}`]: enableVariantCls,
+    [`${prefixCls}-in-form-item`]: isFormItemInput,
+    // TDM_CUSTOM: custom select filter
+    [`${prefixCls}-filter`]: isFilterItem
+  }, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, contextClassName, className, mergedClassNames.root, rootClassName, cssVarCls, rootCls, hashId);
+  // ===================== Placement =====================
+  const memoPlacement = React.useMemo(() => {
+    if (placement !== undefined) {
+      return placement;
+    }
+    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+  }, [placement, direction]);
+  // ====================== Warning ======================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = (0, _warning.devUseWarning)('Select');
+    const deprecatedProps = {
+      dropdownMatchSelectWidth: 'popupMatchSelectWidth',
+      dropdownStyle: 'styles.popup.root',
+      dropdownClassName: 'classNames.popup.root',
+      popupClassName: 'classNames.popup.root',
+      dropdownRender: 'popupRender',
+      onDropdownVisibleChange: 'onOpenChange',
+      bordered: 'variant'
+    };
+    Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
+      warning.deprecated(!(oldProp in props), oldProp, newProp);
+    });
+    process.env.NODE_ENV !== "production" ? warning(!('showArrow' in props), 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.') : void 0;
+    process.env.NODE_ENV !== "production" ? warning(!(typeof maxCount !== 'undefined' && !isMultiple), 'usage', '`maxCount` only works with mode `multiple` or `tags`') : void 0;
+  }
+  // ====================== MaxLines ======================
+  const internalSelectRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => internalSelectRef.current);
+  const [linesMaxTagCount, setLinesMaxTagCount] = React.useState(undefined);
+  const calculateMaxLinesTags = React.useCallback(() => {
+    if (!mergedMaxLines || !isMultiple) return;
+    const container = internalSelectRef.current?.nativeElement;
+    if (!container) return;
+    const tagElements = container.querySelectorAll(`.${prefixCls}-selection-item, .${prefixCls}-content-item`);
+    if (tagElements.length === 0) {
+      setLinesMaxTagCount(undefined);
+      return;
+    }
+    const firstTagTop = tagElements[0].offsetTop;
+    const tagHeight = tagElements[0].offsetHeight || 24;
+    const rowHeightThreshold = tagHeight + 6;
+    const maxAllowedTop = firstTagTop + rowHeightThreshold * (mergedMaxLines - 1);
+    let fitCount = tagElements.length;
+    for (let i = 0; i < tagElements.length; i++) {
+      const el = tagElements[i];
+      if (el.offsetTop > maxAllowedTop) {
+        fitCount = Math.max(1, i - 1);
+        break;
+      }
+    }
+    if (fitCount < tagElements.length) {
+      setLinesMaxTagCount(fitCount);
+    } else {
+      setLinesMaxTagCount(undefined);
+    }
+  }, [mergedMaxLines, isMultiple, prefixCls]);
+  React.useLayoutEffect(() => {
+    if (!mergedMaxLines || !isMultiple) {
+      setLinesMaxTagCount(undefined);
+      return;
+    }
+    setLinesMaxTagCount(undefined);
+    const timer = requestAnimationFrame(() => {
+      calculateMaxLinesTags();
+    });
+    return () => cancelAnimationFrame(timer);
+  }, [props.value, mergedMaxLines, isMultiple, calculateMaxLinesTags]);
+  React.useLayoutEffect(() => {
+    if (!mergedMaxLines || !isMultiple) return;
+    const container = internalSelectRef.current?.nativeElement;
+    if (!container || typeof ResizeObserver === 'undefined') return;
+    const resizeObserver = new ResizeObserver(() => {
+      calculateMaxLinesTags();
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [mergedMaxLines, isMultiple, calculateMaxLinesTags]);
+  // ====================== zIndex =========================
+  const [zIndex] = (0, _hooks.useZIndex)('SelectLike', mergedStyles.popup?.root?.zIndex ?? mergedPopupStyle?.zIndex);
+  // ====================== Render =======================
+  return /*#__PURE__*/React.createElement(_select.default, {
+    ref: internalSelectRef,
+    virtual: virtual,
+    classNames: mergedClassNames,
+    styles: mergedStyles,
+    showSearch: showSearch,
+    optionFilterProp: optionFilterProp ?? contextOptionFilterProp ?? 'label',
+    ...selectProps,
+    maxTagCount: mergedMaxLines && isMultiple ? linesMaxTagCount : props.maxTagCount ?? (isMultiple ? maxCount : undefined),
+    style: {
+      ...mergedStyles.root,
+      ...contextStyle,
+      ...style
+    },
+    popupMatchSelectWidth: mergedPopupMatchSelectWidth,
+    transitionName: (0, _motion.getTransitionName)(rootPrefixCls, 'slide-up', transitionName),
+    builtinPlacements: (0, _mergedBuiltinPlacements.default)(builtinPlacements, popupOverflow),
+    listHeight: listHeight,
+    listItemHeight: listItemHeight,
+    mode: mode,
+    prefixCls: prefixCls,
+    placement: memoPlacement,
+    direction: direction,
+    prefix: prefix,
+    suffixIcon: suffixIcon,
+    menuItemSelectedIcon: itemIcon,
+    removeIcon: removeIcon,
+    allowClear: mergedAllowClear,
+    notFoundContent: mergedNotFound,
+    className: mergedClassName,
+    getPopupContainer: getPopupContainer || getContextPopupContainer,
+    popupClassName: mergedPopupClassName,
+    disabled: mergedDisabled,
+    popupStyle: {
+      ...mergedStyles.popup?.root,
+      ...mergedPopupStyle,
+      zIndex
+    },
+    maxCount: isMultiple ? maxCount : undefined,
+    tagRender: isMultiple ? tagRender : undefined,
+    popupRender: mergedPopupRender,
+    onPopupVisibleChange: mergedOnOpenChange
+  });
+};
+if (process.env.NODE_ENV !== 'production') {
+  InternalSelect.displayName = 'Select';
+}
+const Select = /*#__PURE__*/React.forwardRef(InternalSelect);
+// We don't care debug panel
+/* istanbul ignore next */
+const PurePanel = (0, _PurePanel.default)(Select, 'popupAlign');
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+Select.Option = _select.Option;
+Select.OptGroup = _select.OptGroup;
+Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+if (process.env.NODE_ENV !== 'production') {
+  Select.displayName = 'Select';
+}
+var _default = exports.default = Select;

package/lib/select/SingleDisplaySelect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SelectProps, BaseOptionType, DefaultOptionType } from './Select';
+export type SingleDisplaySelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> = SelectProps<ValueType, OptionType>;
+declare const SingleDisplaySelect: <ValueType extends any[] = any[], OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SingleDisplaySelectProps<ValueType, OptionType>) => React.JSX.Element;
+export default SingleDisplaySelect;

package/lib/select/SingleDisplaySelect.js

@@ -0,0 +1,164 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Select = _interopRequireDefault(require("./Select"));
+var _popover = _interopRequireDefault(require("../popover"));
+var _tag = _interopRequireDefault(require("../tag"));
+var _configProvider = require("../config-provider");
+var _CloseOutlinedIcon = _interopRequireDefault(require("@tdm-design/icons/CloseOutlinedIcon"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function extractValueId(val) {
+  if (typeof val === 'object' && val !== null) {
+    if ('key' in val && val.key !== undefined) return val.key;
+    if ('value' in val && val.value !== undefined) return val.value;
+  }
+  return val;
+}
+const SingleDisplaySelect = props => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    tagRender,
+    maxTagPlaceholder,
+    prefixCls: customizePrefixCls,
+    ...restProps
+  } = props;
+  const {
+    getPrefixCls
+  } = _react.default.useContext(_configProvider.ConfigContext);
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  // Maintain internal state for uncontrolled usage
+  const [internalValue, setInternalValue] = (0, _react.useState)(() => {
+    if (value !== undefined) return value;
+    if (defaultValue !== undefined) return defaultValue;
+    return [];
+  });
+  // Keep track of the options to properly call onChange
+  const [internalOptions, setInternalOptions] = (0, _react.useState)([]);
+  // Sync with controlled value
+  (0, _react.useEffect)(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  // Sync internalOptions when value changes externally if possible
+  // In a real scenario we'd need to lookup options from the list if we don't have them
+  // For simplicity we just rely on onChange to provide them.
+  const handleChange = (val, opt) => {
+    if (value === undefined) {
+      setInternalValue(val);
+    }
+    setInternalOptions(opt);
+    onChange?.(val, opt);
+  };
+  const handleRemove = (itemValue, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const prevArray = Array.isArray(internalValue) ? internalValue : [];
+    const newValue = prevArray.filter(v => extractValueId(v) !== itemValue);
+    // We try to filter internalOptions, if it's not maintained correctly, we might pass [] 
+    // which is better than passing the wrong options.
+    const newOptions = Array.isArray(internalOptions) ? internalOptions.filter(opt => extractValueId(opt.value) !== itemValue) : [];
+    handleChange(newValue, newOptions);
+  };
+  const defaultTagRender = (0, _react.useCallback)(tagProps => {
+    const {
+      label,
+      closable,
+      onClose,
+      disabled: itemDisabled
+    } = tagProps;
+    const onMouseDown = e => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: `${prefixCls}-selection-item${itemDisabled ? ` ${prefixCls}-selection-item-disabled` : ''}`,
+      onMouseDown: onMouseDown
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: `${prefixCls}-selection-item-content`
+    }, label), closable && (/*#__PURE__*/_react.default.createElement("span", {
+      className: `${prefixCls}-selection-item-remove`,
+      onClick: e => {
+        e.stopPropagation();
+        onClose?.(e);
+      },
+      onMouseDown: onMouseDown
+    }, /*#__PURE__*/_react.default.createElement(_CloseOutlinedIcon.default, null))));
+  }, [prefixCls]);
+  const mergedTagRender = tagRender || defaultTagRender;
+  const defaultMaxTagPlaceholder = (0, _react.useCallback)(omittedValues => {
+    return /*#__PURE__*/_react.default.createElement(_popover.default, {
+      content: /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 6,
+          maxWidth: 350,
+          padding: 8
+        }
+      }, omittedValues.map(v => (/*#__PURE__*/_react.default.createElement(_tag.default, {
+        key: extractValueId(v.value),
+        closable: !disabled && !v.disabled,
+        closeIcon: /*#__PURE__*/_react.default.createElement("span", {
+          style: {
+            fontSize: 10,
+            display: 'inline-flex',
+            alignItems: 'center',
+            marginLeft: 6
+          }
+        }, "\u2715"),
+        onClose: e => handleRemove(extractValueId(v.value), e),
+        style: {
+          margin: 0,
+          display: 'flex',
+          alignItems: 'center',
+          padding: '2px 6px',
+          borderRadius: 4
+        }
+      }, v.label)))),
+      placement: "top",
+      trigger: "hover"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "+", omittedValues.length, " ..."));
+  }, [disabled, internalValue, internalOptions]);
+  const mergedMaxTagPlaceholder = maxTagPlaceholder || defaultMaxTagPlaceholder;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("style", null, `
+        .tdm-single-display-select .${prefixCls}-selector {
+          align-items: center !important;
+        }
+        .tdm-single-display-select .${prefixCls}-selection-item {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+          max-width: 100% !important;
+        }
+        .tdm-single-display-select .${prefixCls}-content-item {
+          max-width: 100% !important;
+        }
+        .tdm-single-display-select .${prefixCls}-selection-overflow {
+          flex-wrap: nowrap !important;
+          overflow: hidden;
+        }
+        .tdm-single-display-select .${prefixCls}-selection-overflow-item {
+          max-width: 100% !important;
+        }
+      `), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    ...restProps,
+    className: `tdm-single-display-select ${restProps.className || ''}`,
+    mode: restProps.mode || 'multiple',
+    value: internalValue,
+    onChange: handleChange,
+    disabled: disabled,
+    maxTagCount: restProps.maxTagCount !== undefined ? restProps.maxTagCount : 1,
+    tagRender: mergedTagRender,
+    maxTagPlaceholder: mergedMaxTagPlaceholder
+  }));
+};
+var _default = exports.default = SingleDisplaySelect;

package/lib/select/SortableSelect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SelectProps, BaseOptionType, DefaultOptionType } from './Select';
+export type SortableSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> = SelectProps<ValueType, OptionType>;
+declare const SortableSelect: <ValueType extends any[] = any[], OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SortableSelectProps<ValueType, OptionType>) => React.JSX.Element;
+export default SortableSelect;