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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SearchProps } from './Search.types';
+/**
+
+ Our users use search to find items on a tool’s landing page or, in forms, users
+ use a search typeahead to find information to associate with the form.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-search--demo)
+
+ @see [Design Guidelines](https://design.procore.com/search-component)
+
+ */
+export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
+export default Search;

package/dist/esm/components/Search/Search.hooks.d.ts

@@ -0,0 +1,2 @@
+import { SearchHook, SearchHookConfig } from './Search.types';
+export declare function useSearch({ onChange: externalOnChange, onClear, onSubmit, typeahead, initialValue, }: SearchHookConfig): SearchHook;

package/dist/esm/components/Search/Search.hooks.js

@@ -0,0 +1,45 @@
+import React from 'react';
+// TODO remove this and do a breaking change on Search to `useImperativeHandle`
+// to support controlled/uncontrolled behavior
+export function useSearch(_a) {
+    var _b = _a.onChange, externalOnChange = _b === void 0 ? function () { } : _b, _c = _a.onClear, onClear = _c === void 0 ? function () { } : _c, _d = _a.onSubmit, onSubmit = _d === void 0 ? function () { } : _d, _e = _a.typeahead, typeahead = _e === void 0 ? false : _e, _f = _a.initialValue, initialValue = _f === void 0 ? '' : _f;
+    var _g = React.useState(initialValue), value = _g[0], setValue = _g[1];
+    React.useEffect(function () {
+        setValue(initialValue);
+    }, [initialValue]);
+    var isEmpty = value === '';
+    var showSearch = !typeahead || (typeahead && isEmpty);
+    function clear() {
+        setValue('');
+        onChange({ target: { value: '' } });
+        onClear();
+    }
+    function submit() {
+        onSubmit(value);
+    }
+    function onChange(e) {
+        setValue(e.target.value);
+        externalOnChange(e);
+    }
+    function onKeyDown(_a) {
+        var key = _a.key;
+        if (key === 'Enter') {
+            submit();
+        }
+        else if (key === 'Escape' || key === 'Esc') {
+            clear();
+        }
+    }
+    return {
+        clear: clear,
+        domHandlers: {
+            onChange: onChange,
+            onKeyDown: onKeyDown,
+        },
+        isEmpty: isEmpty,
+        showSearch: showSearch,
+        submit: submit,
+        value: value,
+    };
+}
+//# sourceMappingURL=Search.hooks.js.map

package/dist/esm/components/Search/Search.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.hooks.js","sourceRoot":"","sources":["../../../../src/components/Search/Search.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,+EAA+E;AAC/E,8CAA8C;AAC9C,MAAM,UAAU,SAAS,CAAC,EAMP;QALjB,gBAAqC,EAA3B,gBAAgB,mBAAG,cAAO,CAAC,KAAA,EACrC,eAAkB,EAAlB,OAAO,mBAAG,cAAO,CAAC,KAAA,EAClB,gBAAmB,EAAnB,QAAQ,mBAAG,cAAO,CAAC,KAAA,EACnB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA;IAEX,IAAA,KAAoB,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,EAA/C,KAAK,QAAA,EAAE,QAAQ,QAAgC,CAAA;IAEtD,KAAK,CAAC,SAAS,CAAC;QACd,QAAQ,CAAC,YAAY,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,IAAM,OAAO,GAAG,KAAK,KAAK,EAAE,CAAA;IAE5B,IAAM,UAAU,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,CAAA;IAEvD,SAAS,KAAK;QACZ,QAAQ,CAAC,EAAE,CAAC,CAAA;QACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAiB,CAAC,CAAA;QAClD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,SAAS,MAAM;QACb,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC;IAED,SAAS,QAAQ,CAAC,CAAc;QAC9B,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAExB,gBAAgB,CAAC,CAAC,CAAC,CAAA;IACrB,CAAC;IAED,SAAS,SAAS,CAAC,EAA8C;YAA5C,GAAG,SAAA;QACtB,IAAI,GAAG,KAAK,OAAO,EAAE;YACnB,MAAM,EAAE,CAAA;SACT;aAAM,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,KAAK,EAAE;YAC5C,KAAK,EAAE,CAAA;SACR;IACH,CAAC;IAED,OAAO;QACL,KAAK,OAAA;QACL,WAAW,EAAE;YACX,QAAQ,UAAA;YACR,SAAS,WAAA;SACV;QACD,OAAO,SAAA;QACP,UAAU,YAAA;QACV,MAAM,QAAA;QACN,KAAK,OAAA;KACN,CAAA;AACH,CAAC"}

