@procore/core-react 10.26.0 → 10.26.1-rc.2

package/dist/esm/components/SegmentedController/SegmentedController.styles.js

@@ -0,0 +1,34 @@
+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 { borderRadius } from '../../styles/borderRadius';
+import { colors } from '../../styles/colors';
+import { spacing } from '../../styles/spacing';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+export var StyledContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: ", ";\n  height: 36px;\n  justify-content: center;\n  width: ", ";\n"], ["\n  align-items: center;\n  display: ", ";\n  height: 36px;\n  justify-content: center;\n  width: ", ";\n"])), function (_a) {
+    var block = _a.block;
+    return (block ? 'flex' : 'inline-flex');
+}, function (_a) {
+    var block = _a.block;
+    return (block ? '100%' : null);
+});
+export var StyledSegment = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 0;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: flex;\n  flex: 1 1 auto;\n  height: 100%;\n  justify-content: center;\n  min-width: 0;\n  outline: 0;\n  padding: 0 ", "px;\n  position: relative;\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 0;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: flex;\n  flex: 1 1 auto;\n  height: 100%;\n  justify-content: center;\n  min-width: 0;\n  outline: 0;\n  padding: 0 ", "px;\n  position: relative;\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n"])), colors.gray85, spacing.md, colors.white, colors.gray45, function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    if (disabled) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        &,\n        &:hover,\n        &:disabled {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          pointer-events: none;\n        }\n      "], ["\n        &,\n        &:hover,\n        &:disabled {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          pointer-events: none;\n        }\n      "])), active ? colors.gray85 : colors.white, colors.gray85, active ? colors.white : colors.gray85);
+    }
+});
+export var StyledSegmentDisabledInteractiveWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n\n  // For all segments which are not the first child, hide the left border.\n  // This is the basis of all the styling so we can get that single pixel line\n  // between each segment\n  &:not(:first-child) ", " {\n    border-left-width: 0;\n  }\n\n  &:first-child ", " {\n    border-bottom-left-radius: ", "px;\n    border-top-left-radius: ", "px;\n\n    &:focus,\n    &.focus {\n      margin-left: 0;\n    }\n  }\n\n  &:last-child ", " {\n    border-bottom-right-radius: ", "px;\n    border-top-right-radius: ", "px;\n  }\n\n  & ", " {\n    &:focus,\n    &.focus {\n      border-color: ", ";\n\n      // If we hover or focus on a segment we want to show its left border\n      border-left-width: 1px !important;\n\n      // We also need to use a negative margin to account for the additional width\n      // from turning on the left border so we don't get shifting. However,\n      // we don't want to shift the first item because its border is always on\n      margin-left: -1px;\n\n      &:not(:disabled) {\n        // Custom focus style, not using the mixin because we need to have control\n        // over borders and outlines\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n        z-index: 1;\n      }\n    }\n  }\n\n  ", "\n"], ["\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n\n  // For all segments which are not the first child, hide the left border.\n  // This is the basis of all the styling so we can get that single pixel line\n  // between each segment\n  &:not(:first-child) ", " {\n    border-left-width: 0;\n  }\n\n  &:first-child ", " {\n    border-bottom-left-radius: ", "px;\n    border-top-left-radius: ", "px;\n\n    &:focus,\n    &.focus {\n      margin-left: 0;\n    }\n  }\n\n  &:last-child ", " {\n    border-bottom-right-radius: ", "px;\n    border-top-right-radius: ", "px;\n  }\n\n  & ", " {\n    &:focus,\n    &.focus {\n      border-color: ", ";\n\n      // If we hover or focus on a segment we want to show its left border\n      border-left-width: 1px !important;\n\n      // We also need to use a negative margin to account for the additional width\n      // from turning on the left border so we don't get shifting. However,\n      // we don't want to shift the first item because its border is always on\n      margin-left: -1px;\n\n      &:not(:disabled) {\n        // Custom focus style, not using the mixin because we need to have control\n        // over borders and outlines\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n        z-index: 1;\n      }\n    }\n  }\n\n  ", "\n"])), StyledSegment, StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, colors.gray85, colors.blue40, colors.blue40, function (_a) {
+    var _b = _a.$active, $active = _b === void 0 ? false : _b, _c = _a.$disabled, $disabled = _c === void 0 ? false : _c;
+    if (!$disabled) {
+        if ($active) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          & ", " {\n            &,\n            &:hover {\n              background-color: ", ";\n              border-color: ", ";\n              color: ", ";\n            }\n          }\n          & + * ", " {\n            // If a segment is active, the sibling to the right must have its left\n            // border turned on to match the spec with a gray line on either\n            // side of an active segment.\n            //\n            // !important is needed to override :not(:first-child) specificity\n            border-left-width: 1px !important;\n            margin-left: -1px !important;\n          }\n        "], ["\n          & ", " {\n            &,\n            &:hover {\n              background-color: ", ";\n              border-color: ", ";\n              color: ", ";\n            }\n          }\n          & + * ", " {\n            // If a segment is active, the sibling to the right must have its left\n            // border turned on to match the spec with a gray line on either\n            // side of an active segment.\n            //\n            // !important is needed to override :not(:first-child) specificity\n            border-left-width: 1px !important;\n            margin-left: -1px !important;\n          }\n        "])), StyledSegment, colors.blue50, colors.blue50, colors.white, StyledSegment);
+        }
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        & ", " {\n          &:hover,\n          &.hover {\n            background-color: ", ";\n            border-color: ", ";\n            color: ", ";\n          }\n        }\n      "], ["\n        & ", " {\n          &:hover,\n          &.hover {\n            background-color: ", ";\n            border-color: ", ";\n            color: ", ";\n          }\n        }\n      "])), StyledSegment, colors.gray94, colors.gray85, colors.gray45);
+    }
+});
+export var StyledLabel = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  ", ";\n\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), getTypographyIntent('body'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=SegmentedController.styles.js.map

package/dist/esm/components/SegmentedController/SegmentedController.styles.js.map

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

package/dist/esm/components/SegmentedController/SegmentedController.types.d.ts

@@ -0,0 +1,64 @@
+import { Placement, Props } from '../../utils/types';
+/**
+ * @deprecated Please use the `active` and `disabled` props
+ */
+export declare const segmentedControllerSegmentVariant: {
+    readonly active: "active";
+    readonly disabled: "disabled";
+    readonly none: "";
+};
+export interface SegmentedControllerProps extends Props {
+    /**
+     * The segment is active
+     * @since 10.19.0
+     * */
+    active?: number;
+    /**
+     * The segment controller is block sized
+     * @since 10.19.0
+     */
+    block?: boolean;
+    /**
+     * Disables all segments in the controller
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    onChange?: (active: number) => void;
+    /**
+     * @deprecated Please use the `block` prop
+     * @since 10.19.0
+     */
+    variant?: 'block' | '';
+}
+export interface SegmentedControllerSegmentProps extends Props {
+    /**
+     * The segment is active
+     * @since 10.19.0
+     */
+    active?: boolean;
+    /**
+     * Is the segment disabled
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    /**
+     * To change the tooltip placement
+     * @since 10.19.0
+     */
+    placement?: Placement;
+    /**
+     * The tooltip we want to display on hover
+     * @since 10.19.0
+     */
+    tooltip?: React.ReactNode;
+}
+export interface SegmentedControllerTooltipProps extends Props {
+    /**
+     * @since 10.19.0
+     */
+    overlay?: any;
+    /**
+     * @since 10.19.0
+     */
+    placement: Placement;
+}

package/dist/esm/components/SegmentedController/SegmentedController.types.js

@@ -0,0 +1,9 @@
+/**
+ * @deprecated Please use the `active` and `disabled` props
+ */
+export var segmentedControllerSegmentVariant = {
+    active: 'active',
+    disabled: 'disabled',
+    none: '',
+};
+//# sourceMappingURL=SegmentedController.types.js.map

package/dist/esm/components/SegmentedController/SegmentedController.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedController.types.js","sourceRoot":"","sources":["../../../../src/components/SegmentedController/SegmentedController.types.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,IAAM,iCAAiC,GAAG;IAC/C,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,EAAE;CACA,CAAA"}

package/dist/esm/components/SegmentedController/index.d.ts

@@ -0,0 +1 @@
+export { SegmentedController, SegmentedController as default, } from './SegmentedController';

package/dist/esm/components/SegmentedController/index.js

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

package/dist/esm/components/SegmentedController/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SegmentedController/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,mBAAmB,IAAI,OAAO,GAC/B,MAAM,uBAAuB,CAAA"}

package/dist/esm/components/Select/Select.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Props } from '../../utils/types';
+import { OptionProps, SelectButtonProps, SelectProps } from './Select.types';
+export declare const OptGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export declare const Option: React.ForwardRefExoticComponent<OptionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Button: React.ForwardRefExoticComponent<SelectButtonProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>> & {
+    Button: React.ForwardRefExoticComponent<SelectButtonProps & React.RefAttributes<HTMLDivElement>>;
+    Option: React.ForwardRefExoticComponent<OptionProps & React.RefAttributes<HTMLDivElement>>;
+    OptGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+};
+export default Select;

