@aloudata/aloudata-design 0.2.5 → 0.3.0-beta.1

package/es/Select/rc-select/OptionList.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { ScrollConfig } from 'rc-virtual-list/lib/List';
+export declare type OptionListProps = Record<string, never>;
+export interface RefOptionListProps {
+    onKeyDown: React.KeyboardEventHandler;
+    onKeyUp: React.KeyboardEventHandler;
+    scrollTo?: (args: number | ScrollConfig) => void;
+}
+declare const RefOptionList: React.ForwardRefExoticComponent<Pick<Record<string, never>, string> & React.RefAttributes<RefOptionListProps>>;
+export default RefOptionList;

package/es/Select/rc-select/OptionList.js

@@ -0,0 +1,401 @@
+var _excluded = ["disabled", "title", "children", "style", "className"];
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+// @ts-nocheck
+import * as React from 'react';
+import { useEffect } from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
+import omit from 'rc-util/lib/omit';
+import pickAttrs from 'rc-util/lib/pickAttrs';
+import useMemo from 'rc-util/lib/hooks/useMemo';
+import classNames from 'classnames';
+import List from 'rc-virtual-list';
+import { isPlatformMac } from './utils/platformUtil';
+import useBaseProps from './hooks/useBaseProps';
+import SelectContext from './SelectContext';
+import Checkbox from '../../Checkbox';
+import Icon from '../../Icon';
+import colors from '../../style/themes/default/themeColor.module.less';
+
+function isTitleType(content) {
+  return typeof content === 'string' || typeof content === 'number';
+}
+/**
+ * Using virtual list of option display.
+ * Will fallback to dom if use customize render.
+ */
+
+
+var OptionList = function OptionList(_, ref) {
+  var _useBaseProps = useBaseProps(),
+      prefixCls = _useBaseProps.prefixCls,
+      id = _useBaseProps.id,
+      open = _useBaseProps.open,
+      multiple = _useBaseProps.multiple,
+      mode = _useBaseProps.mode,
+      searchValue = _useBaseProps.searchValue,
+      toggleOpen = _useBaseProps.toggleOpen,
+      notFoundContent = _useBaseProps.notFoundContent,
+      onPopupScroll = _useBaseProps.onPopupScroll;
+
+  var _React$useContext = React.useContext(SelectContext),
+      flattenOptions = _React$useContext.flattenOptions,
+      onActiveValue = _React$useContext.onActiveValue,
+      defaultActiveFirstOption = _React$useContext.defaultActiveFirstOption,
+      onSelect = _React$useContext.onSelect,
+      menuItemSelectedIcon = _React$useContext.menuItemSelectedIcon,
+      rawValues = _React$useContext.rawValues,
+      fieldNames = _React$useContext.fieldNames,
+      virtual = _React$useContext.virtual,
+      listHeight = _React$useContext.listHeight,
+      listItemHeight = _React$useContext.listItemHeight;
+
+  var itemPrefixCls = "".concat(prefixCls, "-item");
+  var memoFlattenOptions = useMemo(function () {
+    return flattenOptions;
+  }, [open, flattenOptions], function (prev, next) {
+    return next[0] && prev[1] !== next[1];
+  }); // =========================== List ===========================
+
+  var listRef = React.useRef(null);
+
+  var onListMouseDown = function onListMouseDown(event) {
+    event.preventDefault();
+  };
+
+  var scrollIntoView = function scrollIntoView(args) {
+    if (listRef.current) {
+      listRef.current.scrollTo(typeof args === 'number' ? {
+        index: args
+      } : args);
+    }
+  }; // ========================== Active ==========================
+
+
+  var getEnabledActiveIndex = function getEnabledActiveIndex(index) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var len = memoFlattenOptions.length;
+
+    for (var i = 0; i < len; i += 1) {
+      var current = (index + i * offset + len) % len;
+      var _memoFlattenOptions$c = memoFlattenOptions[current],
+          group = _memoFlattenOptions$c.group,
+          data = _memoFlattenOptions$c.data;
+
+      if (!group && !data.disabled) {
+        return current;
+      }
+    }
+
+    return -1;
+  };
+
+  var _React$useState = React.useState(function () {
+    return getEnabledActiveIndex(0);
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      activeIndex = _React$useState2[0],
+      setActiveIndex = _React$useState2[1];
+
+  var setActive = function setActive(index) {
+    var fromKeyboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setActiveIndex(index);
+    var info = {
+      source: fromKeyboard ? 'keyboard' : 'mouse'
+    }; // Trigger active event
+
+    var flattenItem = memoFlattenOptions[index];
+
+    if (!flattenItem) {
+      onActiveValue(null, -1, info);
+      return;
+    }
+
+    onActiveValue(flattenItem.value, index, info);
+  }; // Auto active first item when list length or searchValue changed
+
+
+  useEffect(function () {
+    setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
+  }, [memoFlattenOptions.length, searchValue]); // https://github.com/ant-design/ant-design/issues/34975
+
+  var isSelected = React.useCallback(function (value) {
+    return rawValues.has(value) && mode !== 'combobox';
+  }, [mode, _toConsumableArray(rawValues).toString()]); // Auto scroll to item position in single mode
+
+  useEffect(function () {
+    /**
+     * React will skip `onChange` when component update.
+     * `setActive` function will call root accessibility state update which makes re-render.
+     * So we need to delay to let Input component trigger onChange first.
+     */
+    var timeoutId = setTimeout(function () {
+      if (!multiple && open && rawValues.size === 1) {
+        var value = Array.from(rawValues)[0];
+        var index = memoFlattenOptions.findIndex(function (_ref) {
+          var data = _ref.data;
+          return data.value === value;
+        });
+
+        if (index !== -1) {
+          setActive(index);
+          scrollIntoView(index);
+        }
+      }
+    }); // Force trigger scrollbar visible when open
+
+    if (open) {
+      var _listRef$current;
+
+      (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(undefined);
+    }
+
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [open, searchValue]); // ========================== Values ==========================
+
+  var onSelectValue = function onSelectValue(value) {
+    if (value !== undefined) {
+      onSelect(value, {
+        selected: !rawValues.has(value)
+      });
+    } // Single mode should always close by select
+
+
+    if (!multiple) {
+      toggleOpen(false);
+    }
+  }; // ========================= Keyboard =========================
+
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      onKeyDown: function onKeyDown(event) {
+        var which = event.which,
+            ctrlKey = event.ctrlKey;
+
+        switch (which) {
+          // >>> Arrow keys & ctrl + n/p on Mac
+          case KeyCode.N:
+          case KeyCode.P:
+          case KeyCode.UP:
+          case KeyCode.DOWN:
+            {
+              var offset = 0;
+
+              if (which === KeyCode.UP) {
+                offset = -1;
+              } else if (which === KeyCode.DOWN) {
+                offset = 1;
+              } else if (isPlatformMac() && ctrlKey) {
+                if (which === KeyCode.N) {
+                  offset = 1;
+                } else if (which === KeyCode.P) {
+                  offset = -1;
+                }
+              }
+
+              if (offset !== 0) {
+                var nextActiveIndex = getEnabledActiveIndex(activeIndex + offset, offset);
+                scrollIntoView(nextActiveIndex);
+                setActive(nextActiveIndex, true);
+              }
+
+              break;
+            }
+          // >>> Select
+
+          case KeyCode.ENTER:
+            {
+              // value
+              var item = memoFlattenOptions[activeIndex];
+
+              if (item && !item.data.disabled) {
+                onSelectValue(item.value);
+              } else {
+                onSelectValue(undefined);
+              }
+
+              if (open) {
+                event.preventDefault();
+              }
+
+              break;
+            }
+          // >>> Close
+
+          case KeyCode.ESC:
+            {
+              toggleOpen(false);
+
+              if (open) {
+                event.stopPropagation();
+              }
+            }
+        }
+      },
+      onKeyUp: function onKeyUp() {},
+      scrollTo: function scrollTo(index) {
+        scrollIntoView(index);
+      }
+    };
+  }); // ========================== Render ==========================
+
+  if (memoFlattenOptions.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      role: "listbox",
+      id: "".concat(id, "_list"),
+      className: "".concat(itemPrefixCls, "-empty"),
+      onMouseDown: onListMouseDown
+    }, notFoundContent);
+  }
+
+  var omitFieldNameList = Object.keys(fieldNames).map(function (key) {
+    return fieldNames[key];
+  });
+
+  var getLabel = function getLabel(item) {
+    return item.label;
+  };
+
+  var renderItem = function renderItem(index) {
+    var item = memoFlattenOptions[index];
+    if (!item) return null;
+    var itemData = item.data || {};
+    var value = itemData.value;
+    var group = item.group;
+    var attrs = pickAttrs(itemData, true);
+    var mergedLabel = getLabel(item);
+    return item ? /*#__PURE__*/React.createElement("div", Object.assign({
+      "aria-label": typeof mergedLabel === 'string' && !group ? mergedLabel : null
+    }, attrs, {
+      key: index,
+      role: group ? 'presentation' : 'option',
+      id: "".concat(id, "_list_").concat(index),
+      "aria-selected": isSelected(value)
+    }), value) : null;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    role: "listbox",
+    id: "".concat(id, "_list"),
+    style: {
+      height: 0,
+      width: 0,
+      overflow: 'hidden'
+    }
+  }, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(List, {
+    itemKey: "key",
+    ref: listRef,
+    data: memoFlattenOptions,
+    height: listHeight,
+    itemHeight: listItemHeight,
+    fullHeight: false,
+    onMouseDown: onListMouseDown,
+    onScroll: onPopupScroll,
+    virtual: virtual
+  }, function (item, itemIndex) {
+    var _classNames;
+
+    var group = item.group,
+        groupOption = item.groupOption,
+        data = item.data,
+        label = item.label,
+        value = item.value;
+    var key = data.key; // Group
+
+    if (group) {
+      var _data$title;
+
+      var groupTitle = (_data$title = data.title) !== null && _data$title !== void 0 ? _data$title : isTitleType(label) ? label.toString() : undefined;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(itemPrefixCls, "".concat(itemPrefixCls, "-group")),
+        title: groupTitle
+      }, label !== undefined ? label : key);
+    }
+
+    var disabled = data.disabled,
+        title = data.title,
+        children = data.children,
+        style = data.style,
+        className = data.className,
+        otherProps = _objectWithoutProperties(data, _excluded);
+
+    var passedProps = omit(otherProps, omitFieldNameList); // Option
+
+    var selected = isSelected(value);
+    var optionPrefixCls = "".concat(itemPrefixCls, "-option");
+    var optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(optionPrefixCls, "-grouped"), groupOption), _defineProperty(_classNames, "".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-selected"), selected), _classNames));
+    var mergedLabel = getLabel(item);
+    var iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected; // https://github.com/ant-design/ant-design/issues/34145
+
+    var content = typeof mergedLabel === 'number' ? mergedLabel : mergedLabel || value; // https://github.com/ant-design/ant-design/issues/26717
+
+    var optionTitle = isTitleType(content) ? content.toString() : undefined;
+
+    if (title !== undefined) {
+      optionTitle = title;
+    }
+
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, pickAttrs(passedProps), {
+      "aria-selected": selected,
+      className: classNames(optionClassName, 'ald-select-item'),
+      title: optionTitle,
+      onMouseMove: function onMouseMove() {
+        if (activeIndex === itemIndex || disabled) {
+          return;
+        }
+
+        setActive(itemIndex);
+      },
+      onClick: function onClick() {
+        if (!disabled) {
+          onSelectValue(value);
+        }
+      },
+      style: style
+    }), !multiple && /*#__PURE__*/React.createElement("div", {
+      className: 'ald-select-single-check'
+    }, selected && /*#__PURE__*/React.createElement(Icon, {
+      color: colors.B60,
+      size: '1em',
+      type: "check"
+    })), multiple && /*#__PURE__*/React.createElement(Checkbox, {
+      className: 'ald-select-multiple-checkbox',
+      checked: selected,
+      disabled: disabled
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(optionPrefixCls, "-content")
+    }, content), /*#__PURE__*/React.isValidElement(menuItemSelectedIcon) || selected);
+  }));
+};
+
+var RefOptionList = /*#__PURE__*/React.forwardRef(OptionList);
+RefOptionList.displayName = 'OptionList';
+export default RefOptionList;

