@procore/core-react 10.30.0 → 11.0.0-rc.0

package/dist/Panel/Panel.styles.js

@@ -0,0 +1,46 @@
+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 { colors } from '../_styles/colors';
+import { spacing } from '../_styles/spacing';
+import { Card } from '../Card';
+import { Typography } from '../Typography/Typography';
+import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
+import { getShadow } from '../_styles/shadows';
+var headerActionSize = 36;
+var buttonShadowWidth = 2;
+var gutter = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  > * + * {\n    margin-left: ", "px;\n  }\n"])), spacing.sm);
+var panel = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: ", "px;\n  background: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  padding: ", "px;\n  background: ", ";\n"])), spacing.lg, colors.white);
+export var StyledHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n\n  ", "\n"], ["\n  border-bottom: 1px solid ", ";\n\n  ", "\n"])), colors.gray85, panel);
+export var StyledTitle = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"], ["\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+export var StyledHeaderBackAction = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ", "px;\n  margin-right: ", "px;\n  opacity: ", ";\n  transform: translateX(\n    ", "px\n  );\n"], ["\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ", "px;\n  margin-right: ", "px;\n  opacity: ", ";\n  transform: translateX(\n    ", "px\n  );\n"])), function (_a) {
+    var active = _a.active;
+    return (active ? headerActionSize : 0);
+}, function (_a) {
+    var active = _a.active;
+    return (active ? spacing.lg : 0);
+}, function (_a) {
+    var active = _a.active;
+    return (active ? 1 : 0);
+}, function (_a) {
+    var active = _a.active;
+    return active ? 0 : -(spacing.lg + headerActionSize + buttonShadowWidth);
+});
+export var StyledMoreMenu = styled(Card)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-height: 128px;\n"], ["\n  max-height: 128px;\n"])));
+export var StyledHeaderActions = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  margin-left: ", "px;\n  flex-shrink: 0;\n\n  ", "\n"], ["\n  display: flex;\n  margin-left: ", "px;\n  flex-shrink: 0;\n\n  ", "\n"])), spacing.lg, gutter);
+export var StyledCloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: ", "px;\n"], ["\n  margin-left: ", "px;\n"])), spacing.sm);
+export var StyledBody = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  background: ", ";\n  overflow-y: auto;\n\n  > ", " {\n    padding-left: ", "px;\n    padding-right: ", "px;\n\n    ", " {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ", " {\n      padding-top: ", "px;\n    }\n  }\n"], ["\n  height: 100%;\n  background: ", ";\n  overflow-y: auto;\n\n  > ", " {\n    padding-left: ", "px;\n    padding-right: ", "px;\n\n    ", " {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ", " {\n      padding-top: ", "px;\n    }\n  }\n"])), function (_a) {
+    var secondaryBgColor = _a.secondaryBgColor;
+    return secondaryBgColor ? colors.gray96 : colors.white;
+}, StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
+export var StyledPanel = styled.aside(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  overflow: hidden;\n"])), colors.white);
+export var StyledFooterNotation = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+export var StyledFooterActions = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), gutter);
+export var StyledFooter = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  justify-content: flex-end;\n\n  ", "\n\n  ", "\n"], ["\n  border-top: 1px solid ", ";\n  justify-content: flex-end;\n\n  ", "\n\n  ", "\n"])), colors.gray85, panel, function (_a) {
+    var $hasShadow = _a.$hasShadow;
+    return $hasShadow && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      ", "\n      z-index: 1;\n    "], ["\n      ", "\n      z-index: 1;\n    "])), getShadow(2, 'top'));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+//# sourceMappingURL=Panel.styles.js.map

package/dist/Panel/Panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.styles.js","sourceRoot":"","sources":["../../src/Panel/Panel.styles.ts"],"names":[],"mappings":"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"}

package/dist/Panel/Panel.types.d.ts

