@retailmenot/anchor/esm/list.js

A React UI Library by RetailMeNot

import { a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.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 } from '@xstyled/styled-components';
import { th, space } from '@xstyled/system';
import { a as Typography } from './anchor-chunk-5b0bbe0b.js';
import './anchor-chunk-cd7ef49a.js';

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    align-content: space-between;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n\n    .item-prefix {\n        display: flex;\n        align-items: center;\n        flex: 0 0 0;\n    }\n    .item-main {\n        display: flex;\n        align-items: center;\n        flex: 4 1 auto;\n    }\n    .item-suffix {\n        display: flex;\n        align-items: center;\n        flex: 0 0 0;\n        text-align: right;\n        justify-content: flex-end;\n    }\n    &.lg {\n        font-size: 1rem;\n        font-weight: 400;\n    }\n    &.sm {\n        font-size: 0.875rem;\n        font-weight: 500;\n    }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    display: flex;\n    border-radius: base;\n    padding: 0.5rem 1rem;\n    cursor: pointer;\n    transition: background 500ms;\n    ", "\n    text-decoration: none;\n    min-height: 2.75rem;\n\n    &:hover {\n        background: ", ";\n    }\n\n    &.active {\n        background: ", ";\n    }\n    ", "\n"]);

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

  return data;
}
var StyledItem = styled('a')(_templateObject(), function (_ref) {
  var _ref$background = _ref.background,
      background = _ref$background === void 0 ? 'white' : _ref$background;
  return css({
    background: th.color(background)
  });
}, th.color('background.light'), th.color('background.base'), space);
var StyledTypography = styled(Typography)(_templateObject2());
var Item = function Item(_a) {
  var className = _a.className,
      children = _a.children,
      _a$onSelect = _a.onSelect,
      onSelect = _a$onSelect === void 0 ? function () {
    return null;
  } : _a$onSelect,
      _a$onMouseOver = _a.onMouseOver,
      onMouseOver = _a$onMouseOver === void 0 ? function () {
    return null;
  } : _a$onMouseOver,
      _a$onMouseOut = _a.onMouseOut,
      onMouseOut = _a$onMouseOut === void 0 ? function () {
    return null;
  } : _a$onMouseOut,
      value = _a.value,
      active = _a.active,
      href = _a.href,
      prefix = _a.prefix,
      suffix = _a.suffix,
      _a$size = _a.size,
      size = _a$size === void 0 ? 'lg' : _a$size,
      props = __rest(_a, ["className", "children", "onSelect", "onMouseOver", "onMouseOut", "value", "active", "href", "prefix", "suffix", "size"]);

  return createElement(StyledItem, Object.assign({
    onMouseOver: onMouseOver,
    onMouseOut: onMouseOut,
    onMouseDown: function onMouseDown() {
      return onSelect(value);
    },
    className: classNames('anchor-list-item', className, {
      active: active
    }),
    href: href
  }, props), createElement(StyledTypography, {
    color: "text.light",
    className: size
  }, prefix && cloneElement(prefix, {
    className: 'item-prefix'
  }), prefix || suffix ? createElement("span", {
    className: "item-main"
  }, children) : children, suffix && cloneElement(suffix, {
    className: 'item-suffix'
  })));
};

function _templateObject$1() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    display: flex;\n    padding: 0 1rem 0;\n    align-items: center;\n    height: 2rem;\n    margin-top: 0.75rem;\n    ", "\n"]);

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

  return data;
}
var StyledTitle = styled('div')(_templateObject$1(), space);
var Title = function Title(_ref) {
  var className = _ref.className,
      children = _ref.children;
  return createElement(StyledTitle, {
    className: classNames('anchor-list-title', className)
  }, createElement(Typography, {
    weight: 700,
    scale: 12,
    color: "text.label"
  }, children));
};

function _templateObject$2() {
  var data = _taggedTemplateLiteral(["\n    height: 0.5rem;\n    padding: 0.5rem 1rem;\n    hr {\n        border: none;\n        border-top: light;\n    }\n    ", "\n"]);

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

  return data;
}
var StyledDivider = styled('div')(_templateObject$2(), space);
var Divider = function Divider(_a) {
  var className = _a.className,
      props = __rest(_a, ["className"]);

  return createElement(StyledDivider, Object.assign({
    className: classNames('anchor-list-divider', className)
  }, props), createElement("hr", null));
};

function _templateObject$3() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    ", "\n"]);

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

  return data;
}
var itemComponent = {
  item: Item,
  title: Title,
  divider: Divider
};
var StyledList = styled('div')(_templateObject$3(), space);
var List = function List(_a) {
  var className = _a.className,
      _a$children = _a.children,
      children = _a$children === void 0 ? [] : _a$children,
      items = _a.items,
      props = __rest(_a, ["className", "children", "items"]);

  return createElement(StyledList, Object.assign({
    className: classNames('anchor-list', className)
  }, props), items ? items.map(function (_a, index) {
    var label = _a.label,
        _b = _a.value,
        _b$listItemType = _b.listItemType,
        listItemType = _b$listItemType === void 0 ? 'item' : _b$listItemType,
        key = _b.key,
        r = __rest(_b, ["listItemType", "key"]);

    return createElement(itemComponent[listItemType], Object.assign({
      label: label,
      key: key || "list-".concat(index)
    }, r), label);
  }) : children);
};

export { List, Item, Title, Divider };
//# sourceMappingURL=list.js.map