@procore/core-react 11.22.1 → 11.23.0

package/dist/FileSelect/SourceItem/SourceItem.js

@@ -1,25 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+var _excluded = ["icon", "count", "countTruncationThreshold", "loading", "error", "selected", "disabled", "focused", "children", "tabIndex"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Error } from '@procore/core-icons/dist';
 import React from 'react';
 import { Spinner } from '../../Spinner/Spinner';
@@ -27,39 +9,69 @@ import { Tooltip } from '../../Tooltip/Tooltip';
 import { OverflowObserver } from '../../_hooks/OverflowObserver';
 import { StyledIcon, StyledLabel, StyledSourceItem } from './SourceItem.styles';
 function formatCount(count, truncationThreshold) {
-    if (count === 0) {
-        return '';
-    }
-    else if (count > truncationThreshold) {
-        return "(".concat(truncationThreshold, "+)");
+  if (count === 0) {
+    return '';
+  } else if (count > truncationThreshold) {
+    return "(".concat(truncationThreshold, "+)");
+  } else {
+    return "(".concat(count, ")");
+  }
+}
+export var SourceItem = /*#__PURE__*/React.forwardRef(function SourceItem(_ref, ref) {
+  var _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? '' : _ref$icon,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 0 : _ref$count,
+    _ref$countTruncationT = _ref.countTruncationThreshold,
+    countTruncationThreshold = _ref$countTruncationT === void 0 ? 99 : _ref$countTruncationT,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$focused = _ref.focused,
+    focused = _ref$focused === void 0 ? false : _ref$focused,
+    children = _ref.children,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var tabIndexAttribute = !disabled ? {
+    tabIndex: tabIndex
+  } : {};
+  var iconElement = /*#__PURE__*/React.createElement(StyledIcon, null, function () {
+    if (error) {
+      return /*#__PURE__*/React.createElement(Error, null);
     }
-    else {
-        return "(".concat(count, ")");
+    if (loading) {
+      return /*#__PURE__*/React.createElement(Spinner, {
+        size: "xs"
+      });
     }
-}
-export var SourceItem = React.forwardRef(function SourceItem(_a, ref) {
-    var _b = _a.icon, icon = _b === void 0 ? '' : _b, _c = _a.count, count = _c === void 0 ? 0 : _c, _d = _a.countTruncationThreshold, countTruncationThreshold = _d === void 0 ? 99 : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, _g = _a.selected, selected = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, children = _a.children, _k = _a.tabIndex, tabIndex = _k === void 0 ? 0 : _k, props = __rest(_a, ["icon", "count", "countTruncationThreshold", "loading", "error", "selected", "disabled", "focused", "children", "tabIndex"]);
-    var tabIndexAttribute = !disabled ? { tabIndex: tabIndex } : {};
-    var iconElement = (React.createElement(StyledIcon, null, (function () {
-        if (error) {
-            return React.createElement(Error, null);
-        }
-        if (loading) {
-            return React.createElement(Spinner, { size: "xs" });
-        }
-        return icon;
-    })()));
-    var labelElement = (React.createElement(OverflowObserver, null, function (_a) {
-        var isOverflowing = _a.isOverflowing, ref = _a.ref;
-        var item = React.createElement(StyledLabel, { ref: ref }, children);
-        return isOverflowing ? (React.createElement(Tooltip, { showDelay: 500, trigger: "hover", overlay: React.createElement(Tooltip.Content, null, children) }, item)) : (item);
-    }));
-    var countElement = (React.createElement("div", null,
-        "\u00A0",
-        formatCount(count, countTruncationThreshold)));
-    return (React.createElement(StyledSourceItem, __assign({ ref: ref }, tabIndexAttribute, props, { error: error, selected: selected, disabled: disabled, focused: focused }),
-        iconElement,
-        labelElement,
-        countElement));
+    return icon;
+  }());
+  var labelElement = /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref2) {
+    var isOverflowing = _ref2.isOverflowing,
+      ref = _ref2.ref;
+    var item = /*#__PURE__*/React.createElement(StyledLabel, {
+      ref: ref
+    }, children);
+    return isOverflowing ? /*#__PURE__*/React.createElement(Tooltip, {
+      showDelay: 500,
+      trigger: "hover",
+      overlay: /*#__PURE__*/React.createElement(Tooltip.Content, null, children)
+    }, item) : item;
+  });
+  var countElement = /*#__PURE__*/React.createElement("div", null, "\xA0", formatCount(count, countTruncationThreshold));
+  return /*#__PURE__*/React.createElement(StyledSourceItem, _extends({
+    ref: ref
+  }, tabIndexAttribute, props, {
+    error: error,
+    selected: selected,
+    disabled: disabled,
+    focused: focused
+  }), iconElement, labelElement, countElement);
 });
 //# sourceMappingURL=SourceItem.js.map

package/dist/FileSelect/SourceItem/SourceItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SourceItem.js","sourceRoot":"","sources":["../../../src/FileSelect/SourceItem/SourceItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAqC/E,SAAS,WAAW,CAAC,KAAa,EAAE,mBAA2B;IAC7D,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,EAAE,CAAA;KACV;SAAM,IAAI,KAAK,GAAG,mBAAmB,EAAE;QACtC,OAAO,WAAI,mBAAmB,OAAI,CAAA;KACnC;SAAM;QACL,OAAO,WAAI,KAAK,MAAG,CAAA;KACpB;AACH,CAAC;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGxC,SAAS,UAAU,CACnB,EAYC,EACD,GAAG;IAZD,IAAA,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,gCAA6B,EAA7B,wBAAwB,mBAAG,EAAE,KAAA,EAC7B,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,gBAAY,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EACT,KAAK,cAXV,4HAYC,CADS;IAIV,IAAM,iBAAiB,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAEvD,IAAM,WAAW,GAAG,CAClB,oBAAC,UAAU,QACR,CAAC;QACA,IAAI,KAAK,EAAE;YACT,OAAO,oBAAC,KAAK,OAAG,CAAA;SACjB;QAED,IAAI,OAAO,EAAE;YACX,OAAO,oBAAC,OAAO,IAAC,IAAI,EAAC,IAAI,GAAG,CAAA;SAC7B;QAED,OAAO,IAAI,CAAA;IACb,CAAC,CAAC,EAAE,CACO,CACd,CAAA;IAED,IAAM,YAAY,GAAG,CACnB,oBAAC,gBAAgB,QACd,UAAC,EAA2B;YAAzB,aAAa,mBAAA,EAAE,GAAG,SAAA;QACpB,IAAM,IAAI,GAAG,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,IAAG,QAAQ,CAAe,CAAA;QAE5D,OAAO,aAAa,CAAC,CAAC,CAAC,CACrB,oBAAC,OAAO,IACN,SAAS,EAAE,GAAG,EACd,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,IAErD,IAAI,CACG,CACX,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAA;IACH,CAAC,CACgB,CACpB,CAAA;IAED,IAAM,YAAY,GAAG,CACnB;;QAAY,WAAW,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAO,CAChE,CAAA;IAED,OAAO,CACL,oBAAC,gBAAgB,aACf,GAAG,EAAE,GAAG,IACJ,iBAAiB,EACjB,KAAK,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO;QAEf,WAAW;QACX,YAAY;QACZ,YAAY,CACI,CACpB,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"SourceItem.js","names":["Error","React","Spinner","Tooltip","OverflowObserver","StyledIcon","StyledLabel","StyledSourceItem","formatCount","count","truncationThreshold","concat","SourceItem","forwardRef","_ref","ref","_ref$icon","icon","_ref$count","_ref$countTruncationT","countTruncationThreshold","_ref$loading","loading","_ref$error","error","_ref$selected","selected","_ref$disabled","disabled","_ref$focused","focused","children","_ref$tabIndex","tabIndex","props","_objectWithoutProperties","_excluded","tabIndexAttribute","iconElement","createElement","size","labelElement","_ref2","isOverflowing","item","showDelay","trigger","overlay","Content","countElement","_extends"],"sources":["../../../src/FileSelect/SourceItem/SourceItem.tsx"],"sourcesContent":["import { Error } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Spinner } from '../../Spinner/Spinner'\nimport { Tooltip } from '../../Tooltip/Tooltip'\nimport { OverflowObserver } from '../../_hooks/OverflowObserver'\nimport { DivAttributes, Props } from '../../_utils/types'\nimport { StyledIcon, StyledLabel, StyledSourceItem } from './SourceItem.styles'\n\nexport interface SourceItemProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  count?: number\n  /**\n   * @since 10.19.0\n   */\n  countTruncationThreshold?: number\n  /**\n   * @since 10.19.0\n   */\n  loading?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n  /**\n   * @since 10.19.0\n   */\n  selected?: boolean\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  focused?: boolean\n}\n\nfunction formatCount(count: number, truncationThreshold: number): string {\n  if (count === 0) {\n    return ''\n  } else if (count > truncationThreshold) {\n    return `(${truncationThreshold}+)`\n  } else {\n    return `(${count})`\n  }\n}\n\nexport const SourceItem = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & SourceItemProps\n>(function SourceItem(\n  {\n    icon = '',\n    count = 0,\n    countTruncationThreshold = 99,\n    loading = false,\n    error = false,\n    selected = false,\n    disabled = false,\n    focused = false,\n    children,\n    tabIndex = 0,\n    ...props\n  },\n  ref\n) {\n  const tabIndexAttribute = !disabled ? { tabIndex } : {}\n\n  const iconElement = (\n    <StyledIcon>\n      {(() => {\n        if (error) {\n          return <Error />\n        }\n\n        if (loading) {\n          return <Spinner size=\"xs\" />\n        }\n\n        return icon\n      })()}\n    </StyledIcon>\n  )\n\n  const labelElement = (\n    <OverflowObserver>\n      {({ isOverflowing, ref }: any) => {\n        const item = <StyledLabel ref={ref}>{children}</StyledLabel>\n\n        return isOverflowing ? (\n          <Tooltip\n            showDelay={500}\n            trigger=\"hover\"\n            overlay={<Tooltip.Content>{children}</Tooltip.Content>}\n          >\n            {item}\n          </Tooltip>\n        ) : (\n          item\n        )\n      }}\n    </OverflowObserver>\n  )\n\n  const countElement = (\n    <div>&nbsp;{formatCount(count, countTruncationThreshold)}</div>\n  )\n\n  return (\n    <StyledSourceItem\n      ref={ref}\n      {...tabIndexAttribute}\n      {...props}\n      error={error}\n      selected={selected}\n      disabled={disabled}\n      focused={focused}\n    >\n      {iconElement}\n      {labelElement}\n      {countElement}\n    </StyledSourceItem>\n  )\n})\n"],"mappings":";;;;AAAA,SAASA,KAAK,QAAQ,0BAA0B;AAChD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE,SAASC,UAAU,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB;AAqC/E,SAASC,WAAWA,CAACC,KAAa,EAAEC,mBAA2B,EAAU;EACvE,IAAID,KAAK,KAAK,CAAC,EAAE;IACf,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,KAAK,GAAGC,mBAAmB,EAAE;IACtC,WAAAC,MAAA,CAAWD,mBAAmB;EAChC,CAAC,MAAM;IACL,WAAAC,MAAA,CAAWF,KAAK;EAClB;AACF;AAEA,OAAO,IAAMG,UAAU,gBAAGX,KAAK,CAACY,UAAU,CAGxC,SAASD,UAAUA,CAAAE,IAAA,EAcnBC,GAAG,EACH;EAAA,IAAAC,SAAA,GAAAF,IAAA,CAbEG,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IAAAE,UAAA,GAAAJ,IAAA,CACTL,KAAK;IAALA,KAAK,GAAAS,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAAC,qBAAA,GAAAL,IAAA,CACTM,wBAAwB;IAAxBA,wBAAwB,GAAAD,qBAAA,cAAG,EAAE,GAAAA,qBAAA;IAAAE,YAAA,GAAAP,IAAA,CAC7BQ,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAE,UAAA,GAAAT,IAAA,CACfU,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,KAAK,GAAAA,UAAA;IAAAE,aAAA,GAAAX,IAAA,CACbY,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,aAAA,GAAAb,IAAA,CAChBc,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,YAAA,GAAAf,IAAA,CAChBgB,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,QAAQ,GAAAjB,IAAA,CAARiB,QAAQ;IAAAC,aAAA,GAAAlB,IAAA,CACRmB,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,CAAC,GAAAA,aAAA;IACTE,KAAK,GAAAC,wBAAA,CAAArB,IAAA,EAAAsB,SAAA;EAIV,IAAMC,iBAAiB,GAAG,CAACT,QAAQ,GAAG;IAAEK,QAAQ,EAARA;EAAS,CAAC,GAAG,CAAC,CAAC;EAEvD,IAAMK,WAAW,gBACfrC,KAAA,CAAAsC,aAAA,CAAClC,UAAU,QACP,YAAM;IACN,IAAImB,KAAK,EAAE;MACT,oBAAOvB,KAAA,CAAAsC,aAAA,CAACvC,KAAK,MAAE,CAAC;IAClB;IAEA,IAAIsB,OAAO,EAAE;MACX,oBAAOrB,KAAA,CAAAsC,aAAA,CAACrC,OAAO;QAACsC,IAAI,EAAC;MAAI,CAAE,CAAC;IAC9B;IAEA,OAAOvB,IAAI;EACb,CAAC,CAAE,CACO,CACb;EAED,IAAMwB,YAAY,gBAChBxC,KAAA,CAAAsC,aAAA,CAACnC,gBAAgB,QACd,UAAAsC,KAAA,EAAiC;IAAA,IAA9BC,aAAa,GAAAD,KAAA,CAAbC,aAAa;MAAE5B,GAAG,GAAA2B,KAAA,CAAH3B,GAAG;IACpB,IAAM6B,IAAI,gBAAG3C,KAAA,CAAAsC,aAAA,CAACjC,WAAW;MAACS,GAAG,EAAEA;IAAI,GAAEgB,QAAsB,CAAC;IAE5D,OAAOY,aAAa,gBAClB1C,KAAA,CAAAsC,aAAA,CAACpC,OAAO;MACN0C,SAAS,EAAE,GAAI;MACfC,OAAO,EAAC,OAAO;MACfC,OAAO,eAAE9C,KAAA,CAAAsC,aAAA,CAACpC,OAAO,CAAC6C,OAAO,QAAEjB,QAA0B;IAAE,GAEtDa,IACM,CAAC,GAEVA,IACD;EACH,CACgB,CACnB;EAED,IAAMK,YAAY,gBAChBhD,KAAA,CAAAsC,aAAA,cAAK,MAAM,EAAC/B,WAAW,CAACC,KAAK,EAAEW,wBAAwB,CAAO,CAC/D;EAED,oBACEnB,KAAA,CAAAsC,aAAA,CAAChC,gBAAgB,EAAA2C,QAAA;IACfnC,GAAG,EAAEA;EAAI,GACLsB,iBAAiB,EACjBH,KAAK;IACTV,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEA,QAAS;IACnBE,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA;EAAQ,IAEhBQ,WAAW,EACXG,YAAY,EACZQ,YACe,CAAC;AAEvB,CAAC,CAAC"}