@@ -0,0 +1,62 @@
+import { ButtonAttributes, DivAttributes } from '../_utils/types';
+import { ButtonProps } from '../Button/Button.types';
+export interface PanelQaTags {
+    /**
+     * @since 10.19.0
+     */
+    moreIcon?: string;
+    /**
+     * @since 10.19.0
+     */
+    title?: string;
+}
+export interface PanelHeaderProps extends DivAttributes {
+    /**
+     * Controls visibility and behavior for the "chevron-left" icon on the left
+     * side of the title.
+     * @since 10.19.0
+     */
+    onClickBack?: () => void;
+    /**
+     * @since 10.19.0
+     */
+    onClose?: () => void;
+}
+export interface PanelTitleTooltipProps {
+    /**
+     * @since 10.19.0
+     */
+    children: React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    isVisible: boolean;
+    /**
+     * @since 10.19.0
+     */
+    overlay: React.ReactNode;
+}
+export interface PanelHeaderActionProps extends ButtonAttributes, ButtonProps {
+    /**
+     * Tooltip/Overflow menu label text.
+     * @since 10.19.0
+     * */
+    title: string;
+}
+export interface PanelBodyProps extends DivAttributes {
+    /**
+     * Applies the gray secondary background color.
+     * @since 10.19.0
+     */
+    secondaryBgColor?: boolean;
+}
+export interface PanelContextShape {
+    /**
+     * @since 10.19.0
+     */
+    isFooterSticky: boolean;
+    /**
+     * @since 10.19.0
+     */
+    setIsFooterSticky: (v: boolean) => void;
+}

package/dist/Panel/Panel.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.types.js","sourceRoot":"","sources":["../../src/Panel/Panel.types.ts"],"names":[],"mappings":""}

package/dist/Panel/index.d.ts

@@ -0,0 +1,2 @@
+export { Panel } from './Panel';
+export { PanelBodyProps, PanelHeaderProps } from './Panel.types';

package/dist/Panel/index.js

@@ -0,0 +1,2 @@
+export { Panel } from './Panel';
+//# sourceMappingURL=index.js.map

package/dist/Panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/Pill/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../src/Pill/Pill.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,SAAS,IAAI,CAC5E,EAA4B,EAC5B,GAAG;IADD,IAAA,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAK,KAAK,cAA1B,SAA4B,CAAF;IAG1B,OAAO,CACL,oBAAC,UAAU,uBAAS,KAAK,IAAM,KAAK,IAAE,GAAG,EAAE,GAAG,KAC3C,KAAK,CAAC,QAAQ,CACJ,CACd,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/Pill/Pill.styles.js

@@ -0,0 +1,31 @@
+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 { colors } from '../_styles/colors';
+import { spacing } from '../_styles/spacing';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+export var StyledPill = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n  display: inline-block;\n  padding: 1px ", "px;\n  border: 1px solid;\n  border-radius: 10px;\n  font-weight: 600;\n\n  & + & {\n    margin-left: ", "px;\n  }\n\n  ", "\n"], ["\n  ", "\n  display: inline-block;\n  padding: 1px ", "px;\n  border: 1px solid;\n  border-radius: 10px;\n  font-weight: 600;\n\n  & + & {\n    margin-left: ", "px;\n  }\n\n  ", "\n"])), getTypographyIntent('small'), spacing.sm, spacing.xs, function (_a) {
+    var $color = _a.$color;
+    switch ($color) {
+        case 'blue':
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.blue94, colors.blue85, colors.blue45);
+        case 'cyan':
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.cyan94, colors.cyan85, colors.cyan30);
+        case 'gray':
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.gray94, colors.gray85, colors.gray30);
+        case 'green':
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.green94, colors.green70, colors.green30);
+        case 'magenta':
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.magenta94, colors.magenta85, colors.magenta40);
+        case 'red':
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.red94, colors.red85, colors.red45);
+        case 'yellow':
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.yellow90, colors.yellow60, colors.orange30);
+        default:
+            return '';
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=Pill.styles.js.map