package/dist/esm/components/Search/Search.js

@@ -0,0 +1,69 @@
+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, Search as SearchIcon } from '@procore/core-icons/dist';
+import React from 'react';
+import { mergeRefs } from '../../effects/mergeRefs';
+import { usingHookOrDefault } from '../../utils/usingHookOrDefault';
+import { useSearch } from './Search.hooks';
+import { StyledClearButton, StyledInput, StyledSearch, StyledSearchButton, } from './Search.styles';
+/**
+
+ Our users use search to find items on a tool’s landing page or, in forms, users
+ use a search typeahead to find information to associate with the form.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-search--demo)
+
+ @see [Design Guidelines](https://design.procore.com/search-component)
+
+ */
+export var Search = React.forwardRef(function Search(_a, ref) {
+    var _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, _c = _a.onClear, onClear = _c === void 0 ? function () { } : _c, _d = _a.onSubmit, onSubmit = _d === void 0 ? function () { } : _d, _e = _a.typeahead, typeahead = _e === void 0 ? false : _e, usingHook = _a.usingHook, _f = _a.value, value = _f === void 0 ? '' : _f, props = __rest(_a, ["onChange", "onClear", "onSubmit", "typeahead", "usingHook", "value"]);
+    var search = usingHookOrDefault(usingHook, useSearch)({
+        initialValue: value,
+        onChange: onChange,
+        onClear: onClear,
+        onSubmit: onSubmit,
+        typeahead: typeahead,
+    });
+    var inputRef = React.useRef(null);
+    var setFocusToInput = function () {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    return (React.createElement(StyledSearch, { "$typeahead": typeahead },
+        React.createElement(StyledInput, __assign({}, props, search.domHandlers, { "data-qa": "core-search-input", ref: mergeRefs(ref, inputRef), value: search.value })),
+        !search.isEmpty && (React.createElement(StyledClearButton, { "data-qa": "core-search-clear-icon", icon: React.createElement(Clear, null), size: "sm", variant: "tertiary", disabled: props.disabled, onClick: function () {
+                search.clear();
+                setFocusToInput();
+            }, tabIndex: -1 })),
+        search.showSearch && (React.createElement(StyledSearchButton, { "data-qa": "core-search-search-icon", icon: React.createElement(SearchIcon, null), size: "sm", variant: "tertiary", disabled: props.disabled || typeahead, onClick: function () {
+                search.submit();
+                setFocusToInput();
+            }, tabIndex: -1 }))));
+});
+Search.displayName = 'Search';
+export default Search;
+//# sourceMappingURL=Search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/components/Search/Search.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AAGxB;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,SAAS,MAAM,CACb,EAQC,EACD,GAAG;IARD,IAAA,gBAAmB,EAAnB,QAAQ,mBAAG,cAAO,CAAC,KAAA,EACnB,eAAkB,EAAlB,OAAO,mBAAG,cAAO,CAAC,KAAA,EAClB,gBAAmB,EAAnB,QAAQ,mBAAG,cAAO,CAAC,KAAA,EACnB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA,EACT,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACP,KAAK,cAPV,sEAQC,CADS;IAIV,IAAM,MAAM,GAAG,kBAAkB,CAC/B,SAAS,EACT,SAAS,CACV,CAAC;QACA,YAAY,EAAE,KAAK;QACnB,QAAQ,UAAA;QACR,OAAO,SAAA;QACP,QAAQ,UAAA;QACR,SAAS,WAAA;KACV,CAAC,CAAA;IAEF,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAErD,IAAM,eAAe,GAAG;QACtB,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;SACzB;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,YAAY,kBAAa,SAAS;QACjC,oBAAC,WAAW,eACN,KAAK,EACL,MAAM,CAAC,WAAW,eACd,mBAAmB,EAC3B,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,EAC7B,KAAK,EAAE,MAAM,CAAC,KAAK,IACnB;QACD,CAAC,MAAM,CAAC,OAAO,IAAI,CAClB,oBAAC,iBAAiB,eACR,wBAAwB,EAChC,IAAI,EAAE,oBAAC,KAAK,OAAG,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE;gBACP,MAAM,CAAC,KAAK,EAAE,CAAA;gBAEd,eAAe,EAAE,CAAA;YACnB,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH;QACA,MAAM,CAAC,UAAU,IAAI,CACpB,oBAAC,kBAAkB,eACT,yBAAyB,EACjC,IAAI,EAAE,oBAAC,UAAU,OAAG,EACpB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS,EACrC,OAAO,EAAE;gBACP,MAAM,CAAC,MAAM,EAAE,CAAA;gBAEf,eAAe,EAAE,CAAA;YACnB,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CACY,CAChB,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,7 @@
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StyledSearchButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const StyledClearButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const StyledSearch: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+    $typeahead: boolean;
+}, never>;

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