package/dist/FileSelect/SourceItem/SourceItem.styles.js

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled, { css } from 'styled-components';
 import { getTypographyIntent } from '../../Typography/Typography.styles';
 import { colors } from '../../_styles/colors';
@@ -9,24 +5,33 @@ import { getEllipsis, getFocus } from '../../_styles/mixins';
 import { spacing } from '../../_styles/spacing';
 var sourceItemHeight = 48;
 var sourceItemPadding = spacing.xl;
-var focused = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  // compensate for border shift\n  padding: 0 ", "px 0 ", "px;\n"], ["\n  ", "\n  // compensate for border shift\n  padding: 0 ", "px 0 ", "px;\n"])), getFocus(), sourceItemPadding - 1, sourceItemPadding - 1);
-export var StyledSourceItem = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  color: ", ";\n  ", "\n  cursor: pointer;\n  height: ", "px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: block;\n    width: 4px;\n    height: 100%;\n    background-color: ", ";\n    transform: scaleX(0);\n    transform-origin: center left;\n    transition: transform 200ms ease-out;\n    // prevent a one-pixel gap between focused and selected source items due to the box-shadow\n    z-index: 1;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  color: ", ";\n  ", "\n  cursor: pointer;\n  height: ", "px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: block;\n    width: 4px;\n    height: 100%;\n    background-color: ", ";\n    transform: scaleX(0);\n    transform-origin: center left;\n    transition: transform 200ms ease-out;\n    // prevent a one-pixel gap between focused and selected source items due to the box-shadow\n    z-index: 1;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"])), sourceItemPadding, sourceItemPadding, colors.gray45, getTypographyIntent('body'), sourceItemHeight, colors.blue45, function (_a) {
-    var selected = _a.selected;
-    return selected &&
-        "\n    font-weight: 700;\n    background-color: ".concat(colors.blue96, ";\n    color: ").concat(colors.blue45, ";\n\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.blue50, ";\n    }\n\n    &:before {\n      transform: scaleX(1);\n    }\n  ");
-}, function (_a) {
-    var error = _a.error;
-    return error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n\n      ", " {\n        color: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      ", " {\n        color: ", ";\n      }\n    "])), colors.red50, StyledIcon, colors.red50);
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled &&
-        "\n    cursor: not-allowed;\n    color: ".concat(colors.gray70, ";\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.gray85, ";\n    }\n  ");
-}, function (_a) {
-    var selected = _a.selected, disabled = _a.disabled, error = _a.error;
-    return !selected && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      &:hover {\n        transition: background-color 150ms ease-out 150ms, color 150ms ease-out;\n\n        ", "\n\n        ", "\n      }\n    "], ["\n      &:hover {\n        transition: background-color 150ms ease-out 150ms, color 150ms ease-out;\n\n        ", "\n\n        ", "\n      }\n    "])), !disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), colors.gray96), !disabled &&
-        !error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), colors.gray15));
-}, function (props) { return props.focused && focused; }, focused);
-export var StyledIcon = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n"])));
-export var StyledLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis());
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var focused = /*#__PURE__*/css(["", " padding:0 ", "px 0 ", "px;"], getFocus(), sourceItemPadding - 1, sourceItemPadding - 1);
+export var StyledSourceItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledSourceItem",
+  componentId: "core-11_23_0__sc-plcozv-0"
+})(["position:relative;display:flex;align-items:center;padding:0 ", "px 0 ", "px;color:", ";", " cursor:pointer;height:", "px;&:before{content:'';position:absolute;top:0;left:0;display:block;width:4px;height:100%;background-color:", ";transform:scaleX(0);transform-origin:center left;transition:transform 200ms ease-out;z-index:1;}", " ", " ", " ", " ", " &:focus{", "}"], sourceItemPadding, sourceItemPadding, colors.gray45, getTypographyIntent('body'), sourceItemHeight, colors.blue45, function (_ref) {
+  var selected = _ref.selected;
+  return selected && "\n    font-weight: 700;\n    background-color: ".concat(colors.blue96, ";\n    color: ").concat(colors.blue45, ";\n\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.blue50, ";\n    }\n\n    &:before {\n      transform: scaleX(1);\n    }\n  ");
+}, function (_ref2) {
+  var error = _ref2.error;
+  return error && css(["color:", ";", "{color:", ";}"], colors.red50, StyledIcon, colors.red50);
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled && "\n    cursor: not-allowed;\n    color: ".concat(colors.gray70, ";\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.gray85, ";\n    }\n  ");
+}, function (_ref4) {
+  var selected = _ref4.selected,
+    disabled = _ref4.disabled,
+    error = _ref4.error;
+  return !selected && css(["&:hover{transition:background-color 150ms ease-out 150ms,color 150ms ease-out;", " ", "}"], !disabled && css(["background-color:", ";"], colors.gray96), !disabled && !error && css(["color:", ";"], colors.gray15));
+}, function (props) {
+  return props.focused && focused;
+}, focused);
+export var StyledIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledIcon",
+  componentId: "core-11_23_0__sc-plcozv-1"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;"]);
+export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledLabel",
+  componentId: "core-11_23_0__sc-plcozv-2"
+})(["", ""], getEllipsis());
 //# sourceMappingURL=SourceItem.styles.js.map