package/dist/Pill/Pill.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.styles.js","sourceRoot":"","sources":["../../src/Pill/Pill.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AAGrE,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,0PAAuB,MACxD,EAA4B,6CAEf,EAAU,wGAMR,EAAU,gBAGzB,EA+CD,IACF,KA3DG,mBAAmB,CAAC,OAAO,CAAC,EAEf,OAAO,CAAC,EAAE,EAMR,OAAO,CAAC,EAAE,EAGzB,UAAC,EAAU;QAAR,MAAM,YAAA;IACT,QAAQ,MAAM,EAAE;QACd,KAAK,MAAM;YACT,OAAO,GAAG,yKAAA,gCACY,EAAa,6BACjB,EAAa,sBACpB,EAAa,aACvB,KAHqB,MAAM,CAAC,MAAM,EACjB,MAAM,CAAC,MAAM,EACpB,MAAM,CAAC,MAAM,EACvB;QACH,KAAK,MAAM;YACT,OAAO,GAAG,yKAAA,gCACY,EAAa,6BACjB,EAAa,sBACpB,EAAa,aACvB,KAHqB,MAAM,CAAC,MAAM,EACjB,MAAM,CAAC,MAAM,EACpB,MAAM,CAAC,MAAM,EACvB;QACH,KAAK,MAAM;YACT,OAAO,GAAG,yKAAA,gCACY,EAAa,6BACjB,EAAa,sBACpB,EAAa,aACvB,KAHqB,MAAM,CAAC,MAAM,EACjB,MAAM,CAAC,MAAM,EACpB,MAAM,CAAC,MAAM,EACvB;QACH,KAAK,OAAO;YACV,OAAO,GAAG,yKAAA,gCACY,EAAc,6BAClB,EAAc,sBACrB,EAAc,aACxB,KAHqB,MAAM,CAAC,OAAO,EAClB,MAAM,CAAC,OAAO,EACrB,MAAM,CAAC,OAAO,EACxB;QACH,KAAK,SAAS;YACZ,OAAO,GAAG,yKAAA,gCACY,EAAgB,6BACpB,EAAgB,sBACvB,EAAgB,aAC1B,KAHqB,MAAM,CAAC,SAAS,EACpB,MAAM,CAAC,SAAS,EACvB,MAAM,CAAC,SAAS,EAC1B;QACH,KAAK,KAAK;YACR,OAAO,GAAG,yKAAA,gCACY,EAAY,6BAChB,EAAY,sBACnB,EAAY,aACtB,KAHqB,MAAM,CAAC,KAAK,EAChB,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,KAAK,EACtB;QACH,KAAK,QAAQ;YACX,OAAO,GAAG,yKAAA,gCACY,EAAe,6BACnB,EAAe,sBACtB,EAAe,aACzB,KAHqB,MAAM,CAAC,QAAQ,EACnB,MAAM,CAAC,QAAQ,EACtB,MAAM,CAAC,QAAQ,EACzB;QACH;YACE,OAAO,EAAE,CAAA;KACZ;AACH,CAAC,CACF,CAAA"}

package/dist/Pill/Pill.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.types.js","sourceRoot":"","sources":["../../src/Pill/Pill.types.ts"],"names":[],"mappings":""}

package/dist/Pill/index.d.ts

@@ -0,0 +1,2 @@
+export { Pill } from './Pill';
+export { PillColor, PillProps } from './Pill.types';

package/dist/Pill/index.js

@@ -0,0 +1,2 @@
+export { Pill } from './Pill';
+//# sourceMappingURL=index.js.map

package/dist/Pill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Pill/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist/PillSelect/PillSelect.js