@@ -0,0 +1,38 @@
+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 { getFocus } from '../../styles/mixins';
+import { spacing } from '../../styles/spacing';
+import { Button } from '../Button';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+// Search has the buttons embedded into the input, So we have to do some manual
+// absolute positioning of the clear and search buttons and also adjust the
+// padding of the input so that the input text does not run into the buttons.
+// This used to be accomplished with IconLayout but that was a rarely used and
+// messy abstraction which was also intended to be used with clickable Icons
+// and not the new icon button style.
+var inputHeight = 36;
+var buttonSize = 24;
+var buttonTop = (inputHeight - buttonSize) / 2; // vertically center the buttons
+var searchRight = 6; // search icon sits 6px from the right edge
+var clearRight = searchRight + buttonSize + spacing.xs; // clear icon shifted
+var inputRight = clearRight + buttonSize + spacing.sm; // padding-right on the input to account for buttons
+var legacyTypeahedInputRight = searchRight + buttonSize + spacing.sm; // padding-right on the input to account for legacy typeahead prop
+// TODO unify all of these styles (and Typeahead) with Input once it has been converted to JSS
+export var StyledInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n\n  -webkit-appearance: textfield;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: ", "px;\n  border-style: solid;\n  border-width: 1px;\n  color: ", ";\n  display: block;\n  height: ", "px;\n  padding-left: ", "px;\n  width: 100%;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  &:focus,\n  &.focus {\n    ", "\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n"], ["\n  ", ";\n\n  -webkit-appearance: textfield;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: ", "px;\n  border-style: solid;\n  border-width: 1px;\n  color: ", ";\n  display: block;\n  height: ", "px;\n  padding-left: ", "px;\n  width: 100%;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  &:focus,\n  &.focus {\n    ", "\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n"])), getTypographyIntent('body'), colors.white, colors.gray70, borderRadius.md, colors.gray15, inputHeight, spacing.md, colors.gray45, getFocus(), colors.gray94, colors.gray70, colors.gray45);
+var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n"], ["\n  position: absolute;\n  top: ", "px;\n"])), buttonTop);
+export var StyledSearchButton = styled(StyledButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var StyledClearButton = styled(StyledButton)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var StyledSearch = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n\n  ", "\n"], ["\n  position: relative;\n  width: 100%;\n\n  ", "\n"])), function (_a) {
+    var $typeahead = _a.$typeahead;
+    if ($typeahead) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", " {\n          padding-right: ", "px;\n        }\n\n        ", ", ", " {\n          right: ", "px;\n        }\n      "], ["\n        ", " {\n          padding-right: ", "px;\n        }\n\n        ", ", ", " {\n          right: ", "px;\n        }\n      "])), StyledInput, legacyTypeahedInputRight, StyledSearchButton, StyledClearButton, searchRight);
+    }
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      ", " {\n        padding-right: ", "px;\n      }\n\n      ", " {\n        right: ", "px;\n      }\n\n      ", " {\n        right: ", "px;\n      }\n    "], ["\n      ", " {\n        padding-right: ", "px;\n      }\n\n      ", " {\n        right: ", "px;\n      }\n\n      ", " {\n        right: ", "px;\n      }\n    "])), StyledInput, inputRight, StyledSearchButton, searchRight, StyledClearButton, clearRight);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=Search.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.styles.js","sourceRoot":"","sources":["../../../../src/components/Search/Search.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AAErE,+EAA+E;AAC/E,2EAA2E;AAC3E,6EAA6E;AAC7E,8EAA8E;AAC9E,4EAA4E;AAC5E,qCAAqC;AAErC,IAAM,WAAW,GAAG,EAAE,CAAA;AAEtB,IAAM,UAAU,GAAG,EAAE,CAAA;AAErB,IAAM,SAAS,GAAG,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA,CAAC,gCAAgC;AAEjF,IAAM,WAAW,GAAG,CAAC,CAAA,CAAC,2CAA2C;AAEjE,IAAM,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,CAAA,CAAC,qBAAqB;AAE9E,IAAM,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,CAAA,CAAC,oDAAoD;AAE5G,IAAM,wBAAwB,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,CAAA,CAAC,kEAAkE;AAEzI,8FAA8F;AAC9F,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,KAAK,ivBAAA,MACnC,EAA2B,6DAGT,EAAY,qBAChB,EAAa,sBACZ,EAAe,8DAGvB,EAAa,kCAEZ,EAAW,uBACL,EAAU,wDAIf,EAAa,uRAiBpB,EAAU,iDAIQ,EAAa,uBACjB,EAAa,gBACpB,EAAa,UAEzB,KAxCG,mBAAmB,CAAC,MAAM,CAAC,EAGT,MAAM,CAAC,KAAK,EAChB,MAAM,CAAC,MAAM,EACZ,YAAY,CAAC,EAAE,EAGvB,MAAM,CAAC,MAAM,EAEZ,WAAW,EACL,OAAO,CAAC,EAAE,EAIf,MAAM,CAAC,MAAM,EAiBpB,QAAQ,EAAE,EAIQ,MAAM,CAAC,MAAM,EACjB,MAAM,CAAC,MAAM,EACpB,MAAM,CAAC,MAAM,CAEzB,CAAA;AAED,IAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,8GAAA,kCAE1B,EAAS,OACjB,KADQ,SAAS,CACjB,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,qEAAA,EAAE,IAAA,CAAA;AAExD,MAAM,CAAC,IAAM,iBAAiB,GAAG,MAAM,CAAC,YAAY,CAAC,qEAAA,EAAE,IAAA,CAAA;AAEvD,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,wHAGpC,+CAIE,EA0BD,IACF,KA3BG,UAAC,EAAc;QAAZ,UAAU,gBAAA;IACb,IAAI,UAAU,EAAE;QACd,OAAO,GAAG,uMAAA,YACN,EAAW,+BACM,EAAwB,4BAGzC,EAAkB,IAAK,EAAiB,uBAC/B,EAAW,wBAEvB,KAPG,WAAW,EACM,wBAAwB,EAGzC,kBAAkB,EAAK,iBAAiB,EAC/B,WAAW,EAEvB;KACF;IAED,OAAO,GAAG,oOAAA,UACN,EAAW,6BACM,EAAU,wBAG3B,EAAkB,qBACT,EAAW,wBAGpB,EAAiB,qBACR,EAAU,oBAEtB,KAXG,WAAW,EACM,UAAU,EAG3B,kBAAkB,EACT,WAAW,EAGpB,iBAAiB,EACR,UAAU,EAEtB;AACH,CAAC,CACF,CAAA"}

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

@@ -0,0 +1,111 @@
+import { ChangeEvent } from '../../state/TextEntry';
+import { InputProps } from '../Input';
+export interface SearchHookConfig {
+    /**
+     * @since 10.19.0
+     */
+    initialValue?: string;
+    /**
+     * @deprecated
+     *
+     * The `onChange` prop has been deprecated and will be removed in a future version.
+     *
+     * A new component, `Typeahead`, has been introduced with specific UX for typeahead-like
+     * behavior. Please use this component instead.
+     *
+     * **Before**
+     *
+     * <Search typeahead onChange={() => { ... }} />
+     *
+     * **After**
+     *
+     * <Typeahead onChange={() => { ... }} />
+     *
+     * @deprecatedSince 10.20.0
+     *
+     * @see https://core.procore.com/latest/web/components/typeahead/react/
+     * @since 10.19.0
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * @since 10.19.0
+     */
+    onClear?: () => void;
+    /**
+     * <div>Input handler for search variant</div>
+     * <CodeBlock>(value: string) => void</CodeBlock>
+     * @since 10.19.0
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * @deprecated
+     *
+     * The `typeahead` prop has been deprecated and will be removed in a future version.
+     *
+     * A new component, `Typeahead`, has been introduced with specific UX for typeahead-like
+     * behavior. Please use this component instead.
+     *
+     * **Before**
+     *
+     * <Search typeahead onChange={() => { ... }} />
+     *
+     * **After**
+     *
+     * <Typeahead onChange={() => { ... }} />
+     *
+     * @deprecatedSince 10.20.0
+     *
+     * @see https://core.procore.com/latest/web/components/typeahead/react/
+     * @since 10.19.0
+     */
+    typeahead?: boolean;
+}
+export interface SearchHook {
+    /**
+     * @since 10.19.0
+     */
+    domHandlers: {
+        onChange: (e: ChangeEvent) => void;
+        onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    };
+    /**
+     * @since 10.19.0
+     */
+    clear: () => void;
+    /**
+     * @since 10.19.0
+     */
+    isEmpty: boolean;
+    /**
+     * @since 10.19.0
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * @since 10.19.0
+     */
+    showSearch: boolean;
+    /**
+     * @since 10.19.0
+     */
+    submit: () => void;
+    /**
+     * @since 10.19.0
+     */
+    value: string;
+}
+export interface SearchProps extends Omit<InputProps, 'onSubmit'>, SearchHookConfig {
+    /**
+     * @since 10.19.0
+     */
+    autoFocus?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    usingHook?: SearchHook;
+    /**
+     * Initial value string
+     * @default ''
+     * @since 10.19.0
+     */
+    value?: string;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Search.types.js.map

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { ButtonAttributes, DivAttributes } from '../../utils/types';
+import { SegmentedControllerProps, SegmentedControllerSegmentProps, SegmentedControllerTooltipProps } from './SegmentedController.types';
+export declare const Segment: React.ForwardRefExoticComponent<ButtonAttributes & SegmentedControllerSegmentProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * @deprecated
+ *
+ * The `SegmentedController.Tooltip` component has been deprecated will be
+ * removed in a future version.
+ *
+ * Tooltips are now built into `SegmentedController.Segment`s, and can be added
+ * by configuring the `tooltip` prop.
+ *
+ * **Before**
+ *
+ * ```
+ * <SegmentedController>
+ *   <SegmentedController.Tooltip tooltip="Item 1 is the first item">
+ *     <SegmentedController.Segment>
+ *       Item 1
+ *     </SegmentedController.Segment>
+ *   </SegmentedController.Tooltip>
+ * </SegmentedController>
+ * ```
+ *
+ * **After**
+ *
+ * ```
+ * <SegmentedController>
+ *   <SegmentedController.Segment tooltip="Item 1 is the first item">
+ *     Item 1
+ *   </SegmentedController.Segment>
+ * </SegmentedController>
+ * ```
+ *
+ * @deprecatedSince 10.20.0
+ */
+export declare const Tooltip: React.ForwardRefExoticComponent<SegmentedControllerTooltipProps & React.RefAttributes<HTMLElement>>;
+/**
+ * @deprecated
+ *
+ * This `SegmentedController.State` utility has been deprecated. Please just
+ * use a simple state management hook instead.
+ *
+ *
+ * **Before**
+ *
+ * ```
+ * <SegmentedController.State>
+ *   {({ selectedIndex, setSelected }) => (
+ *     <SegmentedController>
+ *       <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>
+ *         Item 1
+ *       </SegmentedController.Segment>
+ *     </SegmentedController>
+ *   )}
+ * </SegmentedController.State>
+ * ```
+ *
+ * **After**
+ *
+ * ```
+ * const [selected, setSelected] = React.useState(0)
+ *
+ * <SegmentedController onChange={setSelected}>
+ *   <SegmentedController.Segment active={selectedIndex === 0}>
+ *     Item 1
+ *   </SegmentedController.Segment>
+ * </SegmentedController>
+ * ```
+ *
+ * @deprecatedSince 10.20.0
+ */
+export declare const State: (props: any) => JSX.Element;
+/**
+
+ Segmented controllers allow users to switch between related but mutually
+ exclusive content or actions.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-segmentedcontroller--demo)
+
+ @see [Design Guidelines](https://design.procore.com/segmented-controller)
+
+ */
+export declare const SegmentedController: React.ForwardRefExoticComponent<Omit<DivAttributes, "onChange"> & SegmentedControllerProps & React.RefAttributes<HTMLDivElement>> & {
+    Segment: React.ForwardRefExoticComponent<ButtonAttributes & SegmentedControllerSegmentProps & React.RefAttributes<HTMLButtonElement>>;
+    State: (props: any) => JSX.Element;
+    Tooltip: React.ForwardRefExoticComponent<SegmentedControllerTooltipProps & React.RefAttributes<HTMLElement>>;
+};

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

@@ -0,0 +1,152 @@
+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 { Tooltip as TooltipBase } from '../Tooltip';
+import { StyledContainer, StyledLabel, StyledSegment, StyledSegmentDisabledInteractiveWrapper, } from './SegmentedController.styles';
+function noop() { }
+function isSegment(node) {
+    return typeof node === 'object' && node.type === Segment;
+}
+var SegmentedController_ = React.forwardRef(function SegmentedController(_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.block, block = _b === void 0 ? false : _b, active = _a.active, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? noop : _d, props = __rest(_a, ["children", "className", "block", "active", "disabled", "onChange"]);
+    return (React.createElement(StyledContainer, __assign({ block: block, ref: ref }, props), React.Children.toArray(children)
+        .filter(function (child) { return isSegment(child); })
+        .map(function (child, i) {
+        return React.cloneElement(child, {
+            active: active === i || child.props.active,
+            disabled: disabled || child.props.disabled,
+            onClick: child.props.onClick
+                ? child.props.onClick
+                : function () { return onChange === null || onChange === void 0 ? void 0 : onChange(i); },
+        });
+    })));
+});
+export var Segment = React.forwardRef(function Segment(_a, ref) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, children = _a.children, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, tooltip = _a.tooltip, props = __rest(_a, ["active", "children", "disabled", "placement", "tooltip"]);
+    return (React.createElement(Tooltip, { overlay: tooltip, placement: placement },
+        React.createElement(StyledSegmentDisabledInteractiveWrapper, { "$active": active, "$disabled": disabled },
+            React.createElement(StyledSegment, __assign({}, props, { ref: ref, "aria-selected": active, active: active, disabled: disabled, type: "button" }),
+                React.createElement(StyledLabel, null, children)))));
+});
+/**
+ * @deprecated
+ *
+ * The `SegmentedController.Tooltip` component has been deprecated will be
+ * removed in a future version.
+ *
+ * Tooltips are now built into `SegmentedController.Segment`s, and can be added
+ * by configuring the `tooltip` prop.
+ *
+ * **Before**
+ *
+ * ```
+ * <SegmentedController>
+ *   <SegmentedController.Tooltip tooltip="Item 1 is the first item">
+ *     <SegmentedController.Segment>
+ *       Item 1
+ *     </SegmentedController.Segment>
+ *   </SegmentedController.Tooltip>
+ * </SegmentedController>
+ * ```
+ *
+ * **After**
+ *
+ * ```
+ * <SegmentedController>
+ *   <SegmentedController.Segment tooltip="Item 1 is the first item">
+ *     Item 1
+ *   </SegmentedController.Segment>
+ * </SegmentedController>
+ * ```
+ *
+ * @deprecatedSince 10.20.0
+ */
+export var Tooltip = React.forwardRef(function Tooltip(_a, ref) {
+    var children = _a.children, overlay = _a.overlay, props = __rest(_a, ["children", "overlay"]);
+    return overlay ? (React.createElement(TooltipBase, __assign({}, props, { overlay: overlay, ref: ref, trigger: "hover" }), children)) : (React.createElement(React.Fragment, null, children));
+});
+var withState = function (config) { return function (Component) { return function (props) {
+    var _a = React.useState(0), selectedIndex = _a[0], setSelected = _a[1];
+    return React.createElement(Component, __assign({}, __assign(__assign({}, props), { selectedIndex: selectedIndex, setSelected: setSelected })));
+}; }; };
+/**
+ * @deprecated
+ *
+ * This `SegmentedController.State` utility has been deprecated. Please just
+ * use a simple state management hook instead.
+ *
+ *
+ * **Before**
+ *
+ * ```
+ * <SegmentedController.State>
+ *   {({ selectedIndex, setSelected }) => (
+ *     <SegmentedController>
+ *       <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>
+ *         Item 1
+ *       </SegmentedController.Segment>
+ *     </SegmentedController>
+ *   )}
+ * </SegmentedController.State>
+ * ```
+ *
+ * **After**
+ *
+ * ```
+ * const [selected, setSelected] = React.useState(0)
+ *
+ * <SegmentedController onChange={setSelected}>
+ *   <SegmentedController.Segment active={selectedIndex === 0}>
+ *     Item 1
+ *   </SegmentedController.Segment>
+ * </SegmentedController>
+ * ```
+ *
+ * @deprecatedSince 10.20.0
+ */
+export var State = withState({})(function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return children(props);
+});
+SegmentedController_.displayName = 'SegmentedController';
+Segment.displayName = 'SegmentedController.Segment';
+Tooltip.displayName = 'SegmentedController.Tooltip';
+/**
+
+ Segmented controllers allow users to switch between related but mutually
+ exclusive content or actions.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-segmentedcontroller--demo)
+
+ @see [Design Guidelines](https://design.procore.com/segmented-controller)
+
+ */
+export var SegmentedController = addSubcomponents({
+    Segment: Segment,
+    State: State,
+    Tooltip: Tooltip,
+}, SegmentedController_);
+//# sourceMappingURL=SegmentedController.js.map

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

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

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

@@ -0,0 +1,12 @@
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, {
+    block?: boolean | undefined;
+}, never>;
+export declare const StyledSegment: import("styled-components").StyledComponent<"button", any, {
+    active: boolean;
+    disabled: boolean;
+}, never>;
+export declare const StyledSegmentDisabledInteractiveWrapper: import("styled-components").StyledComponent<"div", any, {
+    $active: boolean;
+    $disabled: boolean;
+}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"span", any, {}, never>;