diginet-core-ui 1.4.39 → 1.4.40

package/components/tab/tab-container.js

@@ -1,100 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { displayFlex, flexCol, flexRow, parseWidth, positionRelative, typographyTypes } from "../../styles/general";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames } from "../../utils";
-import TabContext from "./context";
-const typographyByLevelMap = new Map([['level1', 'h3'], ['level2', 'p1']]);
-const TabContainer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'TabContainer'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    direction,
-    level: levelProp,
-    onChange,
-    style,
-    tabIndex,
-    width,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const {
-    value
-  } = other;
-  const [tabIndexState, setTabIndexState] = useState(tabIndex || value);
-  const level = typographyByLevelMap.get(levelProp) || levelProp;
-  const _TabContainerCSS = TabContainerCSS(direction, width);
-  useEffect(() => {
-    if (typeof value === 'number') setTabIndexState(value);else setTabIndexState(tabIndex);
-  }, [value, tabIndex]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return jsx("div", {
-    css: _TabContainerCSS,
-    ref: ref,
-    className: classNames('DGN-UI-Tab-Container', className),
-    style: style,
-    ...other
-  }, jsx(TabContext.Provider, {
-    value: {
-      tabIndexState,
-      setTabIndexState,
-      direction,
-      onChange
-    }
-  }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
-    level
-  }))));
-}));
-const TabContainerCSS = (direction, width) => css`
-    ${displayFlex};
-    ${direction === 'vertical' ? flexRow : flexCol};
-    ${positionRelative};
-    ${parseWidth(width)};
-`;
-
-// TabContainer.defaultProps = {
-//     className: '',
-//     direction: 'horizontal',
-//     level: 'level1',
-//     style: {},
-//     tabIndex: 0,
-//     width: '100%',
-// };
-
-TabContainer.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** CSS class for the component. */
-  className: PropTypes.string,
-  /** The direction that changes the position of the tabs. */
-  direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  /** The level that changes the typography size of the tabs (typesTypography represents the available typography types, e.g., h1, h2, h3, p1, etc.). */
-  level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2', ...typographyTypes])]),
-  /** Inline style object for the component. */
-  style: PropTypes.object,
-  /** The value of the currently selected tab. */
-  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-export default TabContainer;

package/components/tab/tab-header.js

