@tdm-design/ui 0.0.15 → 0.0.16

package/lib/select/index.d.ts

@@ -1,125 +1,8 @@
-import * as React from 'react';
-import type { BaseSelectRef, SelectProps as RcSelectProps } from '@rc-component/select';
-import { OptGroup, Option } from '@rc-component/select';
-import type { OptionProps } from '@rc-component/select/lib/Option';
-import type { BaseOptionType, DefaultOptionType } from '@rc-component/select/lib/Select';
-import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
-import type { SelectCommonPlacement } from '../_util/motion';
-import type { InputStatus } from '../_util/statusUtils';
-import type { Variant } from '../config-provider';
-import type { SizeType } from '../config-provider/SizeContext';
-type RawValue = string | number;
-export type { BaseOptionType, DefaultOptionType, OptionProps, BaseSelectRef as RefSelectProps };
-export interface LabeledValue {
-    key?: string;
-    value: RawValue;
-    label: React.ReactNode;
-}
-export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
-export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
-    rootClassName?: string;
-    prefix?: React.ReactNode;
-    suffixIcon?: React.ReactNode;
-    size?: SizeType;
-    disabled?: boolean;
-    mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE' | 'combobox';
-    /** @deprecated Use `variant` instead. */
-    bordered?: boolean;
-    /**
-     * @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.
-     */
-    showArrow?: boolean;
-    /**
-     * @since 5.13.0
-     * @default "outlined"
-     */
-    variant?: Variant;
-    classNames?: SelectSemanticClassNames & {
-        popup?: SelectPopupSemanticClassNames;
-    };
-    styles?: SelectSemanticStyles & {
-        popup?: SelectPopupSemanticStyles;
-    };
-    /**
-     * @description Whether the option is a filter item
-     * @default false
-     * @type boolean
-     * TDM_CUSTOM: custom select filter (BEGIN)
-     */
-    isFilterItem?: boolean;
-}
-export type SelectSemanticName = keyof SelectSemanticClassNames & keyof SelectSemanticStyles;
-export type SelectSemanticClassNames = {
-    root?: string;
-    prefix?: string;
-    suffix?: string;
-    input?: string;
-    placeholder?: string;
-    content?: string;
-    item?: string;
-    itemContent?: string;
-    itemRemove?: string;
-    clear?: string;
-};
-export type SelectSemanticStyles = {
-    root?: React.CSSProperties;
-    prefix?: React.CSSProperties;
-    suffix?: React.CSSProperties;
-    input?: React.CSSProperties;
-    placeholder?: React.CSSProperties;
-    content?: React.CSSProperties;
-    item?: React.CSSProperties;
-    itemContent?: React.CSSProperties;
-    itemRemove?: React.CSSProperties;
-    clear?: React.CSSProperties;
-};
-export type SelectPopupSemanticName = keyof SelectPopupSemanticClassNames & keyof SelectPopupSemanticStyles;
-export type SelectPopupSemanticClassNames = {
-    root?: string;
-    listItem?: string;
-    list?: string;
-};
-export type SelectPopupSemanticStyles = {
-    root?: React.CSSProperties;
-    listItem?: React.CSSProperties;
-    list?: React.CSSProperties;
-};
-export type SelectClassNamesType = SemanticClassNamesType<SelectProps, SelectSemanticClassNames, {
-    popup?: SelectPopupSemanticClassNames;
-}>;
-export type SelectStylesType = SemanticStylesType<SelectProps, SelectSemanticStyles, {
-    popup?: SelectPopupSemanticStyles;
-}>;
-export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement' | 'dropdownClassName' | 'dropdownStyle'> {
-    placement?: SelectCommonPlacement;
-    mode?: 'multiple' | 'tags';
-    status?: InputStatus;
-    /** @deprecated Please use `classNames.popup.root` instead */
-    popupClassName?: string;
-    /** @deprecated Please use `classNames.popup.root` instead */
-    dropdownClassName?: string;
-    /** @deprecated Please use `styles.popup` instead */
-    dropdownStyle?: React.CSSProperties;
-    /** @deprecated Please use `popupRender` instead */
-    dropdownRender?: SelectProps['popupRender'];
-    /** @deprecated Please use `onOpenChange` instead */
-    onDropdownVisibleChange?: SelectProps['onPopupVisibleChange'];
-    /** @deprecated Please use `popupMatchSelectWidth` instead */
-    dropdownMatchSelectWidth?: boolean | number;
-    popupMatchSelectWidth?: boolean | number;
-    styles?: SelectStylesType;
-    classNames?: SelectClassNamesType;
-    onOpenChange?: (visible: boolean) => void;
-}
-declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
-    displayName?: string;
-    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
-    /** @deprecated Please use `options` instead. */
-    Option: typeof Option;
-    /** @deprecated Please use `options` instead. */
-    OptGroup: typeof OptGroup;
-    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
-};
-declare const PurePanel: (props: import("../_util/type").AnyObject) => React.JSX.Element;
+import Select from './Select';
+import SortableSelect from './SortableSelect';
+import SingleDisplaySelect from './SingleDisplaySelect';
+export type { SortableSelectProps } from './SortableSelect';
+export type { SingleDisplaySelectProps } from './SingleDisplaySelect';
+export * from './Select';
+export { SortableSelect, SingleDisplaySelect };
 export default Select;

