@dpocean/chatui 1.0.0

package/lib/components/Coupon/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Coupon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Price = require("../Price");
+var _Button = require("../Button");
+var _Flex = require("../Flex");
+var _Text = require("../Text");
+var _Ribbon = require("../Ribbon");
+var _date = require("../../utils/date");
+var statusLabelMap = {
+  normal: '',
+  nearExpired: '快失效',
+  expired: '已过期',
+  used: '已使用',
+  deleted: '已删除'
+};
+var Coupon = exports.Coupon = function Coupon(props) {
+  var className = props.className,
+    value = props.value,
+    discount = props.discount,
+    condition = props.condition,
+    name = props.name,
+    endAt = props.endAt,
+    dateDesc = props.dateDesc,
+    desc = props.desc,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'normal' : _props$status,
+    _props$inList = props.inList,
+    inList = _props$inList === void 0 ? false : _props$inList,
+    _props$btnText = props.btnText,
+    btnText = _props$btnText === void 0 ? '查看' : _props$btnText,
+    onClick = props.onClick;
+  var statusLabel = statusLabelMap[status] || '';
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: (0, _clsx.default)('Coupon', className),
+    "data-status": status,
+    "data-in-list": inList,
+    onClick: inList ? undefined : onClick
+  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "Coupon-object",
+    center: true,
+    direction: "column"
+  }, value ? /*#__PURE__*/_react.default.createElement(_Price.Price, {
+    className: "Coupon-value",
+    price: value,
+    currency: "\xA5",
+    autoFit: true
+  }) : discount ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "Coupon-discount Price",
+    "data-size": "xl"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "Price-integer"
+  }, discount), /*#__PURE__*/_react.default.createElement("span", {
+    className: "Coupon-discount-suffix"
+  }, "\u6298")) : null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "Coupon-condition",
+    truncate: 2
+  }, condition)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Coupon-divider"
+  }), /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, {
+    className: "Coupon-main"
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "Coupon-name",
+    truncate: true
+  }, name), dateDesc ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "Coupon-desc",
+    truncate: true
+  }, dateDesc) : endAt ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "Coupon-desc",
+    truncate: true
+  }, (0, _date.formatExpireTime)(endAt)) : null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "Coupon-desc",
+    truncate: true
+  }, desc)), onClick && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "Coupon-actions",
+    center: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    className: "Coupon-btn",
+    onClick: inList ? onClick : undefined
+  }, btnText)), statusLabel && /*#__PURE__*/_react.default.createElement(_Ribbon.Ribbon, {
+    color: ['expired', 'used', 'deleted'].includes(status) ? 'gray' : 'primary',
+    position: "right",
+    size: "sm"
+  }, statusLabel));
+};

package/lib/components/Divider/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type DividerProps = {
+    className?: string;
+    position?: 'center' | 'left' | 'right';
+    children?: React.ReactNode;
+};
+export declare const Divider: (props: DividerProps) => React.JSX.Element;

package/lib/components/Divider/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["className", "position", "children"];
+var Divider = exports.Divider = function Divider(props) {
+  var className = props.className,
+    _props$position = props.position,
+    position = _props$position === void 0 ? 'center' : _props$position,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('Divider', !!children && "Divider--text-".concat(position), className),
+    role: "separator"
+  }, other), children);
+};

package/lib/components/Empty/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type EmptyProps = {
+    className?: string;
+    type?: 'error' | 'error_permission' | 'error_system' | 'order' | 'benefit' | 'search' | 'knowledge';
+    image?: string;
+    tip?: string;
+    desc?: string;
+    children?: React.ReactNode;
+};
+export declare const Empty: (props: EmptyProps) => React.JSX.Element;