@@ -1,160 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon } from "./..";
-import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useContext, useImperativeHandle, useRef, useState } from 'react';
-import { boxBorder, displayFlex, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseMaxWidth, parseWidth, parseWidthHeight, positionRelative, selfCenter, whiteSpaceNoWrap } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames } from "../../utils";
-import TabContext from "./context";
-const TabHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  var _ref$current, _ref$current2;
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'TabHeader'
-  });
-  const {
-    action = {},
-    centered,
-    children,
-    className,
-    level,
-    scrollButtons,
-    style,
-    width,
-    ...other
-  } = props;
-  const {
-    direction
-  } = useContext(TabContext);
-  const theme = useTheme();
-  const ref = useRef(null);
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const isVertical = direction === 'vertical';
-  let showScrollLeftButton = !isVertical && scrollLeft > 0;
-  let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
-  const _ContainerCSS = ContainerCSS(centered, isVertical, width, theme);
-  const ScrollLeftButtonCSS = ScrollButtonCSS(true, showScrollLeftButton, showScrollRightButton, theme);
-  const ScrollRightButtonCSS = ScrollButtonCSS(false, showScrollLeftButton, showScrollRightButton, theme);
-  const _TabHeaderHorizontalCSS = TabHeaderHorizontalCSS(theme);
-  const _onClickScrollButton = scrollPrevious => {
-    let scrollValue = scrollPrevious ? ref.current.scrollLeft - (ref.current.offsetWidth + 30) : ref.current.scrollLeft + (ref.current.offsetWidth + 30);
-    ref.current.scrollLeft = scrollValue;
-    setScrollLeft(scrollValue);
-  };
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return jsx("div", {
-    css: _ContainerCSS,
-    className: classNames('DGN-UI-Tab-Header-Container', className),
-    style: style,
-    ...other
-  }, scrollButtons && !isVertical ? jsx(ButtonIcon, {
-    css: ScrollLeftButtonCSS,
-    name: isVertical ? 'ArrowUp' : 'ArrowLeft',
-    viewType: 'text',
-    size: 'tiny',
-    viewBox: true,
-    disabled: !showScrollLeftButton,
-    onClick: () => _onClickScrollButton(true)
-  }) : null, jsx("div", {
-    css: [TabHeaderCSS, !isVertical && _TabHeaderHorizontalCSS],
-    className: 'DGN-UI-Tab-Header',
-    ref: ref,
-    onScroll: e => {
-      var _e$target;
-      return scrollButtons && setScrollLeft((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollLeft) || 0);
-    }
-  }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
-    level
-  }))), scrollButtons && !isVertical ? jsx(ButtonIcon, {
-    css: ScrollRightButtonCSS,
-    name: isVertical ? 'ArrowDown' : 'ArrowRight',
-    viewType: 'text',
-    size: 'tiny',
-    viewBox: true,
-    disabled: !showScrollRightButton,
-    onClick: () => _onClickScrollButton(false)
-  }) : null);
-}));
-const ContainerCSS = (centered, isVertical, width, {
-  spacing
-}) => css`
-    ${displayFlex};
-    ${overflowHidden};
-    ${positionRelative};
-    ${boxBorder};
-    ${parseWidthHeight(width, 'auto')};
-    ${parseMaxWidth(isVertical ? 'max-content' : '100%')};
-    ${centered && justifyCenter};
-    ${isVertical ? flexCol : flexRow};
-    padding: ${spacing([0])};
-`;
-const TabHeaderCSS = css`
-    ${displayFlex};
-    ${flexCol};
-    ${parseWidth('100%')};
-`;
-const TabHeaderHorizontalCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${whiteSpaceNoWrap};
-    margin: ${spacing([0])};
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    scroll-snap-type: x mandatory;
-    scroll-padding: 50%;
-    transition: 0.3s ease-in-out 0.3s;
-    &::-webkit-scrollbar {
-        ${displayNone};
-    }
-`;
-const ScrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton, {
-  spacing
-}) => css`
-    ${parseWidthHeight(24, 24)};
-    ${selfCenter};
-    margin: ${spacing(scrollPrevious ? [0, 2, 0, 0] : [0, 0, 0, 2])};
-    overflow: initial;
-    opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
-`;
-
-// TabHeader.defaultProps = {
-//     centered: false,
-//     className: '',
-//     scrollButtons: false,
-//     style: {},
-//     width: '100%',
-// };
-
-TabHeader.propTypes = {
-  /** If `true`, the tabs are centered. */
-  centered: PropTypes.bool,
-  /** Elements to display in the Tab header. */
-  children: PropTypes.array,
-  /** CSS class for the component. */
-  className: PropTypes.string,
-  /** If `true`, displays scroll buttons. */
-  scrollButtons: PropTypes.bool,
-  /** Inline style object for the component. */
-  style: PropTypes.object,
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-export default TabHeader;

package/components/tab/tab-panel.js

@@ -1,91 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { boxBorder, displayFlex, displayNone, flexCol, parseWidthHeight, positionRelative, textColor } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-import TabContext from "./context";
-const TabPanel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'TabPanel'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    index,
-    lazyLoading,
-    style,
-    ...other
-  } = props;
-  const {
-    tabIndexState,
-    direction
-  } = useContext(TabContext);
-  const [isRendered, setIsRendered] = useState(false);
-  const ref = useRef(null);
-  const theme = useTheme();
-  const isVertical = direction === 'vertical';
-  const isSelected = index === tabIndexState;
-  const _TabPanelCSS = TabPanelCSS(isVertical, isSelected, theme);
-  useEffect(() => {
-    if (isRendered) return;else if (index === tabIndexState) setIsRendered(true);
-  }, [tabIndexState]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return jsx("div", {
-    css: _TabPanelCSS,
-    ref: ref,
-    className: classNames('DGN-UI-Tab-Panel', className),
-    style: style,
-    ...other
-  }, isSelected || !lazyLoading || isRendered ? children : null);
-}));
-const TabPanelCSS = (isVertical, isSelected, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexCol};
-    ${boxBorder};
-    ${positionRelative};
-    ${isSelected ? flexCol : displayNone};
-    ${parseWidthHeight('100%', isVertical ? 300 : '100%')};
-    ${textColor(getProp(colors, 'text/main'))};
-    padding: ${spacing([0, isVertical ? 3 : 2.5])};
-`;
-
-// TabPanel.defaultProps = {
-//     className: '',
-//     lazyLoading: false,
-//     style: {},
-// };
-
-TabPanel.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** CSS class for the component. */
-  className: PropTypes.string,
-  /** The index corresponding to the position of the TabHeaderButton. */
-  index: PropTypes.number,
-  /** Enables lazy loading mode. */
-  lazyLoading: PropTypes.bool,
-  /** Inline style object for the component. */
-  style: PropTypes.object
-};
-export default TabPanel;

package/components/tab/tab.js