package/lib/select/index.js

@@ -1,284 +1,42 @@
 "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,
-    ...rest
-  } = props;
-  const {
-    getPopupContainer: getContextPopupContainer,
-    getPrefixCls,
-    renderEmpty,
-    direction: contextDirection,
-    virtual,
-    popupMatchSelectWidth: contextPopupMatchSelectWidth,
-    popupOverflow
-  } = React.useContext(_configProvider.ConfigContext);
-  const {
-    showSearch,
-    optionFilterProp: contextOptionFilterProp,
-    style: contextStyle,
-    styles: contextStyles,
-    className: contextClassName,
-    classNames: contextClassNames
-  } = (0, _context.useComponentConfig)('select');
-  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"
-    });
+var _exportNames = {
+  SortableSelect: true,
+  SingleDisplaySelect: true
+};
+Object.defineProperty(exports, "SingleDisplaySelect", {
+  enumerable: true,
+  get: function () {
+    return _SingleDisplaySelect.default;
   }
-  // ===================== 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;
+});
+Object.defineProperty(exports, "SortableSelect", {
+  enumerable: true,
+  get: function () {
+    return _SortableSelect.default;
   }
-  // ====================== zIndex =========================
-  const [zIndex] = (0, _hooks.useZIndex)('SelectLike', mergedStyles.popup?.root?.zIndex ?? mergedPopupStyle?.zIndex);
-  // ====================== Render =======================
-  return /*#__PURE__*/React.createElement(_select.default, {
-    ref: ref,
-    virtual: virtual,
-    classNames: mergedClassNames,
-    styles: mergedStyles,
-    showSearch: showSearch,
-    optionFilterProp: optionFilterProp ?? contextOptionFilterProp ?? 'label',
-    ...selectProps,
-    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
+});
+exports.default = void 0;
+var _Select = _interopRequireWildcard(require("./Select"));
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Select[key];
+    }
   });
-};
-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;
+});
+var _SortableSelect = _interopRequireDefault(require("./SortableSelect"));
+var _SingleDisplaySelect = _interopRequireDefault(require("./SingleDisplaySelect"));
+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); }
+_Select.default.SortableSelect = _SortableSelect.default;
+_Select.default.SingleDisplaySelect = _SingleDisplaySelect.default;
+var _default = exports.default = _Select.default;

package/lib/select/style/select-input-multiple.js

@@ -69,7 +69,10 @@ const genSelectInputMultipleStyle = token => {
         },
         '&-item': {
           lineHeight: 1,
-          maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
+          maxWidth: `calc(50% - ${FIXED_INPUT_MIN_WIDTH}px)`
+        },
+        '&-item-suffix': {
+          maxWidth: '100%'
         },
         [`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
           ${componentCls}-content-item-suffix:first-child`]: {