@@ -0,0 +1,112 @@
+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;
+};
+import { Check } from '@procore/core-icons/dist';
+import React from 'react';
+import { OverflowObserver } from '../_hooks/OverflowObserver';
+import { Pill } from '../Pill';
+import { Select } from '../Select';
+import { Tooltip } from '../Tooltip';
+import { PillSelectCheckedContainer, PillSelectLabel, PillSelectLabelWrapper, PillSelectOptionWrapper, } from './PillSelect.styles';
+var emptyArr = [];
+function defaultGetId(option) {
+    return option.id;
+}
+function defaultGetLabel(option) {
+    return option.label;
+}
+function defaultGetGroup(option) {
+    return option.groupId;
+}
+function defaultGetSuggested(option) {
+    return option.suggested;
+}
+export function defaultGetColor(option) {
+    return option.color;
+}
+var PillSelectOption = React.forwardRef(function PillSelectOption(_a, ref) {
+    var color = _a.color, label = _a.label, selected = _a.selected, props = __rest(_a, ["color", "label", "selected"]);
+    return (React.createElement(Select.Option, __assign({ selected: selected }, props, { ref: ref }),
+        React.createElement(PillSelectOptionWrapper, null,
+            React.createElement(Pill, { color: color }, label),
+            React.createElement(PillSelectCheckedContainer, null, selected && React.createElement(Check, { size: "sm" })))));
+});
+var PillSelectOptGroup = React.forwardRef(function PillSelectOptGroup(props, ref) {
+    return React.createElement(Select.OptGroup, __assign({}, props, { ref: ref }));
+});
+/**
+
+ Pill Selects are used when you need a user to select between one of several
+ options that are shown as pills. Often this will be a status, such as marking
+ an item “closed”, “draft”, etc.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-pillselect--demo)
+
+ @see [Design Guidelines](https://design.procore.com/pill-select)
+
+ */
+export var PillSelect = React.forwardRef(function PillSelect(_a, ref) {
+    var afterHide_ = _a.afterHide, afterShow_ = _a.afterShow, _b = _a.getColor, getColor = _b === void 0 ? defaultGetColor : _b, _c = _a.getGroup, getGroup = _c === void 0 ? defaultGetGroup : _c, _d = _a.getId, getId = _d === void 0 ? defaultGetId : _d, _e = _a.getLabel, getLabel = _e === void 0 ? defaultGetLabel : _e, _f = _a.getSuggested, getSuggested = _f === void 0 ? defaultGetSuggested : _f, _g = _a.groupGetId, groupGetId = _g === void 0 ? defaultGetId : _g, _h = _a.groupGetLabel, groupGetLabel = _h === void 0 ? defaultGetLabel : _h, optgroups = _a.optgroups, _j = _a.options, options = _j === void 0 ? emptyArr : _j, value = _a.value, props = __rest(_a, ["afterHide", "afterShow", "getColor", "getGroup", "getId", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "optgroups", "options", "value"]);
+    var _k = React.useMemo(function () {
+        if (!value) {
+            return {};
+        }
+        return {
+            color: getColor(value),
+            id: getId(value),
+            label: getLabel(value),
+        };
+    }, [getColor, getId, getLabel, value]), color = _k.color, id = _k.id, label = _k.label;
+    var optionsByGroup = React.useMemo(function () {
+        return optgroups === null || optgroups === void 0 ? void 0 : optgroups.map(function (optgroup) { return ({
+            optgroup: optgroup,
+            options: options.filter(function (option) { return getGroup(option) === groupGetId(optgroup); }),
+        }); }).filter(function (_a) {
+            var options = _a.options;
+            return options.length;
+        });
+    }, [options, optgroups, groupGetId, getGroup]);
+    var _l = React.useState(false), isOpened = _l[0], setIsOpened = _l[1];
+    var afterShow = React.useCallback(function () {
+        setIsOpened(true);
+        afterShow_ === null || afterShow_ === void 0 ? void 0 : afterShow_();
+    }, [afterShow_]);
+    var afterHide = React.useCallback(function () {
+        setIsOpened(false);
+        afterHide_ === null || afterHide_ === void 0 ? void 0 : afterHide_();
+    }, [afterHide_]);
+    return (React.createElement(Select, __assign({ afterHide: afterHide, afterShow: afterShow, label: label ? (React.createElement(OverflowObserver, null, function (_a) {
+            var isOverflowing = _a.isOverflowing, ref = _a.ref;
+            var pill = (React.createElement(PillSelectLabel, { color: color, ref: ref }, label));
+            var showTooltip = isOverflowing && !isOpened;
+            return (React.createElement(PillSelectLabelWrapper, { disabled: props.disabled }, showTooltip ? (React.createElement(Tooltip, { trigger: "hover", overlay: label }, pill)) : (pill)));
+        })) : null }, props, { ref: ref }), optionsByGroup ? (optionsByGroup.map(function (_a) {
+        var optgroup = _a.optgroup, options = _a.options;
+        return (React.createElement(React.Fragment, { key: groupGetId(optgroup) },
+            React.createElement(PillSelectOptGroup, { key: groupGetId(optgroup) }, groupGetLabel(optgroup)),
+            options.map(function (option) { return (React.createElement(PillSelectOption, { key: getId(option), color: getColor(option), label: getLabel(option), selected: getId(option) === id, suggested: getSuggested(option), value: option })); })));
+    })) : (React.createElement(React.Fragment, null, options.map(function (option) { return (React.createElement(PillSelectOption, { key: getId(option), color: getColor(option), label: getLabel(option), selected: getId(option) === id, suggested: getSuggested(option), value: option })); })))));
+});
+PillSelect.displayName = 'PillSelect';
+//# sourceMappingURL=PillSelect.js.map