package/dist/FileSelect/SourceItem/SourceItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SourceItem.styles.js","sourceRoot":"","sources":["../../../src/FileSelect/SourceItem/SourceItem.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE/C,IAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,IAAM,iBAAiB,GAAG,OAAO,CAAC,EAAE,CAAA;AAEpC,IAAM,OAAO,GAAG,GAAG,gJAAA,MACf,EAAU,mDAEC,EAAqB,OAAQ,EAAqB,OAChE,KAHG,QAAQ,EAAE,EAEC,iBAAiB,GAAG,CAAC,EAAQ,iBAAiB,GAAG,CAAC,CAChE,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,ssBAKxC,kFAIa,EAAiB,OAAQ,EAAiB,gBAC9C,EAAa,OACpB,EAA2B,kCAEnB,EAAgB,4KAUJ,EAAa,yOAQjC,EAcD,QAEC,EAQC,QAED,EAQD,QAEC,EAiBC,YAGD,EAAmC,uBAGjC,EAAO,SAEZ,KAnFc,iBAAiB,EAAQ,iBAAiB,EAC9C,MAAM,CAAC,MAAM,EACpB,mBAAmB,CAAC,MAAM,CAAC,EAEnB,gBAAgB,EAUJ,MAAM,CAAC,MAAM,EAQjC,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ;QACR,yDAEoB,MAAM,CAAC,MAAM,2BACxB,MAAM,CAAC,MAAM,sBAEpB,UAAU,8BACD,MAAM,CAAC,MAAM,uEAMzB;AAbC,CAaD,EAEC,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK,IACL,GAAG,8IAAA,iBACQ,EAAY,aAEnB,EAAU,qBACD,EAAY,kBAExB,KALU,MAAM,CAAC,KAAK,EAEnB,UAAU,EACD,MAAM,CAAC,KAAK,CAExB;AAPD,CAOC,EAED,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ;QACR,iDAES,MAAM,CAAC,MAAM,oBACpB,UAAU,8BACD,MAAM,CAAC,MAAM,iBAEzB;AAPC,CAOD,EAEC,UAAC,EAA6B;QAA3B,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA;IAC5B,OAAA,CAAC,QAAQ,IACT,GAAG,uNAAA,iHAIG,EAGD,cAEC,EAID,iBAEJ,KAXK,CAAC,QAAQ,IACX,GAAG,kHAAA,gCACmB,EAAa,aAClC,KADqB,MAAM,CAAC,MAAM,CAClC,EAEC,CAAC,QAAQ;QACX,CAAC,KAAK,IACN,GAAG,uGAAA,qBACQ,EAAa,aACvB,KADU,MAAM,CAAC,MAAM,CACvB,CAEJ;AAhBD,CAgBC,EAGD,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,IAAI,OAAO,EAAxB,CAAwB,EAGjC,OAAO,CAEZ,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,iMAAA,8HAOnC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,+EAAA,MACjC,EAAa,IAChB,KADG,WAAW,EAAE,CAChB,CAAA"}
+{"version":3,"file":"SourceItem.styles.js","names":["styled","css","getTypographyIntent","colors","getEllipsis","getFocus","spacing","sourceItemHeight","sourceItemPadding","xl","focused","StyledSourceItem","div","withConfig","displayName","componentId","gray45","blue45","_ref","selected","concat","blue96","StyledIcon","blue50","_ref2","error","red50","_ref3","disabled","gray70","gray85","_ref4","gray96","gray15","props","StyledLabel"],"sources":["../../../src/FileSelect/SourceItem/SourceItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../../Typography/Typography.styles'\nimport { colors } from '../../_styles/colors'\nimport { getEllipsis, getFocus } from '../../_styles/mixins'\nimport { spacing } from '../../_styles/spacing'\n\nconst sourceItemHeight = 48\nconst sourceItemPadding = spacing.xl\n\nconst focused = css`\n  ${getFocus()}\n  // compensate for border shift\n  padding: 0 ${sourceItemPadding - 1}px 0 ${sourceItemPadding - 1}px;\n`\n\nexport const StyledSourceItem = styled.div<{\n  selected: boolean\n  error: boolean\n  disabled: boolean\n  focused: boolean\n}>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 ${sourceItemPadding}px 0 ${sourceItemPadding}px;\n  color: ${colors.gray45};\n  ${getTypographyIntent('body')}\n  cursor: pointer;\n  height: ${sourceItemHeight}px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: block;\n    width: 4px;\n    height: 100%;\n    background-color: ${colors.blue45};\n    transform: scaleX(0);\n    transform-origin: center left;\n    transition: transform 200ms ease-out;\n    // prevent a one-pixel gap between focused and selected source items due to the box-shadow\n    z-index: 1;\n  }\n\n  ${({ selected }) =>\n    selected &&\n    `\n    font-weight: 700;\n    background-color: ${colors.blue96};\n    color: ${colors.blue45};\n\n    ${StyledIcon} {\n      color: ${colors.blue50};\n    }\n\n    &:before {\n      transform: scaleX(1);\n    }\n  `}\n\n  ${({ error }) =>\n    error &&\n    css`\n      color: ${colors.red50};\n\n      ${StyledIcon} {\n        color: ${colors.red50};\n      }\n    `}\n\n  ${({ disabled }) =>\n    disabled &&\n    `\n    cursor: not-allowed;\n    color: ${colors.gray70};\n    ${StyledIcon} {\n      color: ${colors.gray85};\n    }\n  `}\n\n  ${({ selected, disabled, error }) =>\n    !selected &&\n    css`\n      &:hover {\n        transition: background-color 150ms ease-out 150ms, color 150ms ease-out;\n\n        ${!disabled &&\n        css`\n          background-color: ${colors.gray96};\n        `}\n\n        ${!disabled &&\n        !error &&\n        css`\n          color: ${colors.gray15};\n        `}\n      }\n    `}\n  \n\n  ${(props) => props.focused && focused}\n\n  &:focus {\n    ${focused}\n  }\n`\n\nexport const StyledIcon = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n`\n\nexport const StyledLabel = styled.div`\n  ${getEllipsis()}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,oCAAoC;AACxE,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,WAAW,EAAEC,QAAQ,QAAQ,sBAAsB;AAC5D,SAASC,OAAO,QAAQ,uBAAuB;AAE/C,IAAMC,gBAAgB,GAAG,EAAE;AAC3B,IAAMC,iBAAiB,GAAGF,OAAO,CAACG,EAAE;AAEpC,IAAMC,OAAO,gBAAGT,GAAG,sCACfI,QAAQ,CAAC,CAAC,EAECG,iBAAiB,GAAG,CAAC,EAAQA,iBAAiB,GAAG,CAAC,CAChE;AAED,OAAO,IAAMG,gBAAgB,gBAAGX,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qXAS3BP,iBAAiB,EAAQA,iBAAiB,EAC9CL,MAAM,CAACa,MAAM,EACpBd,mBAAmB,CAAC,MAAM,CAAC,EAEnBK,gBAAgB,EAUJJ,MAAM,CAACc,MAAM,EAQjC,UAAAC,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,sDAAAC,MAAA,CAGYjB,MAAM,CAACkB,MAAM,oBAAAD,MAAA,CACxBjB,MAAM,CAACc,MAAM,eAAAG,MAAA,CAEpBE,UAAU,uBAAAF,MAAA,CACDjB,MAAM,CAACoB,MAAM,uEAMzB;AAAA,GAEC,UAAAC,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OACRA,KAAK,IACLxB,GAAG,mCACQE,MAAM,CAACuB,KAAK,EAEnBJ,UAAU,EACDnB,MAAM,CAACuB,KAAK,CAExB;AAAA,GAED,UAAAC,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,8CAAAR,MAAA,CAGCjB,MAAM,CAAC0B,MAAM,aAAAT,MAAA,CACpBE,UAAU,uBAAAF,MAAA,CACDjB,MAAM,CAAC2B,MAAM,iBAEzB;AAAA,GAEC,UAAAC,KAAA;EAAA,IAAGZ,QAAQ,GAAAY,KAAA,CAARZ,QAAQ;IAAES,QAAQ,GAAAG,KAAA,CAARH,QAAQ;IAAEH,KAAK,GAAAM,KAAA,CAALN,KAAK;EAAA,OAC5B,CAACN,QAAQ,IACTlB,GAAG,+FAIG,CAAC2B,QAAQ,IACX3B,GAAG,6BACmBE,MAAM,CAAC6B,MAAM,CAClC,EAEC,CAACJ,QAAQ,IACX,CAACH,KAAK,IACNxB,GAAG,kBACQE,MAAM,CAAC8B,MAAM,CACvB,CAEJ;AAAA,GAGD,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACxB,OAAO,IAAIA,OAAO;AAAA,GAGjCA,OAAO,CAEZ;AAED,OAAO,IAAMY,UAAU,gBAAGtB,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oGAOnC;AAED,OAAO,IAAMoB,WAAW,gBAAGnC,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACjCX,WAAW,CAAC,CAAC,CAChB"}

package/dist/FileSelect/SourceItem/SourceItem.test.js

@@ -0,0 +1,53 @@
+// failure to import matchesSnapshot
+import { Cog } from '@procore/core-icons/dist'
+import React from 'react'
+import { matchesSnapshot } from '../../__tests__/helpers/snapshots'
+import { SourceItem } from './SourceItem'
+
+describe('SourceItem', () => {
+  it('default view', () => {
+    matchesSnapshot(<SourceItem />)
+  })
+
+  it('DivAttributes', () => {
+    matchesSnapshot(<SourceItem className="TEST" tabIndex={100} />)
+  })
+
+  it('error view', () => {
+    matchesSnapshot(<SourceItem error />)
+  })
+
+  it('loading view', () => {
+    matchesSnapshot(<SourceItem loading />)
+  })
+
+  it('selected view', () => {
+    matchesSnapshot(<SourceItem selected />)
+  })
+
+  it('disabled view', () => {
+    matchesSnapshot(<SourceItem disabled />)
+  })
+
+  it('icon and label', () => {
+    matchesSnapshot(<SourceItem icon={<Cog />}>Label</SourceItem>)
+  })
+
+  describe('count', () => {
+    it('equal to 0 should not be rendered', () => {
+      matchesSnapshot(<SourceItem count={0} />)
+    })
+
+    it('should be rendered as is in parentheses when larger then 0 and less then 100', () => {
+      matchesSnapshot(<SourceItem count={24} />)
+    })
+
+    it('should be rendered truncated in parentheses when larger then 99', () => {
+      matchesSnapshot(<SourceItem count={100} />)
+    })
+
+    it('should be rendered truncated in parentheses when equal or larger then custom threshold', () => {
+      matchesSnapshot(<SourceItem count={11} countTruncationThreshold={10} />)
+    })
+  })
+})