@sqrzro/ui 4.0.0-alpha.57 → 4.0.0-alpha.59

package/dist/components/elements/Menu/index.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
 import Button from '../../../components/buttons/Button';
+import usePopover from '../../../hooks/usePopover';
 import { useClassNames } from '../../../styles/context';
 import tw from '../../../styles/classnames/utility/tw';
 import Action from '../../utility/Action';
 import Popover from '../../utility/Popover';
 import MenuItem from '../MenuItem';
-import usePopover from '../../../hooks/usePopover';
 function Menu({ actions, align, classNameProps, classNames, data, isDisabled, label, vAlign, }) {
     const componentClassNames = useClassNames('menu', { props: classNameProps }, classNames);
     const { controlProps, ref, targetProps } = usePopover();

package/dist/forms/components/BaseCalendarInput/index.d.ts

@@ -0,0 +1,11 @@
+import { InputProps } from '../../interfaces';
+export interface BaseCalendarInputComponentProps {
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+}
+interface BaseCalendarInputProps extends InputProps<Date | [Date, Date] | null>, BaseCalendarInputComponentProps {
+    children: React.ReactElement;
+    onClear?: () => void;
+}
+declare function BaseCalendarInput({ children, hasError, isDisabled, isOptional, isPanelOnly, name, onClear, value, }: BaseCalendarInputProps): React.ReactElement;
+export default BaseCalendarInput;

package/dist/forms/components/BaseCalendarInput/index.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Popover from '../../../components/utility/Popover';
+import usePopover from '../../../hooks/usePopover';
+import formatDateValue from '../../utility/format-date-value';
+import StaticTextInput from '../StaticTextInput';
+function BaseCalendarInput({ children, hasError, isDisabled, isOptional, isPanelOnly, name, onClear, value, }) {
+    const [oldValue, setOldValue] = useState(value);
+    const { controlProps, ref, targetProps } = usePopover();
+    if (isPanelOnly) {
+        return children;
+    }
+    useEffect(() => {
+        if ((value && !oldValue) || (value && oldValue)) {
+            controlProps.onClick();
+        }
+        setOldValue(value);
+    }, [value]);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsx(StaticTextInput, { hasError: hasError, isDisabled: isDisabled, label: formatDateValue(value), name: name, isOptional: isOptional, onClear: onClear, onClick: controlProps.onClick, value: value?.toString() }), _jsx(Popover, { ...targetProps, align: "center", children: children })] }));
+}
+export default BaseCalendarInput;

package/dist/forms/components/CalendarInput/index.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from '../../interfaces';
+import { BaseCalendarInputComponentProps } from '../BaseCalendarInput';
+export type CalendarInputComponentProps = BaseCalendarInputComponentProps;
+export type CalendarInputProps = InputProps<Date | null> & CalendarInputComponentProps;
+declare function CalendarInput({ name, onChange, value, ...baseProps }: CalendarInputProps): React.ReactElement;
+export default CalendarInput;

package/dist/forms/components/CalendarInput/index.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Calendar from '../../../components/utility/Calendar';
+import BaseCalendarInput from '../BaseCalendarInput';
+function CalendarInput({ name, onChange, value, ...baseProps }) {
+    function handleChange(eventValue) {
+        onChange?.({ target: { name, value: eventValue } });
+    }
+    function handleClear() {
+        onChange?.({ target: { name, value: null } });
+    }
+    return (_jsx(BaseCalendarInput, { ...baseProps, name: name, onClear: handleClear, value: value, children: _jsx(Calendar, { onChange: handleChange, value: value }) }));
+}
+export default CalendarInput;

package/dist/forms/components/FormField/index.d.ts

@@ -20,7 +20,8 @@ export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormField
     isOptional?: boolean;
     label?: React.ReactNode;
     onChange?: (event: InputEvent<T>) => void;
+    onFieldChange?: (event: InputEvent<T>) => void;
     render: (props: InputProps<T>) => React.ReactElement | null;
 }
-declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
+declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onFieldChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
 export default FormField;

package/dist/forms/components/FormField/index.js

@@ -11,10 +11,14 @@ function checkHasError(error) {
         Object.keys(error).length > 0 &&
         Object.values(error).some((item) => typeof item === 'string'));
 }
-function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
+function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onFieldChange, onKeyDown, render, value, }) {
     const componentClassNames = useClassNames('formField', { props: classNameProps, states: { isError: checkHasError(error) } }, classNames);
     const inputId = id || `ff_${name}`;
     const [inputError, setInputError] = useState(null);
+    function handleChange(event) {
+        onFieldChange?.(event);
+        onChange?.(event);
+    }
     function handleError(message) {
         setInputError(message);
     }
@@ -28,7 +32,7 @@ function FormField({ action, classNameProps, classNames, details, error, hasAssi
         isOptional,
         label,
         name,
-        onChange,
+        onChange: handleChange,
         onError: handleError,
         onKeyDown,
         value,

package/dist/forms/components/FormFields/index.d.ts

@@ -1,14 +1,18 @@
 import type { FormFieldComponentProps } from '../../interfaces';
 import type { AutocompleteComponentProps } from '../Autocomplete';
+import type { CalendarInputComponentProps } from '../CalendarInput';
 import type { DropdownComponentProps } from '../Dropdown';
 import type { PointsInputComponentProps } from '../PointsInput';
 import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
+import type { RangeCalendarInputComponentProps } from '../RangeCalendarInput';
 import type { SwitchComponentProps } from '../Switch';
 import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
 export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> & AutocompleteComponentProps<T>;
 export declare function AutocompleteFormField<T>(props: Readonly<AutocompleteFormFieldProps<T>>): React.ReactElement;
+export type CalendarFormFieldProps = FormFieldComponentProps<Date | null> & CalendarInputComponentProps;
+export declare function CalendarFormField(props: Readonly<CalendarFormFieldProps>): React.ReactElement;
 export type CSVFormFieldProps = FormFieldComponentProps<string>;
 export declare function CSVFormField(props: Readonly<CSVFormFieldProps>): React.ReactElement;
 export type DropdownFormFieldProps<T> = FormFieldComponentProps<T | null> & DropdownComponentProps<T>;
@@ -19,6 +23,8 @@ export type NumberFormFieldProps = FormFieldComponentProps<number> & NumberInput
 export declare function NumberFormField(props: Readonly<NumberFormFieldProps>): React.ReactElement;
 export type PasswordFormFieldProps = FormFieldComponentProps<string> & PasswordInputComponentProps;
 export declare function PasswordFormField(props: Readonly<PasswordFormFieldProps>): React.ReactElement;
+export type RangeCalendarFormFieldProps = FormFieldComponentProps<[Date, Date] | null> & RangeCalendarInputComponentProps;
+export declare function RangeCalendarFormField(props: Readonly<RangeCalendarFormFieldProps>): React.ReactElement;
 export type SwitchFormFieldProps = FormFieldComponentProps<boolean> & SwitchComponentProps;
 export declare function SwitchFormField(props: SwitchFormFieldProps): React.ReactElement;
 export type TextFormFieldProps = FormFieldComponentProps<string> & TextInputComponentProps;

package/dist/forms/components/FormFields/index.js

@@ -3,11 +3,13 @@ import { useCallback } from 'react';
 import extractInputProps from '../../utility/extract-input-props';
 import Autocomplete from '../Autocomplete';
 import CSVInput from '../CSVInput';
+import CalendarInput from '../CalendarInput';
 import Dropdown from '../Dropdown';
 import FormField from '../FormField';
 import PointsInput from '../PointsInput';
 import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
+import RangeCalendarInput from '../RangeCalendarInput';
 import Switch from '../Switch';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
@@ -16,6 +18,11 @@ export function AutocompleteFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(Autocomplete, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function CalendarFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CalendarInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function CSVFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(CSVInput, { ...renderProps, ...inputProps })), [inputProps]);
@@ -41,6 +48,11 @@ export function PasswordFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function RangeCalendarFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(RangeCalendarInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function SwitchFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(Switch, { ...renderProps, ...inputProps })), [inputProps]);

package/dist/forms/components/RangeCalendarInput/index.d.ts

@@ -1,5 +1,6 @@
-import { InputProps } from '../../../forms/interfaces';
-interface RangeCalendarInputProps extends InputProps<[Date, Date] | null> {
-}
-declare function RangeCalendarInput(props: RangeCalendarInputProps): React.ReactElement;
+import { InputProps } from '../../interfaces';
+import { BaseCalendarInputComponentProps } from '../BaseCalendarInput';
+export type RangeCalendarInputComponentProps = BaseCalendarInputComponentProps;
+export type RangeCalendarInputProps = InputProps<[Date, Date] | null> & RangeCalendarInputComponentProps;
+declare function RangeCalendarInput({ name, onChange, value, ...baseProps }: RangeCalendarInputProps): React.ReactElement;
 export default RangeCalendarInput;

package/dist/forms/components/RangeCalendarInput/index.js

@@ -1,10 +1,14 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import Calendar from '../../../components/utility/Calendar';
-function RangeCalendarInput(props) {
-    function handleChange(value) {
-        props.onChange?.({ target: { name: props.name, value } });
+import BaseCalendarInput from '../BaseCalendarInput';
+function RangeCalendarInput({ name, onChange, value, ...baseProps }) {
+    function handleChange(eventValue) {
+        onChange?.({ target: { name, value: eventValue } });
     }
-    return _jsx(Calendar, { isRange: true, onChange: handleChange, value: props.value });
+    function handleClear() {
+        onChange?.({ target: { name, value: null } });
+    }
+    return (_jsx(BaseCalendarInput, { ...baseProps, name: name, onClear: handleClear, value: value, children: _jsx(Calendar, { isRange: true, onChange: handleChange, value: value }) }));
 }
 export default RangeCalendarInput;

package/dist/forms/hooks/useForm.d.ts

@@ -12,7 +12,7 @@ export interface FieldPropsReturn<Request, K extends keyof Request = keyof Reque
     isDisabled?: boolean;
     label?: string;
     name: string;
-    onChange: (event: InputEvent<Request[K]>) => void;
+    onFieldChange: (event: InputEvent<Request[K]>) => void;
     value: Request[K];
 }
 export interface ToastsArgs {

package/dist/forms/hooks/useForm.js

@@ -173,7 +173,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
             error: getErrorsForField(errors, name),
             label: getLabel(name, label),
             name: name,
-            onChange: handleChange,
+            onFieldChange: handleChange,
             value: data[name],
         };
     }

package/dist/forms/utility/extract-input-props.js

@@ -13,6 +13,7 @@ export function getFieldPropKeys() {
         'label',
         'name',
         'onChange',
+        'onFieldChange',
         'onKeyDown',
         'value',
     ];

package/dist/forms/utility/format-date-value.d.ts

@@ -0,0 +1,2 @@
+declare function formatDateValue(date?: Date | [Date, Date] | null): string | null;
+export default formatDateValue;

package/dist/forms/utility/format-date-value.js

@@ -0,0 +1,13 @@
+import { formatDate } from '@sqrzro/utility';
+function formatDateValue(date) {
+    if (!date) {
+        return null;
+    }
+    const dateArray = Array.isArray(date) ? date : [date];
+    const formattedArray = dateArray.map((item) => formatDate(item));
+    if (formattedArray[0] === formattedArray[1]) {
+        return formattedArray[0];
+    }
+    return formattedArray.join(' - ');
+}
+export default formatDateValue;

package/dist/utility/get-date-state.js

@@ -22,6 +22,16 @@ function getDateState(date, pendingValue, value) {
     if (date && pendingValue && compareDates(date, pendingValue) === 0) {
         return { ...defaultState, isSelected: true };
     }
+    // For range, check that both dates are the same
+    if (date &&
+        !pendingValue &&
+        Array.isArray(value) &&
+        value[0] &&
+        value[1] &&
+        compareDates(value[0], value[1]) === 0 &&
+        compareDates(date, value[0]) === 0) {
+        return { ...defaultState, isSelected: true };
+    }
     // For range, check that the date is selected, and is the first of two selected
     if (date &&
         !pendingValue &&

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.57",
+  "version": "4.0.0-alpha.59",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",