package/dist/PillSelect/PillSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillSelect.js","sourceRoot":"","sources":["../../src/PillSelect/PillSelect.tsx"],"names":[],"mappings":"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"}

package/dist/PillSelect/PillSelect.styles.js

@@ -0,0 +1,19 @@
+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 { colors } from '../_styles/colors';
+import { getEllipsis } from '../_styles/mixins';
+import { spacing } from '../_styles/spacing';
+import { Pill } from '../Pill';
+var checkedIconPlaceholderWidth = 32;
+export var PillSelectOptionWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+export var PillSelectCheckedContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: inline-flex;\n  padding-left: ", "px;\n  width: ", "px;\n"], ["\n  align-items: center;\n  color: ", ";\n  display: inline-flex;\n  padding-left: ", "px;\n  width: ", "px;\n"])), colors.blue50, spacing.sm, checkedIconPlaceholderWidth);
+export var PillSelectLabel = styled(Pill)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis);
+export var PillSelectLabelWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  max-width: 100%;\n  pointer-events: auto;\n\n  ", "\n"], ["\n  display: flex;\n  max-width: 100%;\n  pointer-events: auto;\n\n  ", "\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=PillSelect.styles.js.map

package/dist/PillSelect/PillSelect.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillSelect.styles.js","sourceRoot":"","sources":["../../src/PillSelect/PillSelect.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,IAAM,2BAA2B,GAAG,EAAE,CAAA;AAEtC,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,oJAAA,iFAIhD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,mLAAA,qCAEzC,EAAa,8CAEN,EAAU,gBACjB,EAA2B,OACrC,KAJU,MAAM,CAAC,MAAM,EAEN,OAAO,CAAC,EAAE,EACjB,2BAA2B,CACrC,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,+EAAA,MACvC,EAAW,IACd,KADG,WAAW,CACd,CAAA;AAED,MAAM,CAAC,IAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,gJAAwB,uEAKpE,EAIC,IACJ,KALG,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ,IACR,GAAG,wGAAA,qCAEF,IAAA;AAHD,CAGC,CACJ,CAAA"}

package/dist/PillSelect/PillSelect.types.d.ts

