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

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

@@ -0,0 +1,524 @@
+import { FormikConfig, FieldMetaProps as FormikFieldMetaProps, FieldValidator, FieldInputProps, FieldHelperProps } from 'formik';
+import { InputProps } from '../Input/Input.types';
+import { TooltipProps } from '../Tooltip/Tooltip.types';
+import { InputValue as BaseNumberInputValueType, NumberInputProps } from '../NumberInput/NumberInput.types';
+import { Props } from '../../utils/types';
+import { DateSelectProps } from '../DateSelect';
+import { CheckboxProps } from '../Checkbox/Checkbox.types';
+import { TextAreaProps } from '../TextArea/TextArea.types';
+import { TextEditorProps } from '../TextEditor';
+import { SelectButtonProps, SelectProps } from '../Select/Select.types';
+import { PillSelectProps } from '../PillSelect/PillSelect.types';
+import { MultiSelectProps } from '../MultiSelect/MultiSelect.types';
+import { GroupSelectProps } from '../GroupSelect/GroupSelect.types';
+import { TieredSelectProps } from '../TieredSelect/TieredSelect.types';
+export declare type ValueInArray<V> = V[keyof V];
+export declare type View = 'create' | 'read' | 'update';
+export declare type Layout = 'wxp' | 'traditional';
+export interface FormContextAPI {
+    /**
+     * @since 10.19.0
+     */
+    different: boolean;
+    /**
+     * @since 10.19.0
+     */
+    disabled: boolean;
+    /**
+     * @since 10.19.0
+     */
+    enableReinitialize?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    setFieldDifferent: (key: string, different: boolean) => void;
+    /**
+     * A <a href="https://github.com/jquense/yup">Yup</a> object schema to
+     * validate all values.
+     * <CodeBlock>
+     *  {`Yup.object().shape({
+     *    input_name: Yup.mixed().required()
+     *  })`}
+     * </CodeBlock>
+     * This is a great way to get error messages into the component. In
+     * addition, if using Yup for required, those fields will automatically
+     * get the required asterisk and highlight error.
+     * @since 10.19.0
+     */
+    validationSchema?: FormikConfig<unknown>['validationSchema'];
+    /**
+     * Toggle between modern and traditional form styles. Leave blank for the
+     * modern label-above layout.
+     * @since 10.19.0
+     */
+    variant: Layout;
+    /**
+     * Determines show or edit state of form.
+     * @default 'create'
+     * @since 10.19.0
+     */
+    view: View;
+}
+interface FieldMetaProps<Value> extends Omit<FormikFieldMetaProps<Value>, 'error'> {
+    /**
+     * @since 10.19.0
+     */
+    disabled: boolean;
+    /**
+     * @since 10.19.0
+     */
+    error: boolean;
+    /**
+     * @since 10.19.0
+     */
+    required: boolean;
+    /**
+     * @since 10.19.0
+     */
+    view: View;
+}
+export interface FieldConfig {
+    /**
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    error?: boolean | string;
+    /**
+     * @since 10.19.0
+     */
+    getId?: (item: any) => string | number;
+    /**
+     * @since 10.19.0
+     */
+    name: string;
+    /**
+     * @since 10.19.0
+     */
+    required?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    validate?: FieldValidator;
+    /**
+     * @since 10.19.0
+     */
+    view?: View;
+}
+export interface FieldAPI<Value> {
+    /**
+     * @since 10.19.0
+     */
+    input: FieldInputProps<Value>;
+    /**
+     * @since 10.19.0
+     */
+    helpers: FieldHelperProps<Value>;
+    /**
+     * @since 10.19.0
+     */
+    messages: {
+        error?: string;
+    };
+    /**
+     * @since 10.19.0
+     */
+    meta: FieldMetaProps<Value>;
+}
+export interface FormProps<Values> extends Partial<FormikConfig<Values>> {
+    /**
+     * @since 10.19.0
+     */
+    children: React.ReactNode;
+    /**
+     * Enable a browser confirmation about losing of unsaved data when the
+     * form values are visually different from the initial values. Uses{' '}
+     * <Code>window.onbeforeunload</Code>
+     */
+    enableConfirmNavigation?: boolean;
+    /**
+     * Disable all fields at once.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Toggle between modern and traditional form styles. Leave blank for the modern label-above layout.
+     *
+     */
+    variant?: Layout;
+    /**
+     * Determines show or edit state of form.
+     * @default 'create'
+     */
+    view?: View;
+}
+export declare type ValueComponentProps<Value = any> = {
+    field: FieldAPI<Value>;
+};
+export declare type ComponentWithFieldProp<Value, Props extends ValueComponentProps<Value>> = React.FunctionComponent<Props> | React.ForwardRefExoticComponent<Props> | ((p: Props) => React.ReactNode);
+export interface BaseFieldProps<Value, ComponentProps extends ValueComponentProps<Value>> {
+    /**
+     * Customize the input component, either a single component for all views
+     * or an object with the keys of the views to render on that particular
+     * view. This input component will receive the <Code>field</Code> prop.
+     * If using TypeScript, these components will need to extend a specific
+     * type from Core React, read more about the{' '}
+     * <a href="#typescript-and-as-prop-components">props per view</a>.
+     * <br />
+     * <br />
+     * One of:
+     * <br />
+     * <Code>ReactComponent</Code>or
+     * <Code>
+     * {
+     *    '{ read: ReactComponent, create: ReactComponent, update: ReactComponent }'
+     * }
+     * </Code>
+     * @since 10.19.0
+     */
+    as?: ComponentWithFieldProp<Value, ComponentProps> | {
+        [V in View]: ComponentWithFieldProp<Value, ComponentProps>;
+    };
+    /**
+     * A subcomponent to render on a particular view.
+     * <br />
+     * <br />
+     * One or all of:
+     * <br />
+     * <Code>Form.X.Create, Form.X.Read, Form.X.Update</Code>
+     * @since 10.19.0
+     */
+    children?: ((field: FieldAPI<Value>) => React.ReactNode) | React.ReactNode;
+    /**
+     * Starting location of column. For traditional variant, this does not exist
+     * and is not necessary.
+     * @since 10.19.0
+     * */
+    colStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /**
+     * Width of column. For traditional variant, will be either 6 or 12.
+     * @default 6
+     * @since 10.19.0
+     */
+    colWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /**
+     * @since 10.19.0
+     */
+    ['data-qa']?: string;
+    /**
+     * Specify disabled. Field disabled replaces the overall Form disabled state.
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    error?: boolean | string;
+    /**
+     * @since 10.19.0
+     */
+    label?: string;
+    /**
+     * Key path in store. Accepts <Code>bracket[notation]</Code> or{' '}
+     * <Code>dot.notation</Code>.
+     * @since 10.19.0
+     */
+    name: string;
+    /**
+     * The required asterisk if not using Yup <Code>required</Code>
+     * <CodeBlock>
+     * {`<Form
+     * validationSchema={Yup.object().shape({
+     *  input_name: Yup.mixed().required(),
+     * })}>`}
+     * </CodeBlock>
+     * @since 10.19.0
+     */
+    required?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    tooltip?: TooltipProps['overlay'];
+    /**
+     * The validate function from Formik for single field validation.
+     * <CodeBlock>
+     *  {`(value: Value = any) => undefined | string | Promise<Value>`}
+     * </CodeBlock>
+     * @since 10.19.0
+     */
+    validate?: FieldValidator;
+    /**
+     * Determines show or edit state of field.
+     * @since 10.19.0
+     */
+    view?: View;
+}
+export interface TraditionalBaseFieldProps<Value, ComponentProps extends ValueComponentProps<Value>> extends Omit<BaseFieldProps<Value, ComponentProps>, 'colWidth' | 'colStart'> {
+    /**
+     * @since 10.19.0
+     */
+    colWidth?: 6 | 12;
+}
+export interface FieldProps<Value> extends Omit<BaseFieldProps<Value, ValueComponentProps<Value>>, 'children'> {
+    /**
+     * @since 10.19.0
+     */
+    children?: React.ReactElement<BaseFieldProps<Value, ValueComponentProps<Value>>> | React.ReactElement<BaseFieldProps<Value, ValueComponentProps<Value>>>[];
+}
+export declare type OptionList<OptionShape = any> = {
+    /**
+     * <div>
+     *  The id of an option{' '}
+     *  <Code>{'(option: OptionItem) => string | number'}</Code>
+     * </div>
+     * <br />
+     * <div>
+     *  Default:
+     *  <Code>{'(option: OptionItem) => option.id'}</Code>
+     * </div>
+     * @since 10.19.0
+     */
+    getId: (option: OptionShape) => string | number;
+    /**
+     * <div>
+     *  The display label of an option
+     *  <Code>{'(option: OptionItem) => string'}</Code>
+     * </div>
+     * <br />
+     * <div>
+     *  Default:
+     *  <Code>{'(option: OptionItem) => option.label || option.name'}</Code>
+     * </div>
+     * @since 10.19.0
+     */
+    getLabel: (option: OptionShape) => string;
+    /**
+     * @since 10.19.0
+     */
+    options?: OptionShape[];
+};
+export interface FormErrorBannerProps {
+    /**
+     * @since 10.19.0
+     */
+    i18nScope?: string;
+    /**
+     * @since 10.19.0
+     */
+    item: string;
+}
+export declare type ViewFieldProps<Value, FieldTypeProps extends FieldProps<Value>, ComponentProps extends ValueComponentProps<Value>> = Partial<Omit<FieldTypeProps, 'children'>> & {
+    /**
+     * @since 10.19.0
+     */
+    children?: BaseFieldProps<Value, ComponentProps>['children'];
+};
+export declare type FieldTextValueType = string;
+export interface FieldTextComponentProps<Value = FieldTextValueType> extends ValueComponentProps<Value>, InputProps {
+}
+export interface FieldTextProps<Value = FieldTextValueType> extends FieldProps<Value>, Omit<InputProps, 'name' | 'children' | 'error'> {
+}
+export declare type FieldNumberValueType = BaseNumberInputValueType;
+export interface FieldNumberComponentProps<Value = FieldNumberValueType> extends ValueComponentProps<Value>, NumberInputProps {
+}
+export interface FieldNumberProps<Value = FieldNumberValueType> extends FieldProps<Value>, Omit<NumberInputProps, 'name' | 'children' | 'error'> {
+}
+export declare type FieldCurrencyValueType = BaseNumberInputValueType;
+export interface FieldCurrencyComponentProps<Value = FieldCurrencyValueType> extends ValueComponentProps<Value>, NumberInputProps {
+}
+export interface FieldCurrencyProps<Value = FieldCurrencyValueType> extends FieldProps<Value>, Omit<NumberInputProps, 'name' | 'children' | 'error'> {
+}
+export declare type FieldDateValueType = null | string | Date;
+export interface FieldDateComponentProps<Value = FieldDateValueType> extends ValueComponentProps<Value>, DateSelectProps {
+}
+export interface FieldDateProps<Value = FieldDateValueType> extends FieldProps<Value>, Omit<DateSelectProps, 'error'> {
+}
+export declare type FieldCheckboxValueType = boolean;
+export interface FieldCheckboxComponentProps<Value = FieldCheckboxValueType> extends ValueComponentProps<Value>, CheckboxProps {
+    /**
+     * @since 10.19.0
+     */
+    i18nScope?: string;
+}
+export interface FieldCheckboxProps<Value = FieldCheckboxValueType> extends FieldProps<Value>, Omit<CheckboxProps, 'name' | 'error' | 'children'> {
+    /**
+     * @since 10.19.0
+     */
+    i18nScope?: string;
+}
+export declare type FieldTextAreaValueType = string;
+export interface FieldTextAreaComponentProps<Value = FieldTextAreaValueType> extends ValueComponentProps<Value>, TextAreaProps {
+}
+export interface FieldTextAreaProps<Value = FieldTextAreaValueType> extends FieldProps<Value>, Omit<TextAreaProps, 'name' | 'error' | 'children'> {
+}
+export declare type FieldRichTextValueType = string;
+export interface FieldRichTextComponentProps<Value = FieldRichTextValueType> extends ValueComponentProps<Value>, TextEditorProps {
+}
+export interface FieldRichTextProps<Value = FieldRichTextValueType> extends Omit<FieldProps<Value>, 'error'>, TextEditorProps {
+}
+export declare type FieldRadioButtonsValueType = any;
+export interface FieldRadioButtonsComponentProps<Value = FieldRadioButtonsValueType> extends ValueComponentProps<Value>, Partial<OptionList<Value>>, Pick<Props, 'className' | 'style'> {
+    /**
+     * @since 10.19.0
+     */
+    isDisabledOption?: (option: Value) => boolean;
+}
+export interface FieldRadioButtonsProps<Value = FieldRadioButtonsValueType> extends FieldProps<Value>, Partial<OptionList<Value>>, Pick<Props, 'className' | 'style'>, Pick<FieldRadioButtonsComponentProps, 'isDisabledOption'> {
+}
+export declare type FieldCheckboxesValueType = any[];
+export interface FieldCheckboxesComponentProps<Value = FieldCheckboxesValueType> extends ValueComponentProps<Value>, Partial<OptionList<ValueInArray<Value>>>, Pick<Props, 'className' | 'style'> {
+    /**
+     * @since 10.19.0
+     */
+    isDisabledOption?: (option: Value) => boolean;
+    /**
+     * @since 10.19.0
+     */
+    isIndeterminateOption?: (option: Value) => boolean;
+}
+export interface FieldCheckboxesProps<Value = FieldCheckboxesValueType> extends FieldProps<Value>, Partial<OptionList<ValueInArray<Value>>>, Pick<Props, 'className' | 'style'>, Pick<FieldCheckboxesComponentProps, 'isDisabledOption' | 'isIndeterminateOption'> {
+}
+export declare type FieldSelectValueType = any;
+export declare type FieldSelectOptionItem = FieldSelectValueType;
+export declare type FieldSelectGroupItem = any;
+export declare type FieldSelectGroupHeader = FieldSelectGroupItem & {
+    isGroupHeader: boolean;
+};
+export interface GroupedOptionsConfig<OptionItem, GroupItem> extends OptionList<OptionItem> {
+    /**
+     * @since 10.19.0
+     */
+    comparator?: (query: string, value: string) => boolean;
+    /**
+     * @since 10.19.0
+     */
+    getGroup: (option: OptionItem) => number | string;
+    /**
+     * <div>
+     *  The id of group{' '}
+     *  <Code>{'(group: GroupItem) => string | number'}</Code>
+     * </div>
+     * <br />
+     * <div>
+     *  Default:
+     *  <Code>{'(group) => group.id'}</Code>
+     * </div>
+     * @since 10.19.0
+     */
+    groupGetId: (group: GroupItem) => number | string;
+    /**
+     * @since 10.19.0
+     */
+    optgroups?: GroupItem[];
+    /**
+     * @since 10.19.0
+     */
+    value?: OptionItem;
+}
+export interface FieldSelectComponentProps<Value = FieldSelectValueType, OptionItem = FieldSelectOptionItem, GroupItem = FieldSelectGroupItem> extends ValueComponentProps<Value>, Partial<OptionList<OptionItem>>, Omit<SelectProps, 'onClear' | 'onSearch' | 'error' | 'children'> {
+    /**
+     * Callback for each entry in <Code>options</Code> to define relation to
+     * group in <Code>optgroups</Code>
+     * <Code>{'(option: OptionItem) => string | number'}</Code>
+     * @since 10.19.0
+     * */
+    getGroup?: (option: OptionItem) => number | string;
+    /**
+     * @since 10.19.0
+     */
+    groupGetId?: (group: GroupItem) => number | string;
+    /**
+     * <div>
+     *  The display label of a group
+     *  <Code>{'(group: GroupItem) => string'}</Code>
+     * </div>
+     * <br />
+     * <div>
+     *  Default:
+     *  <Code>{'(group: GroupItem) => group.label || group.name'}</Code>
+     * </div>
+     * @since 10.19.0
+     */
+    groupGetLabel?: (group: GroupItem) => string;
+    /**
+     * Callback for rendering header for each entry in <Code>optgroups</Code>
+     * <Code>{'(group: GroupItem) => React.ReactNode'}</Code>
+     * @since 10.19.0
+     */
+    groupHeaderRenderer?: (group: GroupItem) => React.ReactNode;
+    /**
+     * If nothing is selected, suggest this option. From{' '}
+     * <Code>{'Select.Option suggested'}</Code>.
+     * <Code>{'(option: OptionItem) => boolean'}</Code>
+     * @since 10.19.0
+     */
+    isSuggestedOption?: (option: OptionItem) => boolean;
+    /**
+     * Array of available option groups
+     * @since 10.19.0
+     */
+    optgroups?: GroupItem[];
+    /**
+     * Callback for rendering each <Code>option</Code>
+     * <Code>{'(option: OptionItem) => React.ReactNode'}</Code>
+     * @since 10.19.0
+     */
+    optionRenderer?: (option: OptionItem) => React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Callback for when cleared. Default enabled, has clear icon.
+     * @since 10.19.0
+     */
+    onClear?: false | SelectButtonProps['onClear'];
+    /**
+     * Callback for when searching. Default enabled, has seach bar in menu.
+     * @since 10.19.0
+     */
+    onSearch?: false | SelectProps['onSearch'];
+    /**
+     * <div>Customize how search works</div>
+     * <Code>{'(query: string, value: string) => boolean'}</Code>
+     * @since 10.19.0
+     */
+    searchComparator?: (query: string, value: string) => boolean;
+}
+export interface FieldSelectProps<Value = FieldSelectValueType, OptionItem = FieldSelectOptionItem, GroupItem = FieldSelectGroupItem> extends FieldProps<Value>, Partial<OptionList<OptionItem>>, Pick<FieldSelectComponentProps<Value, OptionItem, GroupItem>, 'getGroup' | 'groupGetId' | 'groupGetLabel' | 'groupHeaderRenderer' | 'isSuggestedOption' | 'onBlur' | 'onClear' | 'optgroups' | 'onSearch' | 'optionRenderer' | 'searchComparator'>, Omit<SelectProps, 'onClear' | 'onSearch' | 'error' | 'children' | 'label'> {
+}
+export declare type FieldPillSelectValueType = any;
+interface PillSelectCommon extends Omit<PillSelectProps, 'children' | 'onClear' | 'error' | 'value'> {
+    /**
+     * @since 10.19.0
+     */
+    onClear?: false | PillSelectProps['onClear'];
+}
+export interface FieldPillSelectComponentProps<Value = FieldPillSelectValueType> extends ValueComponentProps<Value>, PillSelectCommon {
+}
+export interface FieldPillSelectProps<Value = FieldPillSelectValueType> extends FieldProps<Value>, PillSelectCommon {
+}
+export declare type FieldMultiSelectValueType = any[];
+interface MultiSelectCommon<Value> extends Partial<OptionList<ValueInArray<Value>>>, Omit<MultiSelectProps, 'options' | 'getLabel' | 'getId' | 'error'> {
+}
+export interface FieldMultiSelectComponentProps<Value = FieldMultiSelectValueType> extends ValueComponentProps<Value>, MultiSelectCommon<Value> {
+}
+export interface FieldMultiSelectProps<Value = FieldMultiSelectValueType> extends FieldProps<Value>, MultiSelectCommon<Value> {
+}
+export declare type FieldGroupSelectValueType = any[];
+interface GroupSelectCommon<Value> extends Partial<OptionList<Value[keyof Value]>>, Omit<GroupSelectProps, 'options' | 'getLabel' | 'getId' | 'error'> {
+}
+export interface FieldGroupSelectComponentProps<Value = FieldGroupSelectValueType> extends ValueComponentProps<Value>, GroupSelectCommon<Value> {
+}
+export interface FieldGroupSelectProps<Value = FieldGroupSelectValueType> extends FieldProps<Value>, GroupSelectCommon<Value> {
+}
+export declare type FieldTieredSelectValueType = any[];
+interface TieredSelectCommon<Value> extends Partial<OptionList<Value[keyof Value]>>, Omit<TieredSelectProps, 'options' | 'getLabel' | 'getId' | 'error' | 'children'> {
+}
+export interface FieldTieredSelectComponentProps<Value = FieldTieredSelectValueType> extends ValueComponentProps<Value>, TieredSelectCommon<Value> {
+}
+export interface FieldTieredSelectProps<Value = FieldTieredSelectValueType> extends FieldProps<Value>, TieredSelectCommon<Value> {
+}
+export {};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { Form, useField, useFormContext, makeField as BETA_makeField, RichTextOutput, } from './Form';
+export { FormProps, FieldAPI, FieldProps, FieldTextProps, FieldNumberProps, FieldCurrencyProps, FieldDateProps, FieldCheckboxProps, FieldTextAreaProps, FieldRichTextProps, FieldRadioButtonsProps, FieldCheckboxesProps, FieldSelectProps, FieldPillSelectProps, FieldMultiSelectProps, FieldGroupSelectProps, FieldTieredSelectProps, ValueComponentProps, } from './Form.types';

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

@@ -0,0 +1,2 @@
+export { Form, useField, useFormContext, makeField as BETA_makeField, RichTextOutput, } from './Form';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,SAAS,IAAI,cAAc,EAC3B,cAAc,GACf,MAAM,QAAQ,CAAA"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MultiSelectProps } from '../MultiSelect';
+import { GroupSelectProps } from './GroupSelect.types';
+/**
+
+ Group select allows users to select multiple options from a single item in a
+ menu. Other select components are multi select, and select, tiered select.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-groupselect--custom-search)
+
+ @see [Design Guidelines](https://design.procore.com/group-select)
+
+ */
+export declare const GroupSelect: React.ForwardRefExoticComponent<GroupSelectProps & React.RefAttributes<HTMLDivElement & MultiSelectProps>>;