@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

package/lib/segmented/style/index.css

@@ -0,0 +1,132 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.segmented-disabled-item,
+.segmented-disabled-item:hover,
+.segmented-disabled-item:focus {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.segmented-item-selected {
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
+}
+.segmented-text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.ant-segmented {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  display: inline-block;
+  padding: 2px;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 2px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-segmented-group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+}
+.ant-segmented.ant-segmented-block {
+  display: flex;
+}
+.ant-segmented.ant-segmented-block .ant-segmented-item {
+  flex: 1;
+  min-width: 0;
+}
+.ant-segmented:not(.ant-segmented-disabled):hover,
+.ant-segmented:not(.ant-segmented-disabled):focus {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.ant-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-segmented-item-selected {
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
+  color: #262626;
+}
+.ant-segmented-item:hover,
+.ant-segmented-item:focus {
+  color: #262626;
+}
+.ant-segmented-item-label {
+  min-height: 28px;
+  padding: 0 11px;
+  line-height: 28px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.ant-segmented-item-icon + * {
+  margin-left: 6px;
+}
+.ant-segmented-item-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.ant-segmented.ant-segmented-lg .ant-segmented-item-label {
+  min-height: 36px;
+  padding: 0 11px;
+  font-size: 16px;
+  line-height: 36px;
+}
+.ant-segmented.ant-segmented-sm .ant-segmented-item-label {
+  min-height: 20px;
+  padding: 0 7px;
+  line-height: 20px;
+}
+.ant-segmented-item-disabled,
+.ant-segmented-item-disabled:hover,
+.ant-segmented-item-disabled:focus {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-segmented-thumb {
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  padding: 4px 0;
+}
+.ant-segmented-thumb-motion-appear-active {
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  will-change: transform, width;
+}
+.ant-segmented.ant-segmented-rtl {
+  direction: rtl;
+}
+.ant-segmented.ant-segmented-rtl .ant-segmented-item-icon {
+  margin-right: 0;
+  margin-left: 6px;
+}

package/lib/segmented/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/default.less';
+import './index.less';

package/lib/segmented/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/default.less");
+
+require("./index.less");

package/lib/segmented/style/index.less

@@ -0,0 +1,3 @@
+@root-entry-name: default;
+
+@import './index-pure.less';

package/lib/segmented/style/mixins.less

@@ -0,0 +1,24 @@
+// mixins
+.segmented-disabled-item {
+  &,
+  &:hover,
+  &:focus {
+    color: @disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+.segmented-item-selected {
+  background-color: @segmented-selected-bg;
+  border-radius: @border-radius-base;
+  box-shadow: 0 2px 8px -2px fade(@black, 5%), 0 1px 4px -1px fade(@black, 7%),
+    0 0 1px 0 fade(@black, 8%);
+}
+
+.segmented-text-ellipsis {
+  overflow: hidden;
+  // handle text ellipsis
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}

package/lib/segmented/style/rtl.less

@@ -0,0 +1,15 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@segmented-prefix-cls: ~'@{ant-prefix}-segmented';
+
+.@{segmented-prefix-cls} {
+  &&-rtl {
+    direction: rtl;
+  }
+
+  &&-rtl &-item-icon {
+    margin-right: 0;
+    margin-left: 6px;
+  }
+}

package/lib/select/index.d.ts

@@ -0,0 +1,44 @@
+import type { SelectProps as RcSelectProps } from 'rc-select';
+import { BaseSelectRef, OptGroup, Option } from 'rc-select';
+import { OptionProps } from 'rc-select/lib/Option';
+import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
+import * as React from 'react';
+import type { SizeType } from '../config-provider/SizeContext';
+import type { SelectCommonPlacement } from '../_util/motion';
+import type { InputStatus } from '../_util/statusUtils';
+type RawValue = string | number;
+export { OptionProps, BaseSelectRef as RefSelectProps, BaseOptionType, DefaultOptionType };
+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'> {
+    suffixIcon?: React.ReactNode;
+    size?: SizeType;
+    disabled?: boolean;
+    mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+    bordered?: boolean;
+}
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement'> {
+    placement?: SelectCommonPlacement;
+    mode?: 'multiple' | 'tags';
+    status?: InputStatus;
+    /**
+     * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+     *   version.Please use `popupClassName` instead.
+     */
+    dropdownClassName?: string;
+    popupClassName?: string;
+}
+declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<BaseSelectRef> | undefined;
+}) => React.ReactElement) & {
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    Option: typeof Option;
+    OptGroup: typeof OptGroup;
+};
+export default Select;

package/lib/select/index.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcSelect = _interopRequireWildcard(require("rc-select"));
+
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
+
+var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
+
+var _SizeContext = _interopRequireDefault(require("../config-provider/SizeContext"));
+
+var _context = require("../form/context");
+
+var _motion = require("../_util/motion");
+
+var _statusUtils = require("../_util/statusUtils");
+
+var _iconUtil = _interopRequireDefault(require("./utils/iconUtil"));
+
+var _warning = _interopRequireDefault(require("../_util/warning"));
+
+var _Compact = require("../space/Compact"); // TODO: 4.0 - codemod should help to change `filterOption` to support node props.
+
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+
+var InternalSelect = function InternalSelect(_a, ref) {
+  var _classNames2;
+
+  var customizePrefixCls = _a.prefixCls,
+      _a$bordered = _a.bordered,
+      bordered = _a$bordered === void 0 ? true : _a$bordered,
+      className = _a.className,
+      getPopupContainer = _a.getPopupContainer,
+      dropdownClassName = _a.dropdownClassName,
+      popupClassName = _a.popupClassName,
+      _a$listHeight = _a.listHeight,
+      listHeight = _a$listHeight === void 0 ? 256 : _a$listHeight,
+      placement = _a.placement,
+      _a$listItemHeight = _a.listItemHeight,
+      listItemHeight = _a$listItemHeight === void 0 ? 24 : _a$listItemHeight,
+      customizeSize = _a.size,
+      customDisabled = _a.disabled,
+      notFoundContent = _a.notFoundContent,
+      customStatus = _a.status,
+      showArrow = _a.showArrow,
+      props = __rest(_a, ["prefixCls", "bordered", "className", "getPopupContainer", "dropdownClassName", "popupClassName", "listHeight", "placement", "listItemHeight", "size", "disabled", "notFoundContent", "status", "showArrow"]);
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getContextPopupContainer = _React$useContext.getPopupContainer,
+      getPrefixCls = _React$useContext.getPrefixCls,
+      renderEmpty = _React$useContext.renderEmpty,
+      direction = _React$useContext.direction,
+      virtual = _React$useContext.virtual,
+      dropdownMatchSelectWidth = _React$useContext.dropdownMatchSelectWidth;
+
+  var size = React.useContext(_SizeContext["default"]);
+  var prefixCls = getPrefixCls('select', customizePrefixCls);
+  var rootPrefixCls = getPrefixCls();
+
+  var _useCompactItemContex = (0, _Compact.useCompactItemContext)(prefixCls, direction),
+      compactSize = _useCompactItemContex.compactSize,
+      compactItemClassnames = _useCompactItemContex.compactItemClassnames;
+
+  var mode = React.useMemo(function () {
+    var m = props.mode;
+
+    if (m === 'combobox') {
+      return undefined;
+    }
+
+    if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
+      return 'combobox';
+    }
+
+    return m;
+  }, [props.mode]);
+  var isMultiple = mode === 'multiple' || mode === 'tags';
+  var mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox'); // =================== Warning =====================
+
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!dropdownClassName, 'Select', '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.') : void 0; // ===================== Form Status =====================
+
+  var _useContext = (0, React.useContext)(_context.FormItemInputContext),
+      contextStatus = _useContext.status,
+      hasFeedback = _useContext.hasFeedback,
+      isFormItemInput = _useContext.isFormItemInput,
+      feedbackIcon = _useContext.feedbackIcon;
+
+  var mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus); // ===================== Empty =====================
+
+  var mergedNotFound;
+
+  if (notFoundContent !== undefined) {
+    mergedNotFound = notFoundContent;
+  } else if (mode === 'combobox') {
+    mergedNotFound = null;
+  } else {
+    mergedNotFound = (renderEmpty || _defaultRenderEmpty["default"])('Select');
+  } // ===================== Icons =====================
+
+
+  var _getIcons = (0, _iconUtil["default"])((0, _extends2["default"])((0, _extends2["default"])({}, props), {
+    multiple: isMultiple,
+    hasFeedback: hasFeedback,
+    feedbackIcon: feedbackIcon,
+    showArrow: mergedShowArrow,
+    prefixCls: prefixCls
+  })),
+      suffixIcon = _getIcons.suffixIcon,
+      itemIcon = _getIcons.itemIcon,
+      removeIcon = _getIcons.removeIcon,
+      clearIcon = _getIcons.clearIcon;
+
+  var selectProps = (0, _omit["default"])(props, ['suffixIcon', 'itemIcon']);
+  var rcSelectRtlDropdownClassName = (0, _classnames["default"])(popupClassName || dropdownClassName, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-dropdown-").concat(direction), direction === 'rtl'));
+  var mergedSize = compactSize || customizeSize || size; // ===================== Disabled =====================
+
+  var disabled = React.useContext(_DisabledContext["default"]);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  var mergedClassName = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-lg"), mergedSize === 'large'), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-sm"), mergedSize === 'small'), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-borderless"), !bordered), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-in-form-item"), isFormItemInput), _classNames2), (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, className); // ===================== Placement =====================
+
+  var getPlacement = function getPlacement() {
+    if (placement !== undefined) {
+      return placement;
+    }
+
+    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+  };
+
+  return /*#__PURE__*/React.createElement(_rcSelect["default"], (0, _extends2["default"])({
+    ref: ref,
+    virtual: virtual,
+    dropdownMatchSelectWidth: dropdownMatchSelectWidth
+  }, selectProps, {
+    transitionName: (0, _motion.getTransitionName)(rootPrefixCls, (0, _motion.getTransitionDirection)(placement), props.transitionName),
+    listHeight: listHeight,
+    listItemHeight: listItemHeight,
+    mode: mode,
+    prefixCls: prefixCls,
+    placement: getPlacement(),
+    direction: direction,
+    inputIcon: suffixIcon,
+    menuItemSelectedIcon: itemIcon,
+    removeIcon: removeIcon,
+    clearIcon: clearIcon,
+    notFoundContent: mergedNotFound,
+    className: mergedClassName,
+    getPopupContainer: getPopupContainer || getContextPopupContainer,
+    dropdownClassName: rcSelectRtlDropdownClassName,
+    showArrow: hasFeedback || showArrow,
+    disabled: mergedDisabled
+  }));
+};
+
+var Select = /*#__PURE__*/React.forwardRef(InternalSelect);
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+Select.Option = _rcSelect.Option;
+Select.OptGroup = _rcSelect.OptGroup;
+var _default = Select;
+exports["default"] = _default;

package/lib/select/style/css.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");
+
+require("../../empty/style/css");