@deque/cauldron-react 6.2.0 → 6.2.1-canary.2d4991a8

package/lib/{src/components → components}/Link/index.d.ts

@@ -4,8 +4,5 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     variant?: 'button' | 'button-secondary';
     thin?: boolean;
 }
-declare const Link: {
-    ({ children, linkRef, className, variant, thin, ...other }: LinkProps): React.JSX.Element;
-    displayName: string;
-};
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/lib/{src/components → components}/RadioGroup/index.d.ts

@@ -12,7 +12,6 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     value?: any;
     inline?: boolean;
     onChange?: (radio: RadioItem, input: HTMLElement) => void;
-    hasLabel?: never;
 }
 declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default RadioGroup;

package/lib/components/SearchField/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import type { ContentNode } from '../../types';
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label: ContentNode;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+    hideLabel?: boolean;
+    isForm?: boolean;
+}
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default SearchField;

package/lib/components/internal/TextFieldWrapper/index.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export interface TextFieldWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+declare const TextFieldWrapper: React.ForwardRefExoticComponent<TextFieldWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default TextFieldWrapper;

package/lib/{src/index.d.ts → index.d.ts}

@@ -30,6 +30,7 @@ export { default as Checkbox } from './components/Checkbox';
 export { default as Tooltip, TooltipHead, TooltipContent } from './components/Tooltip';
 export { default as TooltipTabstop } from './components/TooltipTabstop';
 export { default as TextField } from './components/TextField';
+export { default as SearchField } from './components/SearchField';
 export { default as ClickOutsideListener } from './components/ClickOutsideListener';
 export { default as ExpandCollapsePanel, PanelTrigger } from './components/ExpandCollapsePanel';
 export { default as Sidebar, SideBarItem } from './components/SideBar';

package/lib/index.js

@@ -1968,15 +1968,15 @@ var Toast = /** @class */ (function (_super) {
     return Toast;
 }(React__default["default"].Component));
 
-var Link = function (_a) {
+var Link = React.forwardRef(function (_a, ref) {
     var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, thin = _a.thin, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant", "thin"]);
-    return (React__default["default"].createElement("a", tslib.__assign({ ref: linkRef, className: classNames__default["default"](className, {
+    return (React__default["default"].createElement("a", tslib.__assign({ ref: ref || linkRef, className: classNames__default["default"](className, {
             Link: !variant,
             'Button--primary': variant === 'button',
             'Button--secondary': variant === 'button-secondary',
             'Button--thin': thin
         }) }, other), children));
-};
+});
 Link.displayName = 'Link';
 
 var Loader = React__default["default"].forwardRef(function (_a, ref) {
@@ -2396,6 +2396,40 @@ var TextField = /** @class */ (function (_super) {
     return TextField;
 }(React__default["default"].Component));
 
+var TextFieldWrapper = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, otherProps = tslib.__rest(_a, ["className", "children"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TextFieldWrapper', className) }, otherProps, { ref: ref }), children));
+});
+TextFieldWrapper.displayName = 'TextFieldWrapper';
+
+var SearchField = React.forwardRef(function (_a, ref) {
+    var label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, onChange = _a.onChange, _c = _a.hideLabel, hideLabel = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Search...' : _d, _e = _a.isForm, isForm = _e === void 0 ? true : _e, propId = _a.id, propValue = _a.value, otherProps = tslib.__rest(_a, ["label", "defaultValue", "onChange", "hideLabel", "placeholder", "isForm", "id", "value"]);
+    var isControlled = typeof propValue !== 'undefined';
+    var _f = tslib.__read(React.useState(isControlled ? propValue : defaultValue), 2), value = _f[0], setValue = _f[1];
+    var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'search-field'), 1), id = _g[0];
+    var inputId = React.useRef(id).current;
+    var handleChange = function (e) {
+        var newValue = e.target.value;
+        if (typeof onChange === 'function') {
+            onChange(newValue, e);
+        }
+        if (isControlled) {
+            return;
+        }
+        setValue(newValue);
+    };
+    var Field = isForm ? 'form' : 'div';
+    return (React__default["default"].createElement(Field, { role: isForm ? 'search' : undefined, className: "SearchField", "aria-labelledby": isForm ? "".concat(inputId, "-label") : undefined },
+        hideLabel ? (React__default["default"].createElement(Offscreen, null,
+            React__default["default"].createElement("label", { htmlFor: inputId, id: "".concat(inputId, "-label") }, label))) : (React__default["default"].createElement("label", { className: "Field__label", htmlFor: inputId, id: "".concat(inputId, "-label") }, label)),
+        React__default["default"].createElement(TextFieldWrapper, { className: classNames__default["default"]({
+                'TextFieldWrapper--disabled': otherProps.disabled
+            }) },
+            React__default["default"].createElement(Icon, { type: "magnifying-glass", className: "SearchField__search-icon" }),
+            React__default["default"].createElement("input", tslib.__assign({ id: inputId, value: value, onChange: handleChange, placeholder: placeholder, ref: ref }, otherProps, { className: classNames__default["default"](otherProps.className, 'Field__text-input'), type: "search" })))));
+});
+SearchField.displayName = 'SearchField';
+
 SyntaxHighlighter__default["default"].registerLanguage('javascript', js__default["default"]);
 SyntaxHighlighter__default["default"].registerLanguage('css', css__default["default"]);
 SyntaxHighlighter__default["default"].registerLanguage('html', xml__default["default"]);
@@ -3712,9 +3746,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
             }), id: "".concat(id, "-label"), htmlFor: "".concat(id, "-input") },
             React__default["default"].createElement("span", null, label),
             isRequired && (React__default["default"].createElement("span", { className: "Field__required-text" }, requiredText))),
-        React__default["default"].createElement("div", { className: classNames__default["default"]('Combobox__input', {
-                'Combobox__input--error': hasError
-            }), 
+        React__default["default"].createElement(TextFieldWrapper, { className: classNames__default["default"]({ 'TextFieldWrapper--error': hasError }), 
             // We're handling click here to open the listbox when the wrapping element is clicked,
             // there's already keyboard handlers to open the listbox on the input element
             onClick: handleInputClick },
@@ -4029,6 +4061,7 @@ exports.ProgressBar = ProgressBar;
 exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;
 exports.Scrim = Scrim;
+exports.SearchField = SearchField;
 exports.Select = Select;
 exports.SideBar = SideBar;
 exports.SideBarItem = SideBarItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.2.0",
+  "version": "6.2.1-canary.2d4991a8",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -16,7 +16,7 @@
   "scripts": {
     "build": "yarn build:lib && yarn build:css",
     "prebuild:lib": "node scripts/buildIconTypes.js",
-    "build:lib": "rollup -c && tsc --declaration --emitDeclarationOnly --outDir lib",
+    "build:lib": "rollup -c",
     "build:css": "postcss --output=lib/cauldron.css src/index.css",
     "dev": "concurrently 'yarn build:css --watch' 'rollup -c --watch'",
     "prepublishOnly": "NODE_ENV=production yarn build",

package/lib/__tests__/setupTests.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-import 'jest-axe/extend-expect';

package/lib/src/axe.d.ts

@@ -1,3 +0,0 @@
-import { JestAxe } from 'jest-axe';
-declare const axe: JestAxe;
-export default axe;

package/lib/src/components/Button/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/components/Checkbox/Checkbox.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/components/Combobox/Combobox.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/components/Tag/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/components/TextField/TextField.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/components/Timeline/timeline.test.d.ts

@@ -1 +0,0 @@
-export {};