@retailmenot/anchor/esm/tabs.js

A React UI Library by RetailMeNot

import { a as _taggedTemplateLiteral, c as _slicedToArray } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { a as cloneWithProps } from './anchor-chunk-20e4020f.js';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css, ThemeContext } from '@xstyled/styled-components';
import { th, variant, space } from '@xstyled/system';

var TabVariants = {
  tabular: {
    base: css({}),
    header: function header(_ref) {
      var position = _ref.position;
      return css({
        position: 'relative',
        right: position === 'left' ? '-1px' : undefined,
        left: position === 'right' ? '-1px' : undefined,
        bottom: position === 'top' ? '-1px' : undefined,
        top: position === 'bottom' ? '-1px' : undefined
      });
    },
    tab: {
      activeBorderColor: 'transparent',
      spacing: '0.25rem',
      styles: function styles(_ref2) {
        var active = _ref2.active;
        return css({
          border: 'light',
          padding: '0.75rem 1rem',
          background: active ? 'white' : th.color('background.base'),
          fontWeight: active ? 500 : undefined
        });
      }
    },
    pane: css({})
  },
  regular: {
    base: css({
      border: 'light'
    }),
    header: function header(_ref3) {
      var position = _ref3.position;
      return css({
        padding: ['left', 'right'].includes(position) ? '1rem 0' : '0 1rem',
        background: th.color('white')
      });
    },
    tab: {
      activeBorderColor: 'primary.base',
      spacing: '2rem',
      styles: function styles(_ref4) {
        var position = _ref4.position,
            active = _ref4.active;
        return css({
          border: 'solid transparent',
          padding: ['left', 'right'].includes(position) ? '0.625rem' : '0.625rem 0',
          borderWidth: ['left', 'right'].includes(position) ? '0 3px' : '3px 0',
          fontWeight: active ? 600 : undefined,
          color: active ? undefined : 'text.label'
        });
      }
    },
    pane: css({})
  }
};
var variantStyles = variant({
  key: 'tabs.variants',
  prop: 'variant',
  "default": 'regular',
  variants: TabVariants
});

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    cursor: pointer;\n    user-select: none;\n    position: relative;\n\n    transition: 250ms ease background, 250ms ease color, 125ms ease border-color;\n\n    &.disabled {\n        color: text.disabled;\n        cursor: not-allowed;\n    }\n\n    ", "\n    ", "\n    ", "\n\n    ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var StyledTab = styled('div')(_templateObject(), function (_ref) {
  var tabTheme = _ref.tabTheme;
  return tabTheme.styles;
}, space, function (_ref2) {
  var background = _ref2.background,
      active = _ref2.active,
      _ref2$borderRadius = _ref2.borderRadius,
      borderRadius = _ref2$borderRadius === void 0 ? 'base' : _ref2$borderRadius;
  return css({
    color: active ? 'primary.base' : undefined,
    background: th.color(background),
    borderRadius: borderRadius
  });
}, function (_ref3) {
  var tabTheme = _ref3.tabTheme,
      active = _ref3.active,
      _ref3$activeBorder = _ref3.activeBorder,
      activeBorder = _ref3$activeBorder === void 0 ? tabTheme.activeBorder : _ref3$activeBorder,
      _ref3$activeBorderCol = _ref3.activeBorderColor,
      activeBorderColor = _ref3$activeBorderCol === void 0 ? tabTheme.activeBorderColor : _ref3$activeBorderCol,
      _ref3$spacing = _ref3.spacing,
      spacing = _ref3$spacing === void 0 ? tabTheme.spacing : _ref3$spacing,
      _ref3$position = _ref3.position,
      position = _ref3$position === void 0 ? 'top' : _ref3$position;
  return {
    left: css({
      borderRight: active ? activeBorder : undefined,
      borderRightColor: active ? activeBorderColor : undefined,
      marginBottom: spacing,
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0,
      textAlign: 'right',
      justifyContent: 'flex-end',
      '&:last-of-type': {
        marginBottom: 0
      }
    }),
    top: css({
      borderBottom: active ? activeBorder : undefined,
      borderBottomColor: active ? activeBorderColor : undefined,
      marginRight: spacing,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      '&:last-of-type': {
        marginRight: 0
      }
    }),
    bottom: css({
      borderTop: active ? activeBorder : undefined,
      borderTopColor: active ? activeBorderColor : undefined,
      marginRight: spacing,
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      '&:last-of-type': {
        marginRight: 0
      }
    }),
    right: css({
      borderLeft: active ? activeBorder : undefined,
      borderLeftColor: active ? activeBorderColor : undefined,
      marginBottom: spacing,
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
      textAlign: 'left',
      '&:last-of-type': {
        marginBottom: 0
      }
    })
  }[position];
});
var Tab = function Tab(_a) {
  var className = _a.className,
      _a$position = _a.position,
      position = _a$position === void 0 ? 'top' : _a$position,
      onClick = _a.onClick,
      disabled = _a.disabled,
      active = _a.active,
      props = __rest(_a, ["className", "position", "onClick", "disabled", "active"]);

  var theme = useContext(ThemeContext);
  var tabTheme = variantStyles(Object.assign(Object.assign({}, props), {
    theme: theme
  })).tab || {};
  return createElement(StyledTab, Object.assign({
    className: classNames('anchor-tabs-header-item', className, active && 'active', disabled && 'disabled'),
    disabled: disabled,
    position: position,
    onClick: !disabled ? onClick : undefined,
    active: active,
    tabTheme: tabTheme
  }, props));
};

