@trackunit/react-components 0.0.198 → 0.0.199

package/components/Search/Search.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface SearchProps extends CommonProps {
+    /**
+     * The name for the HTML element.
+     */
+    name?: string;
+    /**
+     * Placeholder string to be shown in the search box.
+     */
+    placeholder?: string;
+    /**
+     * Whether the search box should widen to take up full width while in focus or not.
+     * If disabled, the search box takes up full width when not in focus.
+     */
+    widenInputOnFocus?: boolean;
+    /**
+     * Whether the border for the search box should be displayed while the search box is not in focus.
+     */
+    showBorderWhenNotInFocus?: boolean;
+    /**
+     * Value rendered in the search box.
+     */
+    value?: string;
+    /**
+     * Whether the search box is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify what if any permission the user agent has to provide automated assistance in filling out search values.
+     */
+    autoComplete?: string;
+    /**
+     * Event that occurs when the user releases a key.
+     */
+    onKeyUp?: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Event that occurs when there is a change.
+     */
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Event that occurs when the search box is on focus.
+     */
+    onFocus?: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Event that occurs when search box is blurred.
+     */
+    onBlur?: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Event that search box is cleared.
+     */
+    onClear?: () => void;
+}
+/**
+ * The Search component is used to render a search input field.
+ *
+ * @param {SearchProps} props - The props for the Search component
+ * @returns {JSX.Element} Search component
+ */
+export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, }: SearchProps) => JSX.Element;

package/components/Search/index.d.ts

@@ -0,0 +1 @@
+export * from "./Search";

package/components/index.d.ts

@@ -27,6 +27,7 @@ export * from "./Popover";
 export * from "./Popover/Popover";
 export * from "./Prompt";
 export * from "./RadioGroup";
+export * from "./Search";
 export * from "./SectionHeader";
 export * from "./Select";
 export * from "./SkeletonLines";

package/index.js

@@ -3617,6 +3617,81 @@ ${({
 }) => $disabled && tws`tu-radioitem__description--disabled`}
 `;
 
+/**
+ * A thin wrapper around the `BaseInput` component for text input fields.
+ *
+ * NOTE: If shown with a label, please use the `TextField` component instead.
+ */
+
+const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
+  ref: ref,
+  type: "text"
+}, props)));
+
+/**
+ * The Search component is used to render a search input field.
+ *
+ * @param {SearchProps} props - The props for the Search component
+ * @returns {JSX.Element} Search component
+ */
+
+const Search = ({
+  className,
+  placeholder = "Search",
+  value,
+  widenInputOnFocus,
+  showBorderWhenNotInFocus = false,
+  disabled,
+  onKeyUp,
+  onChange,
+  onFocus,
+  onBlur,
+  name,
+  onClear,
+  dataTestId,
+  autoComplete = "on"
+}) => {
+  return jsx(StyledTextInput, {
+    dataTestId: dataTestId,
+    name: name,
+    className: className,
+    "$widenOnFocus": widenInputOnFocus,
+    "$showBorderWhenNotInFocus": showBorderWhenNotInFocus,
+    placeholder: placeholder,
+    prefix: jsx(Icon$1, {
+      name: "SearchIcon",
+      size: "medium"
+    }),
+    suffix: onClear ? jsx("button", Object.assign({
+      "data-testid": `${dataTestId}_suffix_component`,
+      onClick: () => {
+        onClear();
+      }
+    }, {
+      children: jsx(Icon$1, {
+        name: "XIcon",
+        size: "small"
+      })
+    })) : undefined,
+    value: value,
+    disabled: disabled,
+    onChange: onChange,
+    onKeyUp: onKeyUp,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    autoComplete: autoComplete
+  });
+};
+const StyledTextInput = twx(TextInput)`
+  tu-search
+  ${({
+  $showBorderWhenNotInFocus
+}) => $showBorderWhenNotInFocus && tws`tu-search--border`}
+  ${({
+  $widenOnFocus
+}) => $widenOnFocus && tws`tu-search--widen-on-focus`}
+`;
+
 /**
  * The Spacer component is used for adding a bit of space in the ui.
  *
@@ -4739,17 +4814,6 @@ const TextAreaField = React.forwardRef((_a, ref) => {
   }));
 });
 
-/**
- * A thin wrapper around the `BaseInput` component for text input fields.
- *
- * NOTE: If shown with a label, please use the `TextField` component instead.
- */
-
-const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
-  ref: ref,
-  type: "text"
-}, props)));
-
 /**
  * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
  *
@@ -5492,4 +5556,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, DotsDirection, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MenuPlacement, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, DotsDirection, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MenuPlacement, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.198",
+  "version": "0.0.199",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {