diginet-core-ui 1.4.39 → 1.4.40

package/components/button/index.js

@@ -1,444 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { CircularProgress, Icon, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbToHex, rgbaToHexA } from "../../styles/color-helper";
-import * as allColors from "../../styles/colors";
-import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius4px, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp } from "../../utils";
-import Ripple from "./ripple-effect";
-import useThemeProps from "../../theme/utils/useThemeProps";
-export const getRippleColor = (color, viewType, colors) => {
-  if (!isColor(color) && !isColorName(color)) {
-    let level = 3;
-    let name = color;
-    if (name === 'primary') {
-      name = 'formal';
-    }
-    const isSystemColor = colors[name + level];
-    if (isSystemColor) {
-      if (viewType === 'filled') {
-        level = 7;
-      }
-      return colors[name + level];
-    }
-  }
-  if (isColorName(color)) {
-    return fade(isColorName(color), 0.5);
-  }
-  const colorType = detectColor(color);
-  switch (colorType) {
-    case 'hex':
-    case 'hexa':
-      return rgbaToHexA(fade(color, 0.5));
-    case 'rgb':
-      return rgbToHex(fade(color, 0.5));
-    case 'rgba':
-      return rgbaToHexA(fade(color, 0.5));
-    case 'hsl':
-      return rgbToHex(hslToRgb(fade(color, 0.5)));
-    case 'hsla':
-      return rgbaToHexA(hslToRgb(fade(color, 0.5)));
-  }
-};
-const iconSizeMap = ({
-  spacing
-}) => new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
-const paddingSizeMap = new Map([['tiny', [1, 2]], ['small', [1.5, 3]], ['medium', [2, 4]], ['large', [2, 5]], ['giant', [2, 6]]]);
-const outlinedPaddingSizeMap = new Map([['tiny', [0.75, 1.75]], ['small', [1.25, 2.75]], ['medium', [1.75, 3.75]], ['large', [1.75, 4.75]], ['giant', [1.75, 5.75]]]);
-const iconMarginSizeMap = new Map([['tiny', [1]], ['small', [1]], ['medium', [1]], ['large', [1.5]], ['giant', [2]]]);
-const typographySizeMap = new Map([['tiny', 'h5'], ['small', 'h5'], ['medium', 'h4'], ['large', 'h2'], ['giant', 'h1']]);
-const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
-const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
-const alphaLoading = 0.2;
-const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  var _iconSizeMap;
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Button'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    color: colorProp,
-    disabled,
-    endIcon,
-    href,
-    id,
-    label: labelProp,
-    labelProps,
-    loading,
-    onClick,
-    size,
-    startIcon,
-    stopPropagation,
-    text,
-    type,
-    urlParams,
-    viewType,
-    ...other
-  } = props;
-  const label = labelProp || text || '';
-  const ref = useRef(null);
-  const rippleRef = useRef(null);
-  const url = useMemo(() => {
-    if (href) {
-      const qs = urlParams ? '?' + new URLSearchParams(urlParams).toString() : '';
-      return href + qs;
-    }
-  }, [href, urlParams]);
-  const isColorDefault = colorProp === 'default';
-  const isViewTypeLink = viewType === 'link';
-  const iconSize = (_iconSizeMap = iconSizeMap(theme)) === null || _iconSizeMap === void 0 ? void 0 : _iconSizeMap.get(size);
-  const paddingSize = isViewTypeLink ? 0 : viewType === 'outlined' ? outlinedPaddingSizeMap.get(size) : paddingSizeMap.get(size);
-  const typographySize = typographySizeMap.get(size);
-  const iconMarginSize = iconMarginSizeMap.get(size);
-  const minHeightSize = isViewTypeLink ? minHeightSizeLinkMap.get(size) : minHeightSizeMap.get(size);
-  const color = getProp(colors, colorProp, colorProp);
-  const TagName = href ? 'a' : 'button';
-  const _ButtonRootCSS = ButtonRootCSS(color, isColorDefault, viewType, loading, disabled, theme);
-  const _ButtonIconCSS = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize, theme);
-  const _NonStartIconCSS = NonStartIconCSS(iconSize, theme);
-  const _ButtonLabelCSS = ButtonLabelCSS(loading, iconMarginSize, theme);
-  const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, theme);
-  const _onClick = e => {
-    if (href) e.preventDefault(); //Prevent open link when click
-    onClick && stopPropagation && e.stopPropagation();
-    if (disabled || loading) return;
-    if (!isViewTypeLink) rippleRef.current.start(e);
-    onClick && onClick(e);
-  };
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const StartIcon = useMemo(() => {
-    if (!startIcon) return jsx("span", {
-      className: 'non-start-icon',
-      css: _NonStartIconCSS
-    });
-    let node = startIcon;
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: node,
-        width: iconSize,
-        height: iconSize,
-        color: 'currentColor',
-        viewBox: true
-      });
-      return jsx("span", {
-        css: _ButtonIconCSS,
-        className: 'DGN-UI-Button-Start-Icon'
-      }, node);
-    }
-    return jsx("span", {
-      css: _ButtonIconCSS,
-      className: 'DGN-UI-Button-Custom-Start-Icon'
-    }, node);
-  }, [startIcon, size]);
-  const EndIcon = useMemo(() => {
-    let node = endIcon;
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: node,
-        width: iconSize,
-        height: iconSize,
-        color: 'currentColor',
-        viewBox: true
-      });
-      return jsx("span", {
-        css: _ButtonIconCSS,
-        className: 'DGN-UI-Button-End-Icon'
-      }, node);
-    }
-    return jsx("span", {
-      css: _ButtonIconCSS,
-      className: 'DGN-UI-Button-Custom-End-Icon'
-    }, node);
-  }, [endIcon, size]);
-  const IconLoading = jsx(CircularProgress, {
-    className: 'DGN-UI-Button-Loading',
-    background: 'transparent',
-    color: 'currentColor',
-    size: parseInt(iconSize)
-  });
-  return useMemo(() => {
-    // 1. Có StartIcon => thay StartIcon
-    // 2. Có EndIcon => thay EndIcon
-    // 3. Có StartIcon + EndIcon => thay StartIcon
-    // 4. Không có Icon => hiện thêm icon loading ở đầu
-
-    let start = StartIcon;
-    let end = endIcon ? EndIcon : null;
-    if (loading) {
-      if (startIcon) start = IconLoading;
-      if (endIcon) end = IconLoading;
-      if (startIcon && endIcon) {
-        start = IconLoading;
-        end = EndIcon;
-      }
-      if (!startIcon && !endIcon) start = IconLoading;
-    }
-    return jsx(TagName, {
-      css: [_ButtonRootCSS, _ButtonSizeCSS],
-      ref: ref,
-      onClick: _onClick,
-      id: id,
-      type: type,
-      className: classNames('DGN-UI-Button', disabled && 'disabled', viewType, size, className),
-      href: url || null,
-      ...other
-    }, start, jsx(Typography, {
-      css: _ButtonLabelCSS,
-      type: typographySize,
-      className: classNames('DGN-UI-Button-Label', 'button-text'),
-      format: ['uppercase'],
-      ...labelProps
-    }, children || label), end, !disabled && !loading && !isViewTypeLink ? jsx(Ripple, {
-      ref: rippleRef,
-      color: getRippleColor(colorProp, viewType, allColors)
-    }) : null);
-  }, [children, className, colorProp, disabled, endIcon, href, id, labelProp, labelProps, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, theme]);
-}));
-const NonStartIconCSS = (iconSize, {
-  spacing
-}) => css`
-    margin: ${spacing([0])};
-    ${parseHeight(iconSize)};
-    ${parseMinWidth(0)};
-`;
-const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize, {
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${itemsCenter};
-    ${justifyCenter};
-    ${positionRelative};
-    ${boxBorder};
-    margin-right: ${spacing(endIcon || label ? iconMarginSize : 0)};
-    &.DGN-UI-Button-End-Icon,
-    &.DGN-UI-Button-Custom-End-Icon {
-        margin-right: unset;
-        margin-left: ${spacing(startIcon || label ? iconMarginSize : 0)};
-    }
-    &.DGN-UI-Button-Start-Icon,
-    &.DGN-UI-Button-End-Icon {
-        ${parseWidthHeight(iconSize)};
-    }
-`;
-const ButtonLabelCSS = (loading, iconMarginSize, {
-  spacing
-}) => css`
-    ${whiteSpaceNoWrap};
-    ${textColor('inherit')};
-    margin-left: ${spacing(loading ? iconMarginSize : 0)};
-`;
-const ButtonSizeCSS = (paddingSize, minHeightSize, {
-  spacing
-}) => css`
-    padding: ${spacing(paddingSize)};
-    ${parseMinWidthHeight('max-content', minHeightSize)};
-`;
-const ButtonRootCSS = (color, isColorDefault, viewType, loading, disabled, {
-  colors
-}) => css`
-    ${displayInlineFlex};
-    ${itemsCenter};
-    ${justifyCenter};
-    ${positionRelative};
-    ${borderRadius4px};
-    ${boxBorder};
-    ${cursorPointer};
-    ${overflowHidden};
-    ${outlineNone};
-    ${userSelectNone};
-    ${parseHeight('max-content')};
-    text-decoration: none;
-    ${disabled && css`
-        transition: all 0.5s;
-    `};
-    ${loading && pointerEventsNone};
-    ${viewType === 'outlined' && css`
-        ${textColor(color)};
-        ${border(1, color)};
-        ${bgColor('transparent')};
-        ${loading && bgColor(hexToRGBA(color, alphaLoading))};
-        ${Object.keys(alphaPseudo).map(key => css`
-                    &: ${key} {
-                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
-                    }
-                `)}
-        ${isColorDefault && css`
-            ${border(1, getProp(colors, 'system/rest'))};
-            ${textColor(getProp(colors, 'system/rest'))};
-            ${loading && css`
-                ${textColor(getProp(colors, 'system/active'))};
-                ${borderColor(getProp(colors, 'system/active'))};
-                ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaLoading))};
-            `}
-            ${Object.keys(alphaPseudo).map(key => css`
-                        &: ${key} {
-                            ${textColor(getProp(colors, 'system/active'))};
-                            ${borderColor(getProp(colors, 'system/active'))};
-                            ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaPseudo[key]))};
-                        }
-                    `)} // &:hover | &:focus | &:active
-        `}
-        &.disabled {
-            ${borderColor(getProp(colors, 'system/disabled'))};
-            ${bgColor('transparent')};
-        }
-    `}
-    ${viewType === 'filled' && css`
-        ${borderNone};
-        ${textColor(getProp(colors, 'system/standard'))};
-        ${bgColor(color)};
-        font-weight: bold;
-        ${loading && css`
-            filter: brightness(0.85);
-        `}
-        &:hover,
-        &:focus {
-            filter: brightness(0.85);
-        }
-        &:active {
-            filter: brightness(0.7);
-        }
-        ${isColorDefault && css`
-            ${bgColor(getProp(colors, 'system/rest'))};
-            ${loading && bgColor(getProp(colors, 'system/active'))};
-            &:hover,
-            &:focus,
-            &:active {
-                ${bgColor(getProp(colors, 'system/active'))};
-            }
-        `}
-        &.disabled {
-            ${bgColor(getProp(colors, 'fill/disabled'))};
-        }
-    `}
-    ${viewType === 'text' && css`
-        ${bgColor('transparent')};
-        ${borderNone};
-        ${textColor(color)};
-        ${loading && bgColor(hexToRGBA(color, alphaLoading))};
-        ${Object.keys(alphaPseudo).map(key => css`
-                    &: ${key} {
-                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
-                    }
-                `)}
-        ${isColorDefault && css`
-            ${textColor(getProp(colors, 'system/rest'))};
-            ${loading && css`
-                ${textColor(getProp(colors, 'system/active'))};
-                ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaLoading))};
-            `}
-            ${Object.keys(alphaPseudo).map(key => css`
-                        &: ${key} {
-                            ${textColor(getProp(colors, 'system/active'))};
-                            ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaPseudo[key]))};
-                        }
-                    `)}
-        `}
-        &.disabled {
-            ${bgColor('transparent')};
-        }
-    `}
-    ${viewType === 'link' && css`
-        ${borderNone};
-        ${textColor(isColorDefault ? getProp(colors, 'semantic/info') : color)};
-        ${bgColor('transparent')};
-        ${loading && css`
-            filter: brightness(0.85);
-        `}
-        &:hover,
-        &:focus {
-            filter: brightness(0.85);
-        }
-        &:active {
-            filter: brightness(0.7);
-        }
-    `}
-    &.disabled {
-        ${cursorNotAllowed};
-        ${textColor(getProp(colors, 'system/disabled'))};
-        filter: brightness(1);
-    }
-`;
-
-// Button.defaultProps = {
-//     className: '',
-//     color: 'default',
-//     disabled: false,
-//     label: '',
-//     loading: false,
-//     size: 'medium',
-//     stopPropagation: true,
-//     viewType: 'text',
-// };
-
-Button.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.string,
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed after the children. */
-  endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. */
-  href: PropTypes.string,
-  /** The content of the component. */
-  label: PropTypes.string,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography--title) applied to the `Typography` label. */
-  labelProps: PropTypes.object,
-  /** If `true`, the loading indicator is shown. */
-  loading: PropTypes.bool,
-  /** Callback fired when the component is clicked. */
-  onClick: PropTypes.func,
-  /** The size of the component. */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the children. */
-  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** Query params pass to url. */
-  urlParams: PropTypes.object,
-  /** The variant to use. */
-  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link'])
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-};
-export { Button };
-export default OptionWrapper(Button);

package/components/button/more.js

@@ -1,210 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, itemsCenter, outlineNone, parseHeight } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const ButtonMore = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'ButtonMore'
-  });
-  const {
-    action = {},
-    anchor: anchorProp,
-    buttonProps,
-    className,
-    disabled,
-    id,
-    labelProp,
-    options,
-    optionType,
-    popoverProp,
-    style
-  } = props;
-  const isOptionFull = optionType === 'full';
-  let anchor = anchorProp;
-  const ref = useRef(null);
-  const [openState, setOpenState] = useState(false);
-  const [iconState, setIconState] = useState(false);
-  const _OptionFullCSS = OptionFullCSS(theme);
-  const _PopoverCSS = PopoverCSS(isOptionFull, theme);
-  const openPopover = () => {
-    setOpenState(true);
-  };
-  const closePopover = () => {
-    setOpenState(false);
-  };
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const renderOptions = () => {
-    return options.map((item, idx) => {
-      if (item !== null && item !== void 0 && item.hidden) return null;else if (/*#__PURE__*/isValidElement(item)) return item;else {
-        const icon = item === null || item === void 0 ? void 0 : item.icon;
-        const label = item === null || item === void 0 ? void 0 : item.label;
-        const action = () => {
-          closePopover();
-          if (typeof (item === null || item === void 0 ? void 0 : item.action) === 'function') item === null || item === void 0 ? void 0 : item.action();
-        };
-        if (icon && !iconState) setIconState(true);
-        return isOptionFull ? jsx("button", {
-          key: idx,
-          css: _OptionFullCSS,
-          className: 'DGN-UI-ButtonMore-Option',
-          onClick: action
-        }, icon ? jsx(Icon, {
-          className: 'DGN-UI-ButtonMore-Option-Icon',
-          name: icon,
-          width: 20,
-          height: 20,
-          color: 'system/on-standard'
-        }) : null, jsx(Typography, {
-          css: !icon && iconState && ExtraPaddingCSS(theme),
-          className: 'DGN-UI-ButtonMore-Label',
-          ...labelProp
-        }, label)) : jsx(Tooltip, {
-          key: idx,
-          className: 'DGN-UI-ButtonMore-Option',
-          title: label
-        }, jsx(ButtonIcon, {
-          circular: true,
-          name: icon,
-          onClick: action,
-          viewType: 'text'
-        }));
-      }
-    });
-  };
-  const renderAnchor = () => {
-    var _anchor, _anchor2, _anchor2$props;
-    if (!((_anchor = anchor) !== null && _anchor !== void 0 && _anchor.type)) return null;
-    const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
-      ref: ref => {
-        anchor = ref;
-      },
-      onClick: openPopover,
-      id: id,
-      style: {
-        ...style,
-        ...(((_anchor2 = anchor) === null || _anchor2 === void 0 ? void 0 : (_anchor2$props = _anchor2.props) === null || _anchor2$props === void 0 ? void 0 : _anchor2$props.style) || {})
-      },
-      className: classNames('DGN-UI-ButtonMore', className)
-    });
-    return AnchorTag;
-  };
-  return useMemo(() => {
-    return jsx(Popover, {
-      css: _PopoverCSS,
-      open: openState,
-      onClose: closePopover,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      anchor: anchor ? renderAnchor() : jsx(ButtonIcon, {
-        ref: ref,
-        circular: true,
-        name: 'more',
-        viewType: 'text',
-        id: id,
-        style: style,
-        className: classNames('DGN-UI-ButtonMore', className),
-        disabled: disabled,
-        onClick: openPopover,
-        ...buttonProps
-      }),
-      ...popoverProp
-    }, renderOptions());
-  }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState, theme]);
-}));
-const PopoverCSS = (isOptionFull, {
-  spacing
-}) => css`
-    ${displayFlex};
-    ${isOptionFull ? flexCol : flexRow};
-    padding: ${spacing(isOptionFull ? [1, 0] : [0, 2])};
-`;
-const OptionFullCSS = ({
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${itemsCenter};
-    ${cursorPointer};
-    ${outlineNone};
-    ${borderNone}
-    ${parseHeight(28)};
-    padding: ${spacing([0, 4])};
-    gap: ${spacing([0, 1])};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    transition: all 0.5s ease;
-    &:hover,
-    &:focus {
-        ${bgColor(getProp(colors, 'fill/hover'))};
-    }
-    &:active {
-        ${bgColor(getProp(colors, 'fill/pressed'))};
-    }
-`;
-const ExtraPaddingCSS = ({
-  spacing
-}) => css`
-    padding-left: ${spacing([6])};
-`;
-
-// ButtonMore.defaultProps = {
-//     buttonProps: {},
-//     className: '',
-//     disabled: false,
-//     options: [],
-//     optionType: 'full',
-//     style: {},
-// };
-
-ButtonMore.propTypes = {
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-buttonicon) applied to the main `ButtonIcon`. */
-  buttonProps: PropTypes.object,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography) applied to the `Typography` label. */
-  labelProp: PropTypes.object,
-  /** Option(s) in popover. */
-  option: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    icon: PropTypes.string,
-    action: PropTypes.func,
-    hidden: PropTypes.bool
-  })),
-  /** The variant of option's type. */
-  optionType: PropTypes.oneOf(['full', 'icon']),
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
-  popoverProp: PropTypes.object,
-  /** Style inline of component. */
-  style: PropTypes.object
-};
-export { ButtonMore };
-export default OptionWrapper(ButtonMore);