@vectara/vectara-ui 16.11.0 → 16.12.0

package/lib/components/datePicker/DateRangePicker.d.ts

@@ -1,5 +1,6 @@
 import { BasicProps as DatePickerProps } from "./DatePicker";
 import { Props as PopoverProps } from "../popover/Popover";
+import { JSXElementConstructor, ReactElement } from "react";
 type DateProps = Pick<DatePickerProps, "placeholder" | "data-testid">;
 type Props = Pick<PopoverProps, "isOpen" | "setIsOpen" | "anchorSide" | "header"> & {
     startDate?: Date;
@@ -8,7 +9,8 @@ type Props = Pick<PopoverProps, "isOpen" | "setIsOpen" | "anchorSide" | "header"
     dateRangeProps?: DateProps;
     fullWidth?: boolean;
     canClear?: boolean;
+    input?: ReactElement<any, string | JSXElementConstructor<any>>;
     "data-testid"?: string;
 };
-export declare const VuiDateRangePicker: ({ setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiDateRangePicker: ({ setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, input, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/datePicker/DateRangePicker.js

@@ -16,7 +16,7 @@ import { formatDate } from "../../utils";
 import { useEffect, useState } from "react";
 import { VuiCalendar } from "./Calendar";
 export const VuiDateRangePicker = (_a) => {
-    var { setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear } = _a, rest = __rest(_a, ["setIsOpen", "startDate", "endDate", "onChange", "dateRangeProps", "fullWidth", "canClear"]);
+    var { setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, input } = _a, rest = __rest(_a, ["setIsOpen", "startDate", "endDate", "onChange", "dateRangeProps", "fullWidth", "canClear", "input"]);
     const [initialStartDate, setInitialStartDate] = useState();
     const [initialEndDate, setInitialEndDate] = useState();
     // When the startDate or endDate props change, update the internal state.
@@ -42,7 +42,7 @@ export const VuiDateRangePicker = (_a) => {
     const humanizedStartDate = initialStartDate ? formatDate(initialStartDate) : "Unselected start date";
     const humanizedEndDate = initialEndDate ? formatDate(initialEndDate) : "unselected end date";
     const { "data-testid": testId } = rest, restProps = __rest(rest, ["data-testid"]);
-    const input = (_jsx(VuiTextInput, { className: "vuiDateRangePickerInput", value: !initialStartDate && !initialEndDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`, fullWidth: fullWidth, "data-testid": testId }));
+    const inputEl = input !== null && input !== void 0 ? input : (_jsx(VuiTextInput, { className: "vuiDateRangePickerInput", value: !initialStartDate && !initialEndDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`, fullWidth: fullWidth, "data-testid": testId }));
     return (_jsx(VuiPopover, Object.assign({ setIsOpen: (isOpen) => {
             if (isOpen) {
                 // Set temporary internal state to the provided values when opening the popover.
@@ -54,5 +54,5 @@ export const VuiDateRangePicker = (_a) => {
                 onChange === null || onChange === void 0 ? void 0 : onChange(initialStartDate, initialEndDate);
             }
             setIsOpen(isOpen);
-        }, button: input }, restProps, { children: dateRangePicker })));
+        }, button: inputEl }, restProps, { children: dateRangePicker })));
 };

package/lib/components/form/input/BasicInput.d.ts

@@ -1,4 +1,4 @@
-declare const SIZE: readonly ["m", "l"];
+declare const SIZE: readonly ["s", "m", "l"];
 export type BasicInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "size" | "autoComplete" | "ref"> & {
     isInvalid?: boolean;
     size?: (typeof SIZE)[number];
@@ -8,7 +8,7 @@ export type BasicInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttrib
 };
 export declare const VuiBasicInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

package/lib/components/form/input/BasicInput.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { forwardRef } from "react";
-const SIZE = ["m", "l"];
+const SIZE = ["s", "m", "l"];
 export const VuiBasicInput = forwardRef((_a, ref) => {
     var { className, id, name, placeholder, size = "m", fullWidth, onSubmit, isInvalid, autoFocus, autoComplete, isSelected, onChange = () => undefined } = _a, rest = __rest(_a, ["className", "id", "name", "placeholder", "size", "fullWidth", "onSubmit", "isInvalid", "autoFocus", "autoComplete", "isSelected", "onChange"]);
     const classes = classNames("vuiInput", `vuiInput--${size}`, {

package/lib/components/form/input/PasswordInput.d.ts

@@ -1,6 +1,6 @@
 export declare const VuiPasswordInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

package/lib/components/form/input/TextInput.d.ts

@@ -6,7 +6,7 @@ export type Props = BasicInputProps & {
 };
 export declare const VuiTextInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

package/lib/components/form/input/_index.scss

@@ -5,6 +5,11 @@
   background-color: var(--vui-color-empty-shade);
 }
 
+.vuiInput--s {
+  padding: $sizeXs * 0.75 $sizeS;
+  font-size: $fontSizeSmall;
+}
+
 .vuiInput--m {
   padding: $sizeXs $sizeM;
   font-size: $fontSizeStandard;

package/lib/styles/index.css

@@ -2848,6 +2848,11 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-empty-shade);
 }
 
+.vuiInput--s {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
 .vuiInput--m {
   padding: 8px 16px;
   font-size: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "16.11.0",
+  "version": "16.12.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/components/Subsection.tsx

@@ -8,7 +8,7 @@ type Props = {
 export const Subsection = ({ title, children }: Props) => {
   return (
     <>
-      <VuiTitle size="s">
+      <VuiTitle size="xs">
         <h4>{title}</h4>
       </VuiTitle>
 

package/src/docs/pages/datePicker/DateRangePickerCustomInput.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { VuiButtonSecondary, VuiDateRangePicker, VuiSpacer, VuiText, VuiTextInput } from "../../../lib";
+import { formatDate } from "../../../lib/utils";
+
+export const DateRangePickerCustomInput = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [startDate, setStartDate] = useState<Date | undefined>(
+    new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
+  );
+  const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+
+  const humanizedStartDate = startDate ? formatDate(startDate) : "Unselected start date";
+  const humanizedEndDate = endDate ? formatDate(endDate) : "unselected end date";
+
+  return (
+    <>
+      <VuiText>
+        <p>
+          From {startDate?.toUTCString() ?? "unknown"} to {endDate?.toUTCString() ?? "unknown"}
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiButtonSecondary
+        color="neutral"
+        onClick={() => {
+          // Add one day to the end date.
+          setEndDate((prevEndDate) => {
+            if (!prevEndDate) return new Date();
+            const newEndDate = new Date(prevEndDate);
+            newEndDate.setDate(newEndDate.getDate() + 1);
+            return newEndDate;
+          });
+        }}
+      >
+        Add day to verify external control
+      </VuiButtonSecondary>
+
+      <VuiSpacer size="s" />
+
+      <VuiDateRangePicker
+        header="Date filter"
+        startDate={startDate}
+        endDate={endDate}
+        onChange={(startDate, endDate) => {
+          setStartDate(startDate);
+          setEndDate(endDate);
+        }}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        anchorSide="left"
+        data-testid="dateRangePickerButton"
+        dateRangeProps={{ "data-testid": "dateRangePicker" }}
+        canClear
+        input={
+          <VuiTextInput
+            size="s"
+            className="vuiDateRangePickerInput"
+            value={!startDate && !endDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`}
+          />
+        }
+      />
+    </>
+  );
+};

package/src/docs/pages/datePicker/index.tsx

@@ -1,11 +1,13 @@
 import { DatePicker } from "./DatePicker";
 import { Inline } from "./Inline";
 import { DateRangePicker } from "./DateRangePicker";
+import { DateRangePickerCustomInput } from "./DateRangePickerCustomInput";
 import { WithTimeSelection } from "./WithTimeSelection";
 
 const DatePickerSource = require("!!raw-loader!./DatePicker");
 const InlineSource = require("!!raw-loader!./Inline");
 const DateRangePickerSource = require("!!raw-loader!./DateRangePicker");
+const DateRangePickerCustomInputSource = require("!!raw-loader!./DateRangePickerCustomInput");
 const WithTimeSelectionSource = require("!!raw-loader!./WithTimeSelection");
 
 export const datePicker = {
@@ -27,6 +29,11 @@ export const datePicker = {
       component: <DateRangePicker />,
       source: DateRangePickerSource.default.toString()
     },
+    {
+      name: "Date range with custom input",
+      component: <DateRangePickerCustomInput />,
+      source: DateRangePickerCustomInputSource.default.toString()
+    },
     {
       name: "With time selection",
       component: <WithTimeSelection />,

package/src/docs/pages/input/Sizes.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { VuiTextInput } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+
+export const Sizes = () => {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <>
+      <Subsection title="Large">
+        <VuiTextInput
+          size="l"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+
+      <Subsection title="Medium">
+        <VuiTextInput
+          size="m"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+
+      <Subsection title="Small">
+        <VuiTextInput
+          size="s"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+    </>
+  );
+};

package/src/docs/pages/input/index.tsx

@@ -2,13 +2,13 @@ import { TextInput } from "./TextInput";
 import { NumberInput } from "./NumberInput";
 import { PasswordInput } from "./PasswordInput";
 import { FullWidth } from "./FullWidth";
-import { Large } from "./Large";
+import { Sizes } from "./Sizes";
 
 const TextInputSource = require("!!raw-loader!./TextInput");
 const NumberInputSource = require("!!raw-loader!./NumberInput");
 const PasswordInputSource = require("!!raw-loader!./PasswordInput");
 const FullWidthSource = require("!!raw-loader!./FullWidth");
-const LargeSource = require("!!raw-loader!./Large");
+const SizesSource = require("!!raw-loader!./Sizes");
 
 export const input = {
   name: "Input",
@@ -35,9 +35,9 @@ export const input = {
       source: FullWidthSource.default.toString()
     },
     {
-      name: "Large size",
-      component: <Large />,
-      source: LargeSource.default.toString()
+      name: "Sizes",
+      component: <Sizes />,
+      source: SizesSource.default.toString()
     }
   ]
 };

package/src/docs/pages/searchInput/index.tsx

@@ -13,7 +13,7 @@ export const searchInput = {
   path: "/searchInput",
   examples: [
     {
-      name: "Medium size",
+      name: "Sizes",
       component: <SearchInput />,
       source: SearchInputSource.default.toString()
     },

package/src/docs/pages/input/Large.tsx

@@ -1,18 +0,0 @@
-import { useState } from "react";
-import { VuiTextInput } from "../../../lib";
-
-export const Large = () => {
-  const [value, setValue] = useState<string | undefined>();
-
-  return (
-    <VuiTextInput
-      size="l"
-      id="textInput"
-      name="text"
-      placeholder="Type something…"
-      value={value}
-      onSubmit={() => alert("Submit")}
-      onChange={(event) => setValue(event.target.value)}
-    />
-  );
-};