@@ -1,210 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Icon, Typography } from "./..";
-import Ripple from "../button/ripple-effect";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useContext, useImperativeHandle, useRef } from 'react';
-import { bgColor, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, left, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, scale, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-import TabContext from "./context";
-const TabItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'TabItem'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    color: colorProp,
-    disabled,
-    endIcon,
-    index,
-    label,
-    labelProps,
-    level,
-    onClick,
-    startIcon,
-    style,
-    ...other
-  } = props;
-  const {
-    tabIndexState,
-    setTabIndexState,
-    direction,
-    onChange
-  } = useContext(TabContext);
-  const ref = useRef(null);
-  const rippleRef = useRef(null);
-  const isVertical = direction === 'vertical';
-  const theme = useTheme();
-  const color = getProp(theme.colors, colorProp, colorProp);
-  const _TabItemCSS = TabItemCSS(color, isVertical, theme);
-  const _IndicatorCSS = IndicatorCSS(isVertical);
-  const _TabItemDisabledCSS = TabItemDisabledCSS(theme);
-  const _TabItemSelectedCSS = TabItemSelectedCSS(theme);
-  const _IconCSS = IconCSS(theme);
-  const _onClick = e => {
-    if (disabled) return;
-    rippleRef.current.start(e);
-    onClick ? onClick(e, index) : setTabIndexState(index);
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, index);
-  };
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const renderIcon = (icon, isEndIcon) => {
-    let node = icon;
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        color: 'currentColor',
-        name: icon
-      });
-    }
-    return jsx("span", {
-      css: [_IconCSS, isEndIcon && EndIconCSS(theme)]
-    }, node);
-  };
-  return jsx("div", {
-    css: [_TabItemCSS, disabled && _TabItemDisabledCSS, index === tabIndexState && !disabled && _TabItemSelectedCSS],
-    ref: ref,
-    className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
-    style: style,
-    onClick: _onClick,
-    ...other
-  }, startIcon && renderIcon(startIcon), jsx(Typography, {
-    type: level,
-    color: 'inherit',
-    lineClamp: 1,
-    hoverTooltip: true,
-    ...labelProps
-  }, label), children, endIcon && renderIcon(endIcon, true), jsx(Ripple, {
-    ref: rippleRef,
-    css: pointerEventsNone
-  }), jsx("span", {
-    css: _IndicatorCSS,
-    className: 'Indicator'
-  }));
-}));
-const TabItemCSS = (color, isVertical, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${overflowHidden};
-    ${itemsCenter};
-    ${isVertical ? justifyStart : justifyCenter};
-    ${boxBorder};
-    ${cursorPointer};
-    ${positionRelative};
-    ${outlineNone};
-    ${breakWord};
-    ${whiteSpaceNoWrap};
-    ${shadowNone};
-    ${!isVertical && textCenter};
-    ${textColor(color)};
-    ${parseMinWidth(80)};
-    ${parseMaxWidth(isVertical ? '100%' : 287)};
-    padding: ${spacing(isVertical ? [3.5, 4] : [2, 4])};
-    ${pointerEventsAuto};
-    ${userSelectNone};
-    flex: 0 0 auto;
-    transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
-    :hover:not(.selected):not(.disabled),
-    :focus {
-        ${textColor('system/rest')};
-        .Indicator {
-            ${bgColor(getProp(colors, 'system/rest'))};
-            ${scale(1)};
-        }
-    }
-`;
-const TabItemDisabledCSS = theme => css`
-    ${pointerEventsNone};
-    ${cursorDefault};
-    ${bgColor('transparent')};
-    ${textColor(getProp(theme.colors, 'system/disabled'))};
-`;
-const TabItemSelectedCSS = theme => css`
-    ${textColor(getProp(theme.colors, 'system/active'))};
-    .Indicator {
-        ${bgColor(getProp(theme.colors, 'system/active'))};
-        ${scale(1)};
-    }
-`;
-const IndicatorCSS = isVertical => css`
-    ${positionAbsolute};
-    ${parseHeight(isVertical ? '100%' : 4)};
-    ${parseWidth(isVertical ? 4 : '100%')}
-    ${borderRadius(1)};
-    ${bottom(0)};
-    ${left(0)};
-    transform: ${isVertical ? 'scaleY(0)' : 'scaleX(0)'};
-    transition: transform 0.2s ease-in-out;
-`;
-const IconCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${itemsCenter};
-    ${justifyCenter};
-    ${positionRelative};
-    ${boxBorder};
-    ${parseMaxWidthHeight(24)};
-    margin-right: ${spacing([1])};
-`;
-const EndIconCSS = ({
-  spacing
-}) => css`
-    margin-right: unset;
-    margin-left: ${spacing([1])};
-`;
-
-// TabItem.defaultProps = {
-//     className: '',
-//     color: 'system/rest',
-//     disabled: false,
-//     label: '',
-//     style: {},
-// };
-
-TabItem.propTypes = {
-  /** Content to display in the Tabs (like a label). */
-  children: PropTypes.node,
-  /** CSS class for the component. */
-  className: PropTypes.string,
-  /** Color for the Tabs. */
-  color: PropTypes.string,
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** Icon to display on the right side of the button. */
-  endIcon: PropTypes.node,
-  /** Index corresponding to the position of the TabHeaderButton. */
-  index: PropTypes.number,
-  /** The content of the component. */
-  label: PropTypes.string,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
-  labelProps: PropTypes.object,
-  /** Callback function fired when a "click" event is detected. */
-  onClick: PropTypes.func,
-  /** Icon to display on the left side of the button. */
-  startIcon: PropTypes.node,
-  /** Inline style object for the component. */
-  style: PropTypes.object
-};
-export default TabItem;