package/es/Select/rc-select/Select.d.ts

@@ -0,0 +1,109 @@
+/**
+ * To match accessibility requirement, we always provide an input in the component.
+ * Other element will not set `tabIndex` to avoid `onBlur` sequence problem.
+ * For focused select, we set `aria-live="polite"` to update the accessibility content.
+ *
+ * ref:
+ * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
+ *
+ * New api:
+ * - listHeight
+ * - listItemHeight
+ * - component
+ *
+ * Remove deprecated api:
+ * - multiple
+ * - tags
+ * - combobox
+ * - firstActiveValue
+ * - dropdownMenuStyle
+ * - openClassName (Not list in api)
+ *
+ * Update:
+ * - `backfill` only support `combobox` mode
+ * - `combobox` mode not support `labelInValue` since it's meaningless
+ * - `getInputElement` only support `combobox` mode
+ * - `onChange` return OptionData instead of ReactNode
+ * - `filterOption` `onChange` `onSelect` accept OptionData instead of ReactNode
+ * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
+ * - `combobox` mode not support `optionLabelProp`
+ */
+import * as React from 'react';
+import type { DisplayValueType, RenderNode } from './BaseSelect';
+import Option from './Option';
+import OptGroup from './OptGroup';
+import type { BaseSelectRef, BaseSelectPropsWithoutPrivate } from './BaseSelect';
+export declare type OnActiveValue = (active: RawValueType, index: number, info?: {
+    source?: 'keyboard' | 'mouse';
+}) => void;
+export declare type OnInternalSelect = (value: RawValueType, info: {
+    selected: boolean;
+}) => void;
+export declare type RawValueType = string | number;
+export interface LabelInValueType {
+    label: React.ReactNode;
+    value: RawValueType;
+    /** @deprecated `key` is useless since it should always same as `value` */
+    key?: React.Key;
+}
+export declare type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
+export declare type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
+export interface FieldNames {
+    value?: string;
+    label?: string;
+    options?: string;
+}
+export interface BaseOptionType {
+    disabled?: boolean;
+    [name: string]: any;
+}
+export interface DefaultOptionType extends BaseOptionType {
+    label: React.ReactNode;
+    value?: string | number | null;
+    children?: Omit<DefaultOptionType, 'children'>[];
+}
+export declare type SelectHandler<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> = ((value: RawValueType | LabelInValueType, option: OptionType) => void) | ((value: ValueType, option: OptionType) => void);
+declare type ArrayElementType<T> = T extends (infer E)[] ? E : T;
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
+    prefixCls?: string;
+    id?: string;
+    backfill?: boolean;
+    fieldNames?: FieldNames;
+    /** @deprecated Use `searchValue` instead */
+    inputValue?: string;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
+    onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    /**
+     * In Select, `false` means do nothing.
+     * In TreeSelect, `false` will highlight match item.
+     * It's by design.
+     */
+    filterOption?: boolean | FilterFunc<OptionType>;
+    filterSort?: (optionA: OptionType, optionB: OptionType) => number;
+    optionFilterProp?: string;
+    optionLabelProp?: string;
+    children?: React.ReactNode;
+    options?: OptionType[];
+    defaultActiveFirstOption?: boolean;
+    virtual?: boolean;
+    listHeight?: number;
+    listItemHeight?: number;
+    menuItemSelectedIcon?: RenderNode;
+    mode?: 'combobox' | 'multiple' | 'tags';
+    labelInValue?: boolean;
+    value?: ValueType | null;
+    defaultValue?: ValueType | null;
+    onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
+}
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+    children?: React.ReactNode;
+} & {
+    ref?: ((instance: BaseSelectRef | null) => void) | React.RefObject<BaseSelectRef> | null | undefined;
+}) => React.ReactElement) & {
+    Option: typeof Option;
+    OptGroup: typeof OptGroup;
+};
+export default TypedSelect;