package/lib/components/Empty/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Empty = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Flex = require("../Flex");
+var _Image = require("../Image");
+// 根据不同类型设置默认图片
+var getDefaultImage = function getDefaultImage(type) {
+  switch (type) {
+    case 'error':
+      return '//gw.alicdn.com/imgextra/i3/O1CN0189gA291s1P3ribzqY_!!6000000005706-55-tps-280-200.svg';
+    case 'error_permission':
+      return '//gw.alicdn.com/imgextra/i3/O1CN01w3M7wn1sVAnwUCUSN_!!6000000005771-55-tps-280-200.svg';
+    case 'error_system':
+      return '//gw.alicdn.com/imgextra/i2/O1CN01sQpWzK1ynqeLrIzCg_!!6000000006624-55-tps-280-200.svg';
+    case 'order':
+      return '//gw.alicdn.com/imgextra/i1/O1CN011akG1g1sB1NYoqSFz_!!6000000005727-55-tps-280-200.svg';
+    case 'benefit':
+      return '//gw.alicdn.com/imgextra/i2/O1CN01v5pA1d1MctmYWl1jB_!!6000000001456-55-tps-280-200.svg';
+    case 'knowledge':
+      return '//gw.alicdn.com/imgextra/i3/O1CN01hriild1j68c8wCq3S_!!6000000004498-55-tps-280-200.svg';
+    default:
+      return '//gw.alicdn.com/imgextra/i4/O1CN01sK49rS1Wd23TqzNUM_!!6000000002810-55-tps-280-200.svg';
+  }
+};
+var Empty = exports.Empty = function Empty(props) {
+  var className = props.className,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'search' : _props$type,
+    image = props.image,
+    tip = props.tip,
+    desc = props.desc,
+    children = props.children;
+  var imgUrl = image || getDefaultImage(type);
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: (0, _clsx.default)('Empty', className),
+    direction: "column",
+    center: true
+  }, /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    className: "Empty-img",
+    src: imgUrl
+  }), tip && /*#__PURE__*/_react.default.createElement("h5", {
+    className: "Empty-tip"
+  }, tip), desc && /*#__PURE__*/_react.default.createElement("p", {
+    className: "Empty-desc"
+  }, desc), children);
+};

package/lib/components/ErrorBoundary/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface ErrorBoundaryState {
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+}
+export interface FallbackProps {
+    error: Error;
+    errorInfo: React.ErrorInfo;
+    [k: string]: any;
+}
+export type ErrorBoundaryProps = {
+    FallbackComponent?: React.ComponentType<FallbackProps>;
+    onError?: (error: Error, info: React.ErrorInfo) => void;
+    [k: string]: any;
+};
+export declare class ErrorBoundary extends React.Component<React.PropsWithRef<React.PropsWithChildren<ErrorBoundaryProps>>, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}

package/lib/components/ErrorBoundary/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundary = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["FallbackComponent", "children"];
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  function ErrorBoundary(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, ErrorBoundary);
+    _this = _callSuper(this, ErrorBoundary, [props]);
+    _this.state = {
+      error: null,
+      errorInfo: null
+    };
+    return _this;
+  }
+  (0, _inherits2.default)(ErrorBoundary, _React$Component);
+  return (0, _createClass2.default)(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      var onError = this.props.onError;
+      if (onError) {
+        onError(error, errorInfo);
+      }
+      this.setState({
+        error: error,
+        errorInfo: errorInfo
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        FallbackComponent = _this$props.FallbackComponent,
+        children = _this$props.children,
+        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var _this$state = this.state,
+        error = _this$state.error,
+        errorInfo = _this$state.errorInfo;
+      if (errorInfo) {
+        if (FallbackComponent) {
+          return /*#__PURE__*/_react.default.createElement(FallbackComponent, (0, _extends2.default)({
+            error: error,
+            errorInfo: errorInfo
+          }, rest));
+        }
+        return null;
+      }
+      return children;
+    }
+  }]);
+}(_react.default.Component);

package/lib/components/FileCard/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface FileCardProps {
+    className?: string;
+    file: File;
+    extension?: string;
+    children?: React.ReactNode;
+}
+export declare const FileCard: (props: FileCardProps) => React.JSX.Element;

package/lib/components/FileCard/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Card = require("../Card");
+var _Flex = require("../Flex");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _getExtName = _interopRequireDefault(require("../../utils/getExtName"));
+var _prettyBytes = _interopRequireDefault(require("../../utils/prettyBytes"));
+var FileCard = exports.FileCard = function FileCard(props) {
+  var className = props.className,
+    file = props.file,
+    extension = props.extension,
+    children = props.children;
+  var name = file.name,
+    size = file.size;
+  var ext = extension || (0, _getExtName.default)(name);
+  return /*#__PURE__*/_react.default.createElement(_Card.Card, {
+    className: (0, _clsx.default)('FileCard', className),
+    size: "xl"
+  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "FileCard-icon",
+    "data-type": ext
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: "file"
+  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    truncate: true,
+    as: "span",
+    className: "FileCard-ext"
+  }, ext)), /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    truncate: 2,
+    breakWord: true,
+    className: "FileCard-name"
+  }, name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "FileCard-meta"
+  }, size != null && /*#__PURE__*/_react.default.createElement("span", {
+    className: "FileCard-size"
+  }, (0, _prettyBytes.default)(size)), children))));
+};

package/lib/components/Filter/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface FilterOption {
+    label: string;
+    children?: FilterOption[];
+}
+export type FilterValue = Record<string, string>;
+export interface FilterProps {
+    className?: string;
+    options: FilterOption[];
+    value?: FilterValue;
+    size?: 'md' | 'lg';
+    itemsPerRow?: number;
+    scrollable?: boolean;
+    onChange?: (value: FilterValue) => void;
+}
+export declare const Filter: (props: FilterProps) => React.JSX.Element;
+export {};

package/lib/components/Filter/index.js

@@ -0,0 +1,208 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Filter = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
+var _useLatest = require("../../hooks/useLatest");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var ChildOptions = function ChildOptions(_ref) {
+  var value = _ref.value,
+    option = _ref.option,
+    _onClick = _ref.onClick;
+  var optionLabel = option.label;
+  var optionValue = value[optionLabel];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "FilterChildOptions"
+  }, option.children.map(function (child) {
+    var childLabel = child.label;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: childLabel,
+      className: "FilterOption",
+      "data-active": optionValue === childLabel,
+      onClick: function onClick() {
+        return _onClick(optionLabel, child);
+      }
+    }, childLabel);
+  }));
+};
+var Filter = exports.Filter = function Filter(props) {
+  var className = props.className,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    outerValue = props.value,
+    size = props.size,
+    _props$itemsPerRow = props.itemsPerRow,
+    itemsPerRow = _props$itemsPerRow === void 0 ? 3 : _props$itemsPerRow,
+    _props$scrollable = props.scrollable,
+    scrollable = _props$scrollable === void 0 ? options.length > 4 : _props$scrollable,
+    onChange = props.onChange;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    expandedOption = _useState4[0],
+    setExpandedOption = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    showMask = _useState6[0],
+    setShowMask = _useState6[1];
+  var filterOptionsRef = (0, _react.useRef)(null);
+  var onChangeRef = (0, _useLatest.useLatest)(onChange);
+  var isControlled = outerValue !== undefined;
+  // 根据是否受控来决定使用哪个值
+  var filterValue = isControlled ? outerValue : innerValue;
+  var removeValue = function removeValue(label) {
+    var _onChangeRef$current;
+    var newValue;
+    if (isControlled) {
+      // 受控模式下，直接从传入的 value 中删除
+      var _ref2 = filterValue || {},
+        removed = _ref2[label],
+        rest = (0, _objectWithoutProperties2.default)(_ref2, [label].map(_toPropertyKey));
+      newValue = rest;
+    } else {
+      // 非受控模式下，从内部状态中删除并更新状态
+      var _ref3 = filterValue || {},
+        _removed = _ref3[label],
+        _rest = (0, _objectWithoutProperties2.default)(_ref3, [label].map(_toPropertyKey));
+      newValue = _rest;
+      setInnerValue(newValue);
+    }
+    (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, newValue);
+  };
+  var updateValue = function updateValue(key, val) {
+    var _onChangeRef$current2;
+    var newValue = _objectSpread(_objectSpread({}, filterValue), {}, (0, _defineProperty2.default)({}, key, val));
+    if (!isControlled) {
+      // 非受控模式下，更新内部状态
+      setInnerValue(newValue);
+    }
+    (_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, newValue);
+  };
+  var closeExpandedOption = function closeExpandedOption() {
+    setExpandedOption(null);
+  };
+  var wrapper = (0, _useClickOutside.default)(closeExpandedOption);
+
+  // 检查是否需要显示遮罩
+  var checkMaskVisibility = (0, _react.useCallback)(function () {
+    if (filterOptionsRef.current && scrollable) {
+      var _filterOptionsRef$cur = filterOptionsRef.current,
+        scrollLeft = _filterOptionsRef$cur.scrollLeft,
+        scrollWidth = _filterOptionsRef$cur.scrollWidth,
+        clientWidth = _filterOptionsRef$cur.clientWidth;
+      // 当滚动到最右边时隐藏遮罩
+      var isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+      // 只有在内容超出容器且未滚动到最右边时才显示遮罩
+      setShowMask(scrollWidth > clientWidth && !isAtEnd);
+    }
+  }, [scrollable]);
+  (0, _react.useEffect)(function () {
+    // 初始化检查
+    checkMaskVisibility();
+  }, [checkMaskVisibility, scrollable]);
+  var handleOptionClick = function handleOptionClick(option, e) {
+    var label = option.label;
+    var isExpanded = (expandedOption === null || expandedOption === void 0 ? void 0 : expandedOption.label) === label;
+    var hasChildren = option.children && option.children.length > 0;
+
+    // 滚动到中心
+    if (scrollable && filterOptionsRef.current) {
+      var container = filterOptionsRef.current;
+      var containerWidth = container.offsetWidth;
+      var target = e.currentTarget;
+      var targetOffsetLeft = target.offsetLeft;
+      var targetWidth = target.offsetWidth;
+      var scrollLeft = targetOffsetLeft - (containerWidth - targetWidth) / 2;
+      container.scrollTo({
+        left: scrollLeft,
+        behavior: 'smooth'
+      });
+    }
+    if (hasChildren) {
+      // 有子选项的情况
+      if (isExpanded) {
+        // 如果已展开，则收起
+        closeExpandedOption();
+      } else {
+        // 如果未展开，则展开（同时收起其他选项）
+        setExpandedOption(option);
+      }
+    } else {
+      // 没有子选项的情况
+      closeExpandedOption();
+      if (filterValue[label]) {
+        // 如果已选中，则取消选中
+        removeValue(label);
+      } else {
+        updateValue(label, label);
+      }
+    }
+  };
+  var handleChildClick = function handleChildClick(label, child) {
+    updateValue(label, child.label);
+    closeExpandedOption();
+  };
+  var renderOption = function renderOption(option) {
+    var label = option.label;
+    var isExpanded = (expandedOption === null || expandedOption === void 0 ? void 0 : expandedOption.label) === label;
+    var isSelected = !!filterValue[label];
+    var hasChildren = option.children && option.children.length > 0;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: label,
+      className: "FilterOption",
+      "data-active": isSelected || isExpanded,
+      "data-expanded": isExpanded,
+      onClick: function onClick(e) {
+        return handleOptionClick(option, e);
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "FilterOption-label"
+    }, filterValue[label] || label), isSelected && !isExpanded ? /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      type: "close",
+      onClick: function onClick(e) {
+        removeValue(label);
+        e.stopPropagation();
+      }
+    }) : hasChildren ? /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      type: "chevron-down"
+    }) : null);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Filter', className),
+    "data-scrollable": scrollable,
+    "data-expanded": !!expandedOption,
+    "data-size": size,
+    ref: wrapper,
+    style: {
+      '--filter-child-count': itemsPerRow
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "FilterOptions",
+    ref: filterOptionsRef,
+    "data-scrollable": scrollable,
+    onScroll: checkMaskVisibility
+  }, options.map(renderOption)), scrollable && showMask && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Filter-mask"
+  }), expandedOption && /*#__PURE__*/_react.default.createElement(ChildOptions, {
+    value: filterValue,
+    option: expandedOption,
+    onClick: handleChildClick
+  }));
+};

