@primer/react/lib/internal/components/UnderlineTabbedInterface.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var reactIs = require('react-is');
var styled = require('styled-components');
var CounterLabel = require('../../CounterLabel/CounterLabel.js');
var sx = require('../../sx.js');
var defaultSxProp = require('../../utils/defaultSxProp.js');
var constants = require('../../constants.js');
var toggleStyledComponent = require('../utils/toggleStyledComponent.js');
var UnderlineTabbedInterface_module = require('./UnderlineTabbedInterface.module.css.js');
require('../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../FeatureFlags/useFeatureFlag.js');
require('../../FeatureFlags/DefaultFeatureFlags.js');
var clsx = require('clsx');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }

// The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container.
const GAP = 8;
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff';
const StyledComponentUnderlineWrapper = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled__default.default.div.withConfig({
  displayName: "UnderlineTabbedInterface__StyledComponentUnderlineWrapper",
  componentId: "sc-4ilrg0-0"
})(["display:flex;padding-inline:var(--stack-padding-normal,", ");justify-content:flex-start;align-items:center;min-height:var(--control-xlarge-size,48px);box-shadow:inset 0px -1px var(--borderColor-muted,", ");", ";"], constants.get('space.3'), constants.get('colors.border.muted'), sx.default));
const StyledUnderlineWrapper = /*#__PURE__*/React.forwardRef(({
  children,
  className,
  ...rest
}, forwardedRef) => {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(StyledComponentUnderlineWrapper, _extends({
      className: clsx.clsx(UnderlineTabbedInterface_module.UnderlineWrapper, className),
      ref: forwardedRef
    }, rest), children);
  }
  return /*#__PURE__*/React__default.default.createElement(StyledComponentUnderlineWrapper, _extends({
    className: className,
    ref: forwardedRef
  }, rest), children);
});
const StyledComponentUnderlineItemList = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'ul', styled__default.default.ul.withConfig({
  displayName: "UnderlineTabbedInterface__StyledComponentUnderlineItemList",
  componentId: "sc-4ilrg0-1"
})(["display:flex;list-style:none;white-space:nowrap;padding:0;margin:0;align-items:center;gap:", "px;position:relative;"], GAP));
const StyledUnderlineItemList = /*#__PURE__*/React.forwardRef(({
  children,
  ...rest
}, forwardedRef) => {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(StyledComponentUnderlineItemList, _extends({
      className: UnderlineTabbedInterface_module.UnderlineItemList,
      ref: forwardedRef
    }, rest), children);
  }
  return /*#__PURE__*/React__default.default.createElement(StyledComponentUnderlineItemList, _extends({
    ref: forwardedRef
  }, rest), children);
});
const StyledUnderlineItem = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled__default.default.div.withConfig({
  displayName: "UnderlineTabbedInterface__StyledUnderlineItem",
  componentId: "sc-4ilrg0-2"
})(["appearance:none;background-color:transparent;border:0;cursor:pointer;font:inherit;position:relative;display:inline-flex;color:", ";text-align:center;text-decoration:none;line-height:var(--text-body-lineHeight-medium,1.4285);border-radius:var(--borderRadius-medium,", ");font-size:var(--text-body-size-medium,", ");padding-inline:var(--control-medium-paddingInline-condensed,", ");padding-block:var(--control-medium-paddingBlock,6px);align-items:center;@media (hover:hover){&:hover{background-color:var(--bgColor-neutral-muted,", ");transition:background 0.12s ease-out;text-decoration:none;}}&:focus:{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,", ");&:not(:focus-visible){box-shadow:none;}}&:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,", ");}[data-content]::before{content:attr(data-content);display:block;height:0;font-weight:var(--base-text-weight-semibold,", ");visibility:hidden;white-space:nowrap;}[data-component='icon']{color:var(--fgColor-muted,", ");align-items:center;display:inline-flex;margin-inline-end:var(--control-medium-gap,", ");}[data-component='counter']{margin-inline-start:var(--control-medium-gap,", ");display:flex;align-items:center;}&::after{position:absolute;right:50%;bottom:calc(50% - calc(var(--control-xlarge-size,48px) / 2 + 1px));width:100%;height:2px;content:'';background-color:transparent;border-radius:0;transform:translate(50%,-50%);}&[aria-current]:not([aria-current='false']),&[aria-selected='true']{[data-component='text']{font-weight:var(--base-text-weight-semibold,", ");}&::after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));}}@media (forced-colors:active){&[aria-current]:not([aria-current='false']),&[aria-selected='true']{::after{background-color:LinkText;}}}", ";"], constants.get('colors.fg.default'), constants.get('radii.2'), constants.get('fontSizes.1'), constants.get('space.2'), constants.get('colors.neutral.subtle'), constants.get('colors.accent.fg'), constants.get('colors.accent.fg'), constants.get('fontWeights.semibold'), constants.get('colors.fg.muted'), constants.get('space.2'), constants.get('space.2'), constants.get('fontWeights.semibold'), sx.default));
const loadingKeyframes = styled.keyframes(["from{opacity:1;}to{opacity:0.2;}"]);
const StyledComponentLoadingCounter = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'span', styled__default.default.span.withConfig({
  displayName: "UnderlineTabbedInterface__StyledComponentLoadingCounter",
  componentId: "sc-4ilrg0-3"
})(["animation:", " 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,", ");border-color:var(--borderColor-default,", ");width:1.5rem;height:1rem;display:inline-block;border-radius:20px;"], loadingKeyframes, constants.get('colors.neutral.subtle'), constants.get('colors.border.default')));
const LoadingCounter = () => {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(StyledComponentLoadingCounter, {
      className: UnderlineTabbedInterface_module.LoadingCounter
    });
  }
  return /*#__PURE__*/React__default.default.createElement(StyledComponentLoadingCounter, null);
};
LoadingCounter.displayName = "LoadingCounter"; // We can uncomment these when/if we add overflow behavior
// to the UnderlinePanels component
//
// export const StyledMoreButton = styled(Button)`
//   margin: 0;
//   border: 0;
//   background: transparent;
//   font-weight: normal;
//   box-shadow: none;
//   padding-block: var(--control-small-paddingBlock);
//   padding-inline: var(--control-small-paddingInline-condensed);
//   > span[data-component='trailingVisual'] {
//     margin-left: 0;
//   }
// `
// export const StyledOverflowDivider = styled.span`
//   display: inline-block;
//   border-left: 1px solid var(--borderColor-muted);
//   width: 1px;
//   margin-right: var(--control-xsmall-gap);
//   /* The height of the divider - reference from Figma */
//   height: 24px;
// `
// export const StyledMoreMenuListItem = styled.li`
//   display: flex;
//   align-items: center;
//   height: 45px;
// `
const UnderlineItem = /*#__PURE__*/React.forwardRef(({
  as = 'a',
  children,
  counter,
  icon: Icon,
  iconsVisible,
  loadingCounters,
  sx: sxProp = defaultSxProp.defaultSxProp,
  ...rest
}, forwardedRef) => {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(StyledUnderlineItem, _extends({
      ref: forwardedRef,
      as: as,
      sx: sxProp,
      className: UnderlineTabbedInterface_module.UnderlineItem
    }, rest), iconsVisible && Icon && /*#__PURE__*/React__default.default.createElement("span", {
      "data-component": "icon"
    }, reactIs.isElement(Icon) ? Icon : /*#__PURE__*/React__default.default.createElement(Icon, null)), children && /*#__PURE__*/React__default.default.createElement("span", {
      "data-component": "text",
      "data-content": children
    }, children), counter !== undefined ? loadingCounters ? /*#__PURE__*/React__default.default.createElement("span", {
      "data-component": "counter"
    }, /*#__PURE__*/React__default.default.createElement(LoadingCounter, null)) : /*#__PURE__*/React__default.default.createElement("span", {
      "data-component": "counter"
    }, /*#__PURE__*/React__default.default.createElement(CounterLabel, null, counter)) : null);
  }
  return /*#__PURE__*/React__default.default.createElement(StyledUnderlineItem, _extends({
    ref: forwardedRef,
    as: as,
    sx: sxProp
  }, rest), iconsVisible && Icon && /*#__PURE__*/React__default.default.createElement("span", {
    "data-component": "icon"
  }, reactIs.isElement(Icon) ? Icon : /*#__PURE__*/React__default.default.createElement(Icon, null)), children && /*#__PURE__*/React__default.default.createElement("span", {
    "data-component": "text",
    "data-content": children
  }, children), counter !== undefined ? loadingCounters ? /*#__PURE__*/React__default.default.createElement("span", {
    "data-component": "counter"
  }, /*#__PURE__*/React__default.default.createElement(LoadingCounter, null)) : /*#__PURE__*/React__default.default.createElement("span", {
    "data-component": "counter"
  }, /*#__PURE__*/React__default.default.createElement(CounterLabel, null, counter)) : null);
});

exports.GAP = GAP;
exports.LoadingCounter = LoadingCounter;
exports.StyledComponentLoadingCounter = StyledComponentLoadingCounter;
exports.StyledUnderlineItem = StyledUnderlineItem;
exports.StyledUnderlineItemList = StyledUnderlineItemList;
exports.StyledUnderlineWrapper = StyledUnderlineWrapper;
exports.UnderlineItem = UnderlineItem;