@@ -0,0 +1,112 @@
+import { PillColor } from '../Pill/Pill.types';
+import { SelectOptionProps, SelectProps } from '../Select';
+declare type Id = string | number;
+export interface PillOption {
+    /**
+     * @since 10.19.0
+     */
+    color: PillColor;
+    /**
+     * @since 10.19.0
+     */
+    groupId?: Id;
+    /**
+     * @since 10.19.0
+     */
+    id: Id;
+    /**
+     * @since 10.19.0
+     */
+    label: string;
+    /**
+     * @since 10.19.0
+     */
+    suggested?: SelectOptionProps['suggested'];
+}
+export interface PillOptionProps extends SelectOptionProps {
+    /**
+     * @since 10.19.0
+     */
+    color: PillOption['color'];
+    /**
+     * @since 10.19.0
+     */
+    label: PillOption['label'];
+}
+export interface PillOptGroup {
+    /**
+     * @since 10.19.0
+     */
+    id: Id;
+    /**
+     * @since 10.19.0
+     */
+    label: string;
+}
+export interface PillSelectProps<Option = PillOption, OptionGroup = PillOptGroup> extends Omit<SelectProps, 'label'> {
+    /**
+     * A function returning the display color of an option's `Pill`
+     * `(option: unknown) => PillColor`
+     * @defaultValue `(option) => (option as PillOption).color`
+     * @since 10.19.0
+     */
+    getColor?: (option: Option) => PillOption['color'];
+    /**
+     * A function returning group ID for a given option to define a relation to `optgroups`
+     * `(option: unknown) => string | number`
+     * @defaultValue `(option) => (option as PillOption).groupId`
+     * @since 10.19.0
+     */
+    getGroup?: (option: Option) => PillOption['groupId'];
+    /**
+     * A function returning ID of a given option
+     * `(option: unknown) => string | number`
+     * @defaultValue `(option) => (option as PillOption).id`
+     * @since 10.19.0
+     */
+    getId?: (option: Option) => PillOption['id'];
+    /**
+     * A function returning label of an option
+     * `(option: unknown) => string`
+     * @defaultValue `(option) => (option as PillOption).label`
+     * @since 10.19.0
+     */
+    getLabel?: (option: Option) => PillOption['label'];
+    /**
+     * A function returning `boolean` value to suggest this option if nothing is selected.
+     * `(option: unknown) => boolean`
+     * @defaultValue `(option) => (option as PillOption).suggested`
+     * @since 10.19.0
+     */
+    getSuggested?: (option: Option) => PillOption['suggested'];
+    /**
+     * A function returning the ID of a group
+     * `(group: unknown) => string | number`
+     * @defaultValue `(group) => (group as PillOptgroup).id`
+     * @since 10.19.0
+     */
+    groupGetId?: (group: OptionGroup) => PillOptGroup['id'];
+    /**
+     * A function returning label of a group
+     * `(group: unknown) => string`
+     * @defaultValue `(group) => (group as PillOptgroup).label`
+     * @since 10.19.0
+     */
+    groupGetLabel?: (group: OptionGroup) => PillOptGroup['label'];
+    /**
+     * Array of available options
+     * @since 10.19.0
+     */
+    options?: Option[];
+    /**
+     * Array of available option groups
+     * @since 10.19.0
+     */
+    optgroups?: OptionGroup[];
+    /**
+     * Currently selected value
+     * @since 10.19.0
+     */
+    value: Option;
+}
+export {};

package/dist/PillSelect/PillSelect.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillSelect.types.js","sourceRoot":"","sources":["../../src/PillSelect/PillSelect.types.ts"],"names":[],"mappings":""}

package/dist/PillSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { PillSelect } from './PillSelect';
+export { PillOptionProps, PillSelectProps } from './PillSelect.types';

package/dist/PillSelect/index.js

@@ -0,0 +1,2 @@
+export { PillSelect } from './PillSelect';
+//# sourceMappingURL=index.js.map

package/dist/PillSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PillSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DivAttributes } from '../_utils/types';
+import { PopoverContentProps, PopoverProps } from './Popover.types';
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {
+    Content: React.ForwardRefExoticComponent<DivAttributes & PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/Popover/Popover.js

@@ -0,0 +1,61 @@
+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;
+};
+import React from 'react';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { isReactElement } from '../_utils/isReactElement';
+import { OverlayTrigger } from '../OverlayTrigger';
+import { StyledPopover, StyledPopoverContent } from './Popover.styles';
+var Content = React.forwardRef(function Content(_a, ref) {
+    var children = _a.children, _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, props = __rest(_a, ["children", "fluid", "placement"]);
+    return (React.createElement(StyledPopover, { ref: ref },
+        React.createElement(StyledPopoverContent, __assign({}, props, { "$fluid": fluid, "$placement": placement }), children)));
+});
+/**
+
+ We use popovers to display more of an item’s information or details on hover.
+ This may be used to show additional fields in an item’s form that aren’t shown
+ by default in the UI. Oftentimes, there will be a visual queue to indicate that
+ more information is available.
+
+ Do not use popovers to display large amounts of information, perform data
+ entry, or use as a replacement for an overflow, menu, or modal.
+
+ If you want to show descriptive / educational information about an item,
+ use a tooltip.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-popover--demo)
+
+ @see [Design Guidelines](https://design.procore.com/popover)
+
+ */
+var Popover_ = React.forwardRef(function Popover(_a, ref) {
+    var children = _a.children, _b = _a.initialIsVisible, initialIsVisible = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, overlay = _a.overlay, props = __rest(_a, ["children", "initialIsVisible", "placement", "overlay"]);
+    var overlayNode = isReactElement(overlay) ? (React.cloneElement(overlay, { placement: placement })) : (React.createElement(React.Fragment, null));
+    return (React.createElement(OverlayTrigger, __assign({}, __assign(__assign({}, props), { initialIsVisible: initialIsVisible, overlay: overlayNode, placement: placement, ref: ref, restoreFocusOnHide: false, shrinkOverlay: true })), children));
+});
+Popover_.displayName = 'Popover';
+Content.displayName = 'Popover.Content';
+export var Popover = addSubcomponents({ Content: Content }, Popover_);
+//# sourceMappingURL=Popover.js.map

package/dist/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGtE,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAG9B,SAAS,OAAO,CAChB,EAAwD,EACxD,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAK,KAAK,cAAtD,kCAAwD,CAAF;IAGtD,OAAO,CACL,oBAAC,aAAa,IAAC,GAAG,EAAE,GAAG;QACrB,oBAAC,oBAAoB,eAAK,KAAK,cAAU,KAAK,gBAAc,SAAS,KAClE,QAAQ,CACY,CACT,CACjB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAA4B,SAAS,OAAO,CAC3E,EAA4E,EAC5E,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,OAAO,aAAA,EAAK,KAAK,cAA1E,wDAA4E,CAAF;IAG1E,IAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAC5C,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,WAAA,EAAE,CAAC,CAC3C,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,CAAC,QAAQ,OAAG,CACnB,CAAA;IAED,OAAO,CACL,oBAAC,cAAc,qCAER,KAAK,KACR,gBAAgB,kBAAA,EAChB,OAAO,EAAE,WAAW,EACpB,SAAS,WAAA,EACT,GAAG,KAAA,EACH,kBAAkB,EAAE,KAAK,EACzB,aAAa,EAAE,IAAI,MAGpB,QAAQ,CACM,CAClB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAA;AAEhC,OAAO,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAEvC,MAAM,CAAC,IAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,OAAO,SAAA,EAAE,EAAE,QAAQ,CAAC,CAAA"}

package/dist/Popover/Popover.styles.d.ts

@@ -0,0 +1,8 @@
+import { Placement } from '../_utils/placement';
+interface StyledPopoverProps {
+    $fluid: boolean;
+    $placement: Placement;
+}
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<"span", any, Required<StyledPopoverProps>, never>;
+export declare const StyledPopover: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/Popover/Popover.styles.js

@@ -0,0 +1,22 @@
+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 { getArrowPlacement } from '../_styles/arrows';
+import { borderRadius } from '../_styles/borderRadius';
+import { colors } from '../_styles/colors';
+import { getShadow } from '../_styles/shadows';
+var popoverArrowSize = 6;
+export var StyledPopoverContent = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  display: inline-block;\n  max-width: 250px;\n  position: relative;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  display: inline-block;\n  max-width: 250px;\n  position: relative;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), colors.white, borderRadius.md, colors.gray15, getShadow(3), function (_a) {
+    var $placement = _a.$placement;
+    return getArrowPlacement(popoverArrowSize, 'white', $placement);
+}, function (_a) {
+    var $fluid = _a.$fluid;
+    if ($fluid) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        max-width: none;\n      "], ["\n        max-width: none;\n      "])));
+    }
+});
+export var StyledPopover = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=Popover.styles.js.map

package/dist/Popover/Popover.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../src/Popover/Popover.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,IAAM,gBAAgB,GAAG,CAAC,CAAA;AAO1B,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,gPAA8B,wBACvD,EAAY,sBACf,EAAe,gBACvB,EAAa,+EAKpB,EAAY,QAEZ,EACwD,QAExD,EAMD,IACF,KAnBqB,MAAM,CAAC,KAAK,EACf,YAAY,CAAC,EAAE,EACvB,MAAM,CAAC,MAAM,EAKpB,SAAS,CAAC,CAAC,CAAC,EAEZ,UAAC,EAAc;QAAZ,UAAU,gBAAA;IACb,OAAA,iBAAiB,CAAC,gBAAgB,EAAE,OAAO,EAAE,UAAU,CAAC;AAAxD,CAAwD,EAExD,UAAC,EAAU;QAAR,MAAM,YAAA;IACT,IAAI,MAAM,EAAE;QACV,OAAO,GAAG,uGAAA,oCAET,KAAA;KACF;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,iGAAA,8BAEtC,IAAA,CAAA"}