package/lib/components/Flex/Flex.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type As<T = any> = React.ElementType<T>;
+export interface FlexProps extends React.HTMLAttributes<HTMLElement> {
+    as?: As;
+    className?: string;
+    center?: boolean;
+    inline?: boolean;
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+    justifyContent?: FlexProps['justify'];
+    align?: 'flex-start' | 'flex-end' | 'center';
+    alignItems?: FlexProps['align'];
+    children?: React.ReactNode;
+}
+export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLElement>>;

package/lib/components/Flex/Flex.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Flex = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["as", "className", "inline", "center", "direction", "wrap", "justifyContent", "justify", "alignItems", "align", "children"];
+var mapDirection = {
+  row: 'Flex--d-r',
+  'row-reverse': 'Flex--d-rr',
+  column: 'Flex--d-c',
+  'column-reverse': 'Flex--d-cr'
+};
+var mapWrap = {
+  nowrap: 'Flex--w-n',
+  wrap: 'Flex--w-w',
+  'wrap-reverse': 'Flex--w-wr'
+};
+var mapJustify = {
+  'flex-start': 'Flex--jc-fs',
+  'flex-end': 'Flex--jc-fe',
+  center: 'Flex--jc-c',
+  'space-between': 'Flex--jc-sb',
+  'space-around': 'Flex--jc-sa'
+};
+var mapAlign = {
+  'flex-start': 'Flex--ai-fs',
+  'flex-end': 'Flex--ai-fe',
+  center: 'Flex--ai-c'
+};
+var Flex = exports.Flex = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Element = _props$as === void 0 ? 'div' : _props$as,
+    className = props.className,
+    inline = props.inline,
+    center = props.center,
+    direction = props.direction,
+    wrap = props.wrap,
+    justifyContent = props.justifyContent,
+    _props$justify = props.justify,
+    justify = _props$justify === void 0 ? justifyContent : _props$justify,
+    alignItems = props.alignItems,
+    _props$align = props.align,
+    align = _props$align === void 0 ? alignItems : _props$align,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
+    className: (0, _clsx.default)('Flex', direction && mapDirection[direction], justify && mapJustify[justify], align && mapAlign[align], wrap && mapWrap[wrap], {
+      'Flex--inline': inline,
+      'Flex--center': center
+    }, className),
+    ref: ref
+  }, other), children);
+});

package/lib/components/Flex/FlexItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface FlexItemProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    flex?: string;
+    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    order?: number;
+}
+export declare const FlexItem: (props: FlexItemProps) => React.JSX.Element;