function _templateObject$1() {
  var data = _taggedTemplateLiteral(["\n    flex-grow: 1;\n    ", "\n    ", "\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledPane = styled('div')(_templateObject$1(), space, function (_ref) {
  var active = _ref.active,
      _ref$background = _ref.background,
      background = _ref$background === void 0 ? 'white' : _ref$background,
      border = _ref.border;
  return css({
    display: active ? 'block' : 'none',
    border: border,
    background: th.color(background)
  });
});
var Pane = function Pane(_a) {
  var className = _a.className,
      children = _a.children,
      _a$padding = _a.padding,
      padding = _a$padding === void 0 ? '2rem' : _a$padding,
      _a$active = _a.active,
      active = _a$active === void 0 ? false : _a$active,
      props = __rest(_a, ["className", "children", "padding", "active"]);

  return createElement(StyledPane, Object.assign({
    className: classNames('anchor-tabs-pane', className),
    active: active,
    padding: padding
  }, props), children);
};

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    white-space: nowrap;\n\n    ", "\n\n    ", "\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$2() {
  var data = _taggedTemplateLiteral(["\n    ", "\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}
var TabHeaderWrapper = styled('div')(_templateObject$2(), function (_ref) {
  var position = _ref.position;
  return css({
    borderBottom: position === 'top' ? 'light' : undefined,
    borderTop: position === 'bottom' ? 'light' : undefined,
    borderLeft: position === 'right' ? 'light' : undefined,
    borderRight: position === 'left' ? 'light' : undefined
  });
});
var TabHeader = styled('div')(_templateObject2(), function (_ref2) {
  var position = _ref2.position;
  return {
    left: css({
      flexDirection: 'column'
    }),
    top: css({
      flexDirection: 'row',
      overflowX: 'auto'
    }),
    bottom: css({
      flexDirection: 'row',
      overflowX: 'auto'
    }),
    right: css({
      flexDirection: 'column'
    })
  }[position || 'top'];
}, function (props) {
  return variantStyles(props).header;
});
var StyledTabs = styled('div')(_templateObject3(), space, function (_ref3) {
  var position = _ref3.position;
  return {
    left: css({
      flexDirection: 'row'
    }),
    top: css({
      flexDirection: 'column'
    }),
    bottom: css({
      flexDirection: 'column-reverse'
    }),
    right: css({
      flexDirection: 'row-reverse'
    })
  }[position || 'top'];
}, function (props) {
  return variantStyles(props).base;
}, function (_ref4) {
  var background = _ref4.background;
  return css({
    background: th.color(background)
  });
});
var Tabs = function Tabs(_a) {
  var className = _a.className,
      children = _a.children,
      _a$position = _a.position,
      position = _a$position === void 0 ? 'top' : _a$position,
      _a$variant = _a.variant,
      variant$$1 = _a$variant === void 0 ? 'regular' : _a$variant,
      activeKey = _a.activeKey,
      defaultActiveKey = _a.defaultActiveKey,
      spacing = _a.spacing,
      onChange = _a.onChange,
      props = __rest(_a, ["className", "children", "position", "variant", "activeKey", "defaultActiveKey", "spacing", "onChange"]);

  var tabInfo = [];
  Children.forEach(children, function (child, index) {
    if (!child || !isValidElement(child)) {
      return;
    }

    var _child$props = child.props,
        title = _child$props.title,
        disabled = _child$props.disabled;
    tabInfo.push({
      title: title,
      key: child.key || index,
      disabled: disabled
    });
  });
  var initialTab = defaultActiveKey || defaultActiveKey === 0 ? defaultActiveKey : tabInfo[0] && tabInfo[0].key;

  var _React$useState = useState(initialTab),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      stateCurrent = _React$useState2[0],
      setCurrent = _React$useState2[1];

  var current = activeKey || activeKey === 0 ? activeKey : stateCurrent;
  tabInfo = tabInfo.map(function (info) {
    return Object.assign(Object.assign({}, info), {
      active: info.key === current
    });
  });
  return createElement(StyledTabs, Object.assign({
    className: classNames('anchor-tabs', className),
    position: position,
    variant: variant$$1
  }, props), createElement(TabHeaderWrapper, {
    variant: variant$$1,
    position: position
  }, createElement(TabHeader, {
    className: "anchor-tabs-header",
    position: position,
    variant: variant$$1
  }, tabInfo.map(function (_ref5) {
    var title = _ref5.title,
        key = _ref5.key,
        disabled = _ref5.disabled,
        active = _ref5.active;
    return createElement(Tab, {
      key: key,
      position: position,
      disabled: disabled,
      active: active,
      variant: variant$$1,
      onClick: function onClick() {
        setCurrent(key);

        if (onChange) {
          onChange(key);
        }
      },
      spacing: spacing
    }, title);
  }))), Children.map(children, function (child, index) {
    return cloneWithProps(child, {
      active: tabInfo[index].active,
      className: ['anchor-tabs-panel', tabInfo[index].active && 'active']
    });
  }));
};
Tabs.Pane = Pane;

export { Tabs };
//# sourceMappingURL=tabs.js.map