package/dist/esm/components/Select/Select.js

@@ -0,0 +1,160 @@
+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 { Clear } from '@procore/core-icons/dist';
+import { isNil } from 'ramda';
+import React from 'react';
+import { OverflowObserver } from '../../effects/OverflowObserver';
+import { Box } from '../../layouts/Box';
+import { addSubcomponents } from '../../utils/addSubcomponents';
+import { MenuImperative } from '../MenuImperative';
+import { Notation } from '../Notation';
+import { OverlayTrigger, useOverlayTriggerContext } from '../OverlayTrigger';
+import { Spinner } from '../Spinner';
+import { Tooltip } from '../Tooltip';
+import { StyledSelectArrow, StyledSelectArrowContainer, StyledSelectButton, StyledSelectButtonLabel, StyledSelectClearIcon, StyledSelectMenu, StyledSelectSpinner, } from './Select.styles';
+function noop() { }
+export var OptGroup = React.forwardRef(function (props, ref) { return (React.createElement(MenuImperative.Group, __assign({}, props, { clickable: false, ref: ref }))); });
+export var Option = React.forwardRef(function (_a, ref) {
+    var value = _a.value, props = __rest(_a, ["value"]);
+    return (React.createElement(MenuImperative.Item, __assign({ ref: ref }, props, { item: value })));
+});
+export var Button = React.forwardRef(function Button(_a, ref) {
+    var _b = _a.block, block = _b === void 0 ? false : _b, children = _a.children, clearRef = _a.clearRef, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, label = _a.label, _e = _a.loading, loading = _e === void 0 ? false : _e, onClear = _a.onClear, _f = _a.open, open = _f === void 0 ? false : _f, placeholder = _a.placeholder, qa = _a.qa, _g = _a.tabIndex, tabIndex = _g === void 0 ? 0 : _g, _h = _a.isMenuOpened, isMenuOpened = _h === void 0 ? false : _h, props = __rest(_a, ["block", "children", "clearRef", "disabled", "error", "label", "loading", "onClear", "open", "placeholder", "qa", "tabIndex", "isMenuOpened"]);
+    var hasClearIcon = !disabled && !loading && Boolean(label);
+    var content = children || label || placeholder;
+    return (React.createElement(StyledSelectButton, __assign({ ref: ref, tabIndex: disabled ? -1 : tabIndex, role: "button", "$block": block, "$error": error, "$disabled": disabled, "$hasClearIcon": hasClearIcon, "$loading": loading, "$open": open, "$placeholder": !label }, props),
+        React.createElement(OverflowObserver, null, function (_a) {
+            var isOverflowingX = _a.isOverflowingX, overflowRef = _a.ref;
+            var showTooltip = !disabled && isOverflowingX && !isMenuOpened;
+            var trigger = (React.createElement(StyledSelectButtonLabel, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.label, "$hoverable": showTooltip, ref: overflowRef }, content));
+            return showTooltip ? (React.createElement(Tooltip, { trigger: "hover", overlay: content }, trigger)) : (trigger);
+        }),
+        onClear && (React.createElement(StyledSelectClearIcon, { ref: clearRef, "data-qa": (qa === null || qa === void 0 ? void 0 : qa.clear) || 'core-select-clear', size: "sm", variant: "tertiary", icon: React.createElement(Clear, null), onClick: onClear, onMouseDown: function (e) { return e.preventDefault(); }, tabIndex: -1 })),
+        loading ? (React.createElement(StyledSelectSpinner, null,
+            React.createElement(Spinner, { size: "xs" }))) : (React.createElement(StyledSelectArrowContainer, null,
+            React.createElement(StyledSelectArrow, null)))));
+});
+var SelectMenu = React.forwardRef(function SelectMenu(_a, ref) {
+    var onSearch_ = _a.onSearch, footer = _a.footer, emptyMessage = _a.emptyMessage, optionsRef = _a.optionsRef, children = _a.children, i18nScope = _a.i18nScope, _b = _a.onSelect, onSelect_ = _b === void 0 ? noop : _b, menuRef = _a.menuRef, props = __rest(_a, ["onSearch", "footer", "emptyMessage", "optionsRef", "children", "i18nScope", "onSelect", "menuRef"]);
+    var ctx = useOverlayTriggerContext();
+    var _c = React.useState(''), searchValue = _c[0], setSearchValue = _c[1];
+    React.useEffect(function () {
+        var _a;
+        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
+    }, [menuRef, searchValue]);
+    React.useEffect(function () {
+        var _a, _b;
+        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightSuggested();
+        (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.highlightSelected();
+    }, [menuRef]);
+    function onSelect(selection) {
+        onSelect_(selection);
+        ctx.hide(selection.event);
+    }
+    function onSearch(event) {
+        setSearchValue(event.target.value);
+        onSearch_ === null || onSearch_ === void 0 ? void 0 : onSearch_(event);
+    }
+    return (React.createElement(StyledSelectMenu, { ref: ref, shadowStrength: 2 },
+        React.createElement(MenuImperative, __assign({}, props, { ref: menuRef, onSelect: onSelect, circular: true }),
+            onSearch_ && (React.createElement(MenuImperative.Search, { autoComplete: "false", autoFocus: true, i18nScope: i18nScope, onChange: onSearch })),
+            React.Children.count(children) ? (React.createElement(MenuImperative.Options, { ref: optionsRef }, children)) : (React.createElement(Box, { padding: "md lg" },
+                React.createElement(Notation, { variant: "pagination" }, emptyMessage))),
+            footer && React.createElement(MenuImperative.Footer, null, footer))));
+});
+/**
+
+ We use single selects to allow our users to choose a single option from a list,
+ presented in a dropdown. We typically see these selects on forms.
+
+ If you want users to select multiple options, use a multi select, group select,
+ and tiered select if you want users to select from a tiered set of options,
+ use a tiered select.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-select--demo)
+
+ @see [Design Guidelines](https://design.procore.com/select)
+
+ */
+var Select_ = React.forwardRef(function Select(_a, forwardRef) {
+    var _b = _a.afterHide, afterHide_ = _b === void 0 ? noop : _b, _c = _a.afterShow, afterShow_ = _c === void 0 ? noop : _c, _d = _a.beforeHide, beforeHide = _d === void 0 ? function () { return true; } : _d, _e = _a.beforeShow, beforeShow = _e === void 0 ? function () { return true; } : _e, _f = _a.block, block = _f === void 0 ? false : _f, children = _a.children, className = _a.className, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.emptyMessage, emptyMessage = _h === void 0 ? 'No results' : _h, _j = _a.error, error = _j === void 0 ? false : _j, footer = _a.footer, _k = _a.hideDelay, hideDelay = _k === void 0 ? 100 : _k, _l = _a.i18nScope, i18nScope = _l === void 0 ? 'core.select' : _l, _m = _a.label, label = _m === void 0 ? '' : _m, _o = _a.loading, loading = _o === void 0 ? false : _o, onClear_ = _a.onClear, _p = _a.onKeyDown, onKeyDown_ = _p === void 0 ? noop : _p, onScrollBottom = _a.onScrollBottom, onSearch = _a.onSearch, _q = _a.onSelect, onSelect = _q === void 0 ? noop : _q, optionsRef = _a.optionsRef, placeholder = _a.placeholder, _r = _a.placement, placement = _r === void 0 ? 'bottom-left' : _r, _s = _a.showDelay, showDelay = _s === void 0 ? 0 : _s, _t = _a.tabIndex, tabIndex = _t === void 0 ? 0 : _t, qa = _a.qa, props = __rest(_a, ["afterHide", "afterShow", "beforeHide", "beforeShow", "block", "children", "className", "disabled", "emptyMessage", "error", "footer", "hideDelay", "i18nScope", "label", "loading", "onClear", "onKeyDown", "onScrollBottom", "onSearch", "onSelect", "optionsRef", "placeholder", "placement", "showDelay", "tabIndex", "qa"]);
+    var menuRef = React.useRef(null);
+    var overlayTriggerRef = React.useRef(null);
+    var ref = forwardRef || overlayTriggerRef;
+    var _u = React.useState(false), isMenuOpened = _u[0], setIsMenuOpened = _u[1];
+    var clearRef = React.useRef(null);
+    function onKeyDown(e) {
+        var _a, _b, _c;
+        if (e.key === 'Up' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.prev();
+        }
+        else if (e.key === 'Down' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.next();
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.select(e);
+        }
+        onKeyDown_(e);
+    }
+    function afterHide() {
+        afterHide_();
+        setIsMenuOpened(false);
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch({
+            target: { value: '' },
+        });
+    }
+    var onClear = React.useCallback(function (e) {
+        var _a;
+        onClear_ === null || onClear_ === void 0 ? void 0 : onClear_(e);
+        // IE 11 fix
+        // Return focus back to trigger instead of the clear button
+        (_a = overlayTriggerRef === null || overlayTriggerRef === void 0 ? void 0 : overlayTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [onClear_]);
+    function afterShow() {
+        afterShow_();
+        setIsMenuOpened(true);
+    }
+    return (React.createElement(OverlayTrigger, { afterHide: afterHide, afterShow: afterShow, beforeHide: function (e) {
+            if (e.target === clearRef.current) {
+                return false;
+            }
+            return beforeHide(e);
+        }, beforeShow: beforeShow, canFlip: true, hideDelay: hideDelay, overlay: React.createElement(SelectMenu, { onSearch: onSearch, footer: footer, emptyMessage: emptyMessage, optionsRef: optionsRef, i18nScope: i18nScope, onSelect: onSelect, onScrollBottom: onScrollBottom, menuRef: menuRef }, children), placement: placement, ref: ref, showDelay: showDelay, trigger: disabled ? 'none' : 'click' },
+        React.createElement(Button, __assign({}, props, { block: block, className: className, clearRef: clearRef, disabled: disabled, error: error, label: label, loading: loading, placeholder: placeholder, onKeyDown: onKeyDown, onClear: isNil(onClear_) ? onClear_ : onClear, isMenuOpened: isMenuOpened, tabIndex: tabIndex, qa: qa }))));
+});
+Select_.displayName = 'Select';
+Button.displayName = 'Select.Button';
+Option.displayName = 'Select.Option';
+OptGroup.displayName = 'Select.OptGroup';
+export var Select = addSubcomponents({
+    Button: Button,
+    Option: Option,
+    OptGroup: OptGroup,
+}, Select_);
+export default Select;
+//# sourceMappingURL=Select.js.map

package/dist/esm/components/Select/Select.js.map

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

package/dist/esm/components/Select/Select.styles.d.ts

@@ -0,0 +1,22 @@
+export declare const dataQa: {
+    focused: string;
+    hovered: string;
+};
+export declare const tableSelectClassName = "select--table";
+export declare const StyledSelectMenu: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../utils/types").DivAttributes & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledSelectButtonLabel: import("styled-components").StyledComponent<"div", any, {
+    $hoverable: boolean;
+}, never>;
+export declare const StyledSelectSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelectArrowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelectArrow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelectClearIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const StyledSelectButton: import("styled-components").StyledComponent<"div", any, {
+    $block: boolean;
+    $disabled: boolean;
+    $error: boolean;
+    $loading: boolean;
+    $open: boolean;
+    $placeholder?: boolean | undefined;
+    $hasClearIcon: boolean;
+}, never>;

package/dist/esm/components/Select/Select.styles.js

@@ -0,0 +1,63 @@
+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 { arrowDown, arrowUp } from '../../styles/arrows';
+import { borderRadius } from '../../styles/borderRadius';
+import { colors } from '../../styles/colors';
+import { getEllipsis, getFocus } from '../../styles/mixins';
+import { spacing } from '../../styles/spacing';
+import { Button } from '../Button';
+import { Card } from '../Card';
+import { StyledCircle } from '../Spinner/Spinner.styles';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+export var dataQa = {
+    focused: 'core-select-focused',
+    hovered: 'core-select-hovered',
+};
+export var tableSelectClassName = 'select--table';
+var styledSelectButtonDefaultWidth = 248;
+export var StyledSelectMenu = styled(Card)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  max-height: 40vh;\n  max-width: ", "px;\n"], ["\n  display: flex;\n  max-height: 40vh;\n  max-width: ", "px;\n"])), styledSelectButtonDefaultWidth);
+export var StyledSelectButtonLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  flex-grow: 1;\n  margin-right: ", "px;\n  outline: none;\n  pointer-events: ", ";\n  user-select: none;\n"], ["\n  ", "\n  flex-grow: 1;\n  margin-right: ", "px;\n  outline: none;\n  pointer-events: ", ";\n  user-select: none;\n"])), getEllipsis(), spacing.sm, function (_a) {
+    var $hoverable = _a.$hoverable;
+    return ($hoverable ? 'initial' : 'none');
+});
+export var StyledSelectSpinner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  line-height: 0;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  line-height: 0;\n"])));
+export var StyledSelectArrowContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: inline-flex;\n  height: 16px;\n  justify-content: flex-end;\n  margin-left: ", "px;\n  width: 8px;\n"], ["\n  align-items: center;\n  display: inline-flex;\n  height: 16px;\n  justify-content: flex-end;\n  margin-left: ", "px;\n  width: 8px;\n"])), spacing.sm);
+export var StyledSelectArrow = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), arrowDown(4, 'gray45'));
+export var StyledSelectClearIcon = styled(Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+export var StyledSelectButton = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n\n  align-items: center;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: ", "px;\n  border-style: solid;\n  border-width: 1px;\n  color: ", ";\n  cursor: pointer;\n  display: inline-flex;\n  height: 36px;\n  min-height: 36px;\n  outline: none;\n  padding: 0 ", "px;\n  position: relative;\n  white-space: nowrap;\n  width: ", ";\n\n  &::placeholder {\n    border-color: ", ";\n  }\n\n  &:hover,\n  &:active,\n  &[data-qa=", "] {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &[data-qa=", "] {\n    ", "\n\n    ", " {\n      stroke: ", ";\n    }\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &.", " {\n    ", "\n\n    ", "\n  \n    ", "\n  }\n"], ["\n  ", "\n\n  align-items: center;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: ", "px;\n  border-style: solid;\n  border-width: 1px;\n  color: ", ";\n  cursor: pointer;\n  display: inline-flex;\n  height: 36px;\n  min-height: 36px;\n  outline: none;\n  padding: 0 ", "px;\n  position: relative;\n  white-space: nowrap;\n  width: ", ";\n\n  &::placeholder {\n    border-color: ", ";\n  }\n\n  &:hover,\n  &:active,\n  &[data-qa=", "] {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &[data-qa=", "] {\n    ", "\n\n    ", " {\n      stroke: ", ";\n    }\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &.", " {\n    ", "\n\n    ", "\n  \n    ", "\n  }\n"])), getTypographyIntent('body'), colors.white, colors.gray70, borderRadius.md, colors.gray15, spacing.md, function (_a) {
+    var $block = _a.$block;
+    return $block ? '100%' : "".concat(styledSelectButtonDefaultWidth, "px");
+}, colors.gray45, dataQa.hovered, colors.white, colors.gray45, colors.gray15, dataQa.focused, getFocus(), StyledCircle, colors.blue50, function (_a) {
+    var _b = _a.$placeholder, $placeholder = _b === void 0 ? false : _b;
+    return $placeholder && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      ", " {\n        color: ", ";\n      }\n    "], ["\n      ", " {\n        color: ", ";\n      }\n    "])), StyledSelectButtonLabel, colors.gray45);
+}, function (_a) {
+    var $disabled = _a.$disabled;
+    return $disabled && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      cursor: default;\n      pointer-events: none;\n\n      ", " {\n        color: ", ";\n      }\n\n      ", " {\n        ", "\n      }\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      cursor: default;\n      pointer-events: none;\n\n      ", " {\n        color: ", ";\n      }\n\n      ", " {\n        ", "\n      }\n    "])), colors.gray94, colors.gray70, colors.gray45, StyledSelectButtonLabel, colors.gray70, StyledSelectArrow, arrowDown(4, 'gray70'));
+}, function (_a) {
+    var $error = _a.$error, $disabled = _a.$disabled, $loading = _a.$loading;
+    if ($error && !$disabled) {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        &,\n        &:hover {\n          border-color: ", ";\n          border-color: var(--core-input-error-border-color, ", ");\n        }\n        &:hover:focus {\n          ", "\n        }\n      "], ["\n        &,\n        &:hover {\n          border-color: ", ";\n          border-color: var(--core-input-error-border-color, ", ");\n        }\n        &:hover:focus {\n          ", "\n        }\n      "])), colors.red50, colors.red50, getFocus());
+    }
+}, function (_a) {
+    var $hasClearIcon = _a.$hasClearIcon;
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", " {\n      opacity: ", ";\n    }\n  "], ["\n    ", " {\n      opacity: ", ";\n    }\n  "])), StyledSelectClearIcon, $hasClearIcon ? 1 : 0);
+}, function (_a) {
+    var $open = _a.$open;
+    return $open && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      ", " {\n        ", "\n      }\n    "], ["\n      ", " {\n        ", "\n      }\n    "])), StyledSelectArrow, arrowUp(4, 'gray45'));
+}, tableSelectClassName, function (_a) {
+    var $open = _a.$open;
+    return $open && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        background-color: ", ";\n\n        ", " {\n          white-space: nowrap;\n        }\n\n        ", " {\n          opacity: 1;\n          pointer-events: all;\n        }\n      "], ["\n        background-color: ", ";\n\n        ", " {\n          white-space: nowrap;\n        }\n\n        ", " {\n          opacity: 1;\n          pointer-events: all;\n        }\n      "])), colors.white, StyledSelectButtonLabel, StyledSelectArrow);
+}, function (_a) {
+    var $open = _a.$open, $hasClearIcon = _a.$hasClearIcon;
+    return $open &&
+        $hasClearIcon && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n        ", " {\n          opacity: 1;\n          pointer-events: all;\n        }\n      "], ["\n        ", " {\n          opacity: 1;\n          pointer-events: all;\n        }\n      "])), StyledSelectClearIcon);
+}, function (_a) {
+    var $open = _a.$open, _b = _a.$placeholder, $placeholder = _b === void 0 ? false : _b;
+    return $open &&
+        $placeholder && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n        ", " {\n          opacity: 1;\n          pointer-events: all;\n        }\n      "], ["\n        ", " {\n          opacity: 1;\n          pointer-events: all;\n        }\n      "])), StyledSelectButtonLabel);
+});
+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, templateObject_15;
+//# sourceMappingURL=Select.styles.js.map

package/dist/esm/components/Select/Select.styles.js.map

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