@hubspot/ui-extensions 0.6.0 → 0.7.0

package/README.md

@@ -10,6 +10,7 @@ React components and utilities for extending HubSpot's UI.
 - [Button](#button)
 - [ButtonRow](#buttonrow)
 - [Card](#card)
+- [DateInput](#dateinput)
 - [DescriptionList](#descriptionlist)
   - [DescriptionListItem](#descriptionlistitem)
 - [Divider](#divider)
@@ -346,6 +347,107 @@ const Extension = () => {
 };
 ```
 
+### DateInput
+
+##### Import
+
+```javascript
+import { DateInput } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+interface DateInputProps {
+  label: string;
+  name: string;
+  value?: { year: number; month: number; date: number };
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  error?: boolean;
+  defaultValue?: { year: number; month: number; date: number };
+  validationMessage?: string;
+  onChange?: (value: {
+    year: number;
+    month: number;
+    date: number;
+    formattedDate?: string;
+  }) => void;
+  onBlur?: (value: {
+    year: number;
+    month: number;
+    date: number;
+    formattedDate?: string;
+  }) => void;
+  onFocus?: (value: {
+    year: number;
+    month: number;
+    date: number;
+    formattedDate?: string;
+  }) => void;
+  min?: { year: number; month: number; date: number };
+  max?: { year: number; month: number; date: number };
+  minValidationMessage?: string;
+  maxValidationMessage?: string;
+  format?: 'YYYY-MM-DD' | 'L' | 'LL' | 'll';
+  timezone?: 'userTz' | 'portalTz';
+  clearButtonLabel?: string;
+  todayButtonLabel?: string;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the form input element. |
+| `name` | `string` | `N/A` | The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) |
+| `value` | `{ year: number; month: number; date: number }(optional)` | `N/A` | The value of the input |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string(optional)` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: {year: number; month: number; date: number; formattedDate?: string;}) => void(optional)` | `N/A` | A callback function that is invoked when the user selects or types a valid date. It won't get called on invalid inputs. |
+| `onBlur` | `(value: {year: number; month: number; date: number; formattedDate?: string;}) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: {year: number; month: number; date: number; formattedDate?: string;}) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
+| `min` | `{ year: number; month: number; date: number }(optional)` | `N/A` | Sets the earliest date that will be valid. |
+| `max` | `{ year: number; month: number; date: number }(optional)` | `N/A` | Sets the latest date that will be valid|
+| `minValidationMessage` | `string` | `"You must choose an older date"` | Sets the message that users will see when the hover over dates that are older than the min date. |
+| `maxValidationMessage` | `string` | `"You must choose a newer date"` | Sets the message that users will see when the hover over dates that are newer than the max date. |
+| `format` | `'short' \| 'long' \| 'medium' \| 'standard' \| 'YYYY-MM-DD' \| 'L' \| 'LL' \| 'll'` | `short` | Sets the date format that input will display to users. |
+| `timezone` | `'userTz' \| 'portalTz'` | `userTz` | Sets the timezone that the component will user to calculate valid dates. |
+| `clearButtonLabel` | `string` | `Clear` | Sets the label of the clear button. |
+| `todayButtonLabel` | `string` | `Today` | Sets the label of the today button.|
+
+
+#### Format Options
+
+- short: `09/04/1986`
+- long: `September 4, 1986`
+- medium : `Sep 4, 1986`
+- standard: `1986-09-04`
+- L: `09/04/1986`
+- LL: `September 4, 1986`
+- l: `9/4/1986`
+- ll : `Sep 4, 1986`
+- YYYY-MM-DD: `1986-09-04`
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+      <DateInput
+        label="Appointment Date"
+        name="appointment-date"
+        format="LL"
+      />
+  );
+};
+```
+
 ### DescriptionList
 
 ##### Import
@@ -475,7 +577,7 @@ export interface FlexProps {
   justify?: 'center' | 'end' | 'start' | 'around' | 'between';
   align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
   alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
-  wrap?: boolean;
+  wrap?: 'wrap' | 'nowrap';
   gap?:
   | 'flush'
   | 'small'
@@ -497,7 +599,7 @@ export interface FlexProps {
 | `justify` | `'start' \| 'center' \|'end' \|'around' \| 'between'` | `'start'` | Defines how to distribute space between and around children on main axis. |
 | `align` | `'start' \| 'center' \|'baseline' \| 'end' \| 'stretch' \|'between'` | `'start'` | Controls the aligment of children in the cross axis. |
 | `alignSelf` | `'start' \| 'center' \| 'baseline' \| 'end' \| 'stretch' \| 'auto'` `(optional)` | `'auto'` | Overrides flex's align item value for this element. Useful when `Flex` is the child of another `Flex` component. |
-| `wrap` | `boolean(optional)` | `false` | If set to `false`, children are forced onto one line. If set to `true`, they can wrap into multiple lines. |
+| `wrap` | `'wrap' \| 'nowrap'` | `'nowrap'` |  If set to `nowrap`, children are forced onto one line. If set to `wrap`, they can wrap into multiple lines. |
 | `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 | `gap` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'small'` | Amount of space between each child component passed as children. |
 
@@ -985,7 +1087,6 @@ export interface NumberInputProps {
   defaultValue?: number;
   validationMessage?: string;
   onChange?: (value: number) => void;
-  onInput?: (value: number) => void;
   onBlur?: (value: number) => void;
   onFocus?: (value: number) => void;
   min?: number;
@@ -1007,8 +1108,7 @@ export interface NumberInputProps {
 | `placeholder` | `string(optional)` | `N/A` | Text that appears in the input when it has no value set. |
 | `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
 | `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
-| `onChange` | `(value: number) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form. |
-| `onInput` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onChange` | `(value: number) => void(optional)` | `N/A` | A callback function that is invoked when the user types a valid number. It won't get called on invalid inputs. |
 | `onBlur` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
 | `onFocus` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
 | `min` | `number(optional)` | `N/A` | Sets the lower bound of your input. |
@@ -1094,9 +1194,10 @@ import { Select } from '@hubspot/ui-extensions';
 
 ```typescript
 interface SelectProps {
-  label: string;
-  name: string;
+  label?: string;
+  name?: string;
   value?: string | number | boolean;
+  variant?: 'transparent' | 'input'
   required?: boolean;
   readOnly?: boolean;
   description?: string;
@@ -1114,8 +1215,8 @@ interface SelectProps {
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `label` | `string` | `N/A` | The label text to display for the select element |
-| `name` | `string` | `N/A` | The unique identifier for the select element. |
+| `label` | `string(optional)` | `N/A` | The label text to display for the select element. |
+| `name` | `string(optional)` | `N/A` | The unique identifier for the select element. |
 | `value` | `string \| number \| boolean` | `''` | The value of the select input. |
 | `required` | `boolean` | `false` | Determines if the required indicator should be displayed |
 | `readOnly` | `boolean` | `false` | Determines if the field is editable or not. |
@@ -1126,6 +1227,7 @@ interface SelectProps {
 | `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
 | `onChange` | `(value: string) => void` | `N/A` | Function that is called with the new value when it is updated. |
 | `options` | `Array<{label: string; value: string \| number \| boolean}>` | `N/A` | Array of options to be displayed in the select. `label` will be used as the display text in the dropdown list and `value` should be a **unique** identifier. `value` is the data that will be submitted with the form. |
+| `variant` | `'transparent' \| 'input' `| `input` | Sets the visual styles of the button used for the anchor of the component. |
 
 ##### Usage
 

package/dist/coreComponents.d.ts

@@ -61,9 +61,9 @@ export declare const Image: "Image" & {
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", types.ImageProps, true>>;
 export declare const Input: "Input" & {
     readonly type?: "Input" | undefined;
-    readonly props?: types.InputProps<string> | undefined;
+    readonly props?: types.InputProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", types.InputProps<string>, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", types.InputProps, true>>;
 export declare const Link: "Link" & {
     readonly type?: "Link" | undefined;
     readonly props?: types.LinkProps | undefined;
@@ -110,6 +110,7 @@ export declare const Tile: "Tile" & {
     readonly props?: types.TileProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", types.TileProps, true>>;
+/** @deprecated use Flex instead. It will be removed in the next release. */
 export declare const Stack: "Stack" & {
     readonly type?: "Stack" | undefined;
     readonly props?: types.StackProps | undefined;
@@ -200,3 +201,8 @@ export declare const Flex: "Flex" & {
     readonly props?: types.FlexProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Flex", types.FlexProps, true>>;
+export declare const DateInput: "DateInput" & {
+    readonly type?: "DateInput" | undefined;
+    readonly props?: types.DateInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DateInput", types.DateInputProps, true>>;

package/dist/coreComponents.js

@@ -24,6 +24,7 @@ export const Select = createRemoteReactComponent('Select');
 export const Tag = createRemoteReactComponent('Tag');
 export const Text = createRemoteReactComponent('Text');
 export const Tile = createRemoteReactComponent('Tile');
+/** @deprecated use Flex instead. It will be removed in the next release. */
 export const Stack = createRemoteReactComponent('Stack');
 export const ToggleGroup = createRemoteReactComponent('ToggleGroup');
 export const StatisticsItem = createRemoteReactComponent('StatisticsItem');
@@ -42,3 +43,4 @@ export const StepIndicator = createRemoteReactComponent('StepIndicator');
 export const Accordion = createRemoteReactComponent('Accordion');
 export const MultiSelect = createRemoteReactComponent('MultiSelect');
 export const Flex = createRemoteReactComponent('Flex');
+export const DateInput = createRemoteReactComponent('DateInput');

package/dist/types.d.ts

@@ -61,7 +61,7 @@ export interface ImageProps {
     width?: number;
     height?: number;
 }
-export interface InputProps<T = string> {
+interface BaseInputProps<T = string, V = string> {
     label: string;
     name: string;
     value?: T;
@@ -73,23 +73,44 @@ export interface InputProps<T = string> {
     error?: boolean;
     defaultValue?: T;
     validationMessage?: string;
-    onChange?: (value: T) => void;
-    onInput?: (value: T) => void;
-    onBlur?: (value: T) => void;
-    onFocus?: (value: T) => void;
+    onChange?: (value: V) => void;
+    onInput?: (value: V) => void;
+    onBlur?: (value: V) => void;
+    onFocus?: (value: V) => void;
 }
-export interface TextAreaProps extends InputProps {
+export type InputProps = BaseInputProps;
+export interface TextAreaProps extends BaseInputProps {
     cols?: number;
     maxLength?: number;
     rows?: number;
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
 export type TextareaProps = TextAreaProps;
-export interface NumberInputProps extends InputProps<number> {
+export interface NumberInputProps extends Omit<BaseInputProps<number, number>, 'onInput'> {
     min?: number;
     max?: number;
     precision?: number;
     formatStyle?: 'decimal' | 'percentage';
+    /** @deprecated use onChange instead. It doesn't guarantee valid format */
+    onInput?: (value: number) => void;
+}
+export interface BaseDate {
+    year: number;
+    month: number;
+    date: number;
+}
+export interface DateInputEventsPayload extends BaseDate {
+    formattedDate?: string;
+}
+export interface DateInputProps extends Omit<BaseInputProps<BaseDate | null, DateInputEventsPayload>, 'onInput' | 'placeholder'> {
+    min?: BaseDate;
+    max?: BaseDate;
+    minValidationMessage?: string;
+    maxValidationMessage?: string;
+    format?: 'YYYY-MM-DD' | 'L' | 'LL' | 'll' | 'short' | 'long' | 'medium' | 'standard';
+    timezone?: 'userTz' | 'portalTz';
+    clearButtonLabel?: string;
+    todayButtonLabel?: string;
 }
 export interface ProgressBarProps {
     title?: string;
@@ -103,8 +124,8 @@ export interface ProgressBarProps {
     variant?: 'success' | 'danger' | 'warning';
 }
 export interface BaseSelectProps {
-    label: string;
-    name: string;
+    label?: string;
+    name?: string;
     required?: boolean;
     readOnly?: boolean;
     description?: string;
@@ -119,11 +140,12 @@ export interface BaseSelectProps {
 }
 export interface SelectProps extends BaseSelectProps {
     value?: string | number;
-    onChange?: (value: SelectProps['value']) => void;
+    onChange?: (value: NonNullable<SelectProps['value']>) => void;
+    variant?: 'transparent' | 'input';
 }
 export interface MultiSelectProps extends BaseSelectProps {
     value?: (string | number)[];
-    onChange?: (value: MultiSelectProps['value']) => void;
+    onChange?: (value: NonNullable<MultiSelectProps['value']>) => void;
 }
 export interface TagProps {
     children: ReactNode;
@@ -225,7 +247,7 @@ export interface FlexProps {
     justify?: 'center' | 'end' | 'start' | 'around' | 'between';
     align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
     alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
-    wrap?: boolean;
+    wrap?: boolean | 'wrap' | 'nowrap';
 }
 export interface StatisticsTrendProps {
     value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "1979c2dce0a920c10e4f8b5ec3bc16a1080120cb"
+  "gitHead": "60f780b26b92ab097b24f162bf485fde5fd26528"
 }