@atom-learning/components 6.11.0 → 6.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/combobox/Combobox.d.ts +3 -1
- package/dist/components/combobox/ComboboxInput.d.ts +6 -2
- package/dist/components/combobox/ComboboxInput.js +48 -8
- package/dist/components/combobox/ComboboxInput.js.map +1 -1
- package/dist/components/date-field/DateField.d.ts +1 -1
- package/dist/components/date-field/DateField.js +8 -3
- package/dist/components/date-field/DateField.js.map +1 -1
- package/dist/components/date-input/DateInput.d.ts +4 -0
- package/dist/components/date-input/DateInput.js +3 -1
- package/dist/components/date-input/DateInput.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +58 -12
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -2
|
@@ -12,8 +12,10 @@ export declare const Combobox: import("@reach/utils/polymorphic").ForwardRefComp
|
|
|
12
12
|
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
13
13
|
}, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
|
|
14
14
|
as?: "input" | undefined;
|
|
15
|
-
}, "size" | "state"> & {
|
|
15
|
+
}, "appearance" | "size" | "theme" | "state"> & {
|
|
16
16
|
size?: "sm" | "md" | "lg" | undefined;
|
|
17
|
+
appearance?: "standard" | "modern" | undefined;
|
|
18
|
+
theme?: "grey" | "white" | undefined;
|
|
17
19
|
state?: "error" | undefined;
|
|
18
20
|
} & {
|
|
19
21
|
as?: import("react").ElementType;
|
|
@@ -3,8 +3,10 @@ export declare const StyledComboboxInput: React.ForwardRefExoticComponent<Omit<O
|
|
|
3
3
|
ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
|
|
4
4
|
}, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
|
|
5
5
|
as?: "input" | undefined;
|
|
6
|
-
}, "size" | "state"> & {
|
|
6
|
+
}, "appearance" | "size" | "theme" | "state"> & {
|
|
7
7
|
size?: "sm" | "md" | "lg" | undefined;
|
|
8
|
+
appearance?: "standard" | "modern" | undefined;
|
|
9
|
+
theme?: "grey" | "white" | undefined;
|
|
8
10
|
state?: "error" | undefined;
|
|
9
11
|
} & {
|
|
10
12
|
as?: React.ElementType;
|
|
@@ -14,8 +16,10 @@ export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<Omit<Om
|
|
|
14
16
|
ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
|
|
15
17
|
}, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
|
|
16
18
|
as?: "input" | undefined;
|
|
17
|
-
}, "size" | "state"> & {
|
|
19
|
+
}, "appearance" | "size" | "theme" | "state"> & {
|
|
18
20
|
size?: "sm" | "md" | "lg" | undefined;
|
|
21
|
+
appearance?: "standard" | "modern" | undefined;
|
|
22
|
+
theme?: "grey" | "white" | undefined;
|
|
19
23
|
state?: "error" | undefined;
|
|
20
24
|
} & {
|
|
21
25
|
as?: React.ElementType;
|
|
@@ -4,15 +4,12 @@ import { ComboboxInput } from "@reach/combobox";
|
|
|
4
4
|
//#region src/components/combobox/ComboboxInput.tsx
|
|
5
5
|
var StyledComboboxInput = styled(ComboboxInput, {
|
|
6
6
|
base: [
|
|
7
|
-
"bg-white",
|
|
8
7
|
"bg-(image:--bg-chevron)",
|
|
9
8
|
"bg-position-[right_--spacing(3)_top_50%,0_0]",
|
|
10
9
|
"[background-repeat:no-repeat,repeat-x]",
|
|
11
10
|
"bg-size-[--spacing(5)_auto,100%]",
|
|
12
11
|
"shadow-none",
|
|
13
12
|
"appearance-none",
|
|
14
|
-
"border",
|
|
15
|
-
"border-grey-700",
|
|
16
13
|
"rounded-md",
|
|
17
14
|
"box-border",
|
|
18
15
|
"text-grey-1000",
|
|
@@ -28,8 +25,6 @@ var StyledComboboxInput = styled(ComboboxInput, {
|
|
|
28
25
|
"w-full",
|
|
29
26
|
"placeholder:opacity-100",
|
|
30
27
|
"placeholder:text-grey-700",
|
|
31
|
-
"focus-within:border-primary-800",
|
|
32
|
-
"focus-within:outline-none",
|
|
33
28
|
"disabled:bg-grey-200",
|
|
34
29
|
"disabled:cursor-not-allowed",
|
|
35
30
|
"disabled:text-grey-800"
|
|
@@ -52,11 +47,56 @@ var StyledComboboxInput = styled(ComboboxInput, {
|
|
|
52
47
|
"leading-loose"
|
|
53
48
|
]
|
|
54
49
|
},
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
appearance: {
|
|
51
|
+
standard: [
|
|
52
|
+
"bg-white",
|
|
53
|
+
"border",
|
|
54
|
+
"border-grey-700",
|
|
55
|
+
"focus-within:border-primary-800",
|
|
56
|
+
"focus-within:outline-none"
|
|
57
|
+
],
|
|
58
|
+
modern: [
|
|
59
|
+
"bg-grey-100",
|
|
60
|
+
"border-none",
|
|
61
|
+
"focus-within:outline-2",
|
|
62
|
+
"focus-within:outline-blue-800",
|
|
63
|
+
"focus-within:outline-offset-1",
|
|
64
|
+
"focus-within:outline-solid",
|
|
65
|
+
"focus-within:z-1"
|
|
66
|
+
]
|
|
67
|
+
},
|
|
68
|
+
theme: {
|
|
69
|
+
white: [],
|
|
70
|
+
grey: []
|
|
71
|
+
},
|
|
72
|
+
state: { error: [] }
|
|
73
|
+
},
|
|
74
|
+
compoundVariants: [
|
|
75
|
+
{
|
|
76
|
+
state: "error",
|
|
77
|
+
appearance: "standard",
|
|
78
|
+
class: ["border", "border-danger"]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
state: "error",
|
|
82
|
+
appearance: "modern",
|
|
83
|
+
class: ["bg-danger-light", "focus-within:outline-danger"]
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
appearance: "modern",
|
|
87
|
+
theme: "white",
|
|
88
|
+
class: ["bg-white"]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
appearance: "modern",
|
|
92
|
+
theme: "grey",
|
|
93
|
+
class: ["bg-grey-100"]
|
|
94
|
+
}
|
|
95
|
+
]
|
|
57
96
|
});
|
|
58
|
-
var ComboboxInput$1 = React$1.forwardRef(({ size = "md", ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledComboboxInput, {
|
|
97
|
+
var ComboboxInput$1 = React$1.forwardRef(({ size = "md", appearance = "standard", ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledComboboxInput, {
|
|
59
98
|
size,
|
|
99
|
+
appearance,
|
|
60
100
|
...rest,
|
|
61
101
|
ref
|
|
62
102
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n base: [\n 'bg-
|
|
1
|
+
{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n base: [\n 'bg-(image:--bg-chevron)',\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n '[background-repeat:no-repeat,repeat-x]',\n 'bg-size-[--spacing(5)_auto,100%]',\n 'shadow-none',\n 'appearance-none',\n 'rounded-md',\n 'box-border',\n 'text-grey-1000',\n 'cursor-text',\n 'block',\n 'font-body',\n 'h-10',\n 'pl-3',\n 'pr-10',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'w-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700',\n 'disabled:bg-grey-200',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800'\n ],\n\n variants: {\n size: {\n sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n md: ['h-10', 'text-md', 'leading-loose'],\n lg: ['h-12', 'text-md', 'leading-loose']\n },\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-700',\n 'focus-within:border-primary-800',\n 'focus-within:outline-none'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus-within:outline-2',\n 'focus-within:outline-blue-800',\n 'focus-within:outline-offset-1',\n 'focus-within:outline-solid',\n 'focus-within:z-1'\n ]\n },\n theme: {\n white: [],\n grey: []\n },\n state: {\n error: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border', 'border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n },\n {\n appearance: 'modern',\n theme: 'white',\n class: ['bg-white']\n },\n {\n appearance: 'modern',\n theme: 'grey',\n class: ['bg-grey-100']\n }\n ]\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n HTMLInputElement,\n ComboboxInputProps\n>(({ size = 'md', appearance = 'standard', ...rest }, ref) => (\n <StyledComboboxInput\n size={size}\n appearance={appearance}\n {...rest}\n ref={ref}\n />\n))\n"],"mappings":";;;;AAKA,IAAa,sBAAsB,OAAO,eAAmB;CAC3D,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,UAAU,gBAAgB;GACnC;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAMF,IAAa,kBAAgB,QAAM,YAGhC,EAAE,OAAO,MAAM,aAAa,YAAY,GAAG,QAAQ,QACpD,wBAAA,cAAC,qBAAD;CACQ;CACM;CACZ,GAAI;CACC;CACL,CAAA,CACF"}
|
|
@@ -3,7 +3,7 @@ import { DateInputProps } from '../../components/date-input/DateInput';
|
|
|
3
3
|
import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
|
|
4
4
|
type DateFieldProps = DateInputProps & FieldElementWrapperProps;
|
|
5
5
|
export declare const DateField: {
|
|
6
|
-
({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;
|
|
6
|
+
({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: DateFieldProps): React.JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
};
|
|
9
9
|
export {};
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { useFieldError } from "../form/useFieldError.js";
|
|
2
2
|
import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
|
|
3
|
+
import { useFormCustomContext } from "../form/useFormCustomContext.js";
|
|
3
4
|
import { DateInput } from "../date-input/DateInput.js";
|
|
4
5
|
import * as React$1 from "react";
|
|
5
6
|
import { useFormContext } from "react-hook-form";
|
|
6
7
|
//#region src/components/date-field/DateField.tsx
|
|
7
|
-
var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
|
|
8
|
+
var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
|
|
8
9
|
const { register, trigger } = useFormContext();
|
|
10
|
+
const context = useFormCustomContext();
|
|
9
11
|
const { error } = useFieldError(name);
|
|
10
12
|
const ref = validation ? register(validation) : register;
|
|
13
|
+
const formAppearance = context?.appearance || appearance;
|
|
14
|
+
const formTheme = context?.theme ?? theme;
|
|
11
15
|
return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
|
|
12
16
|
className,
|
|
13
17
|
description,
|
|
@@ -17,12 +21,13 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
|
|
|
17
21
|
label,
|
|
18
22
|
prompt,
|
|
19
23
|
required: Boolean(validation?.required),
|
|
20
|
-
appearance
|
|
24
|
+
appearance: formAppearance
|
|
21
25
|
}, /* @__PURE__ */ React$1.createElement(DateInput, {
|
|
22
26
|
id: name,
|
|
23
27
|
name,
|
|
24
28
|
ref,
|
|
25
|
-
appearance,
|
|
29
|
+
appearance: formAppearance,
|
|
30
|
+
theme: formTheme,
|
|
26
31
|
...error && { state: "error" },
|
|
27
32
|
...remainingProps,
|
|
28
33
|
revalidate: trigger
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input/DateInput'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n className,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={
|
|
1
|
+
{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input/DateInput'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n className,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n theme,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n const formAppearance = context?.appearance || appearance\n const formTheme = context?.theme ?? theme\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <DateInput\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n theme={formTheme}\n {...(error && { state: 'error' })}\n {...remainingProps}\n revalidate={trigger}\n />\n </FieldWrapper>\n )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;;AAaA,IAAa,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACiB;CACpB,MAAM,EAAE,UAAU,YAAY,gBAAgB;CAC9C,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAEhD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAYC,EAVb,wBAAA,cAAC,WAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,YAAY;EACZ,CAAA,CACW;;AAInB,UAAU,cAAc"}
|
|
@@ -6,6 +6,8 @@ export type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> & CalendarT
|
|
|
6
6
|
dateFormat?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
size?: 'sm' | 'md' | 'lg';
|
|
9
|
+
appearance?: 'standard' | 'modern';
|
|
10
|
+
theme?: 'white' | 'grey';
|
|
9
11
|
revalidate?: () => Promise<boolean>;
|
|
10
12
|
onChange?: (value?: Date) => void;
|
|
11
13
|
};
|
|
@@ -14,6 +16,8 @@ export declare const DateInput: React.ForwardRefExoticComponent<Omit<DayzedInter
|
|
|
14
16
|
dateFormat?: string;
|
|
15
17
|
disabled?: boolean;
|
|
16
18
|
size?: "sm" | "md" | "lg";
|
|
19
|
+
appearance?: "standard" | "modern";
|
|
20
|
+
theme?: "white" | "grey";
|
|
17
21
|
revalidate?: () => Promise<boolean>;
|
|
18
22
|
onChange?: (value?: Date) => void;
|
|
19
23
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -14,7 +14,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
|
|
|
14
14
|
//#region src/components/date-input/DateInput.tsx
|
|
15
15
|
dayjs.extend(customParseFormat);
|
|
16
16
|
var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? dayjs(date).format(dateFormat) : "";
|
|
17
|
-
var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
|
|
17
|
+
var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
|
|
18
18
|
const [date, setDate] = React$1.useState(initialDate ? dayjs(initialDate).toDate() : void 0);
|
|
19
19
|
const [inputElRef, setInputElRef] = useCallbackRefState();
|
|
20
20
|
React$1.useImperativeHandle(ref, () => inputElRef);
|
|
@@ -48,6 +48,8 @@ var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FOR
|
|
|
48
48
|
name: "date",
|
|
49
49
|
disabled,
|
|
50
50
|
size,
|
|
51
|
+
appearance,
|
|
52
|
+
theme,
|
|
51
53
|
...remainingProps,
|
|
52
54
|
onChange: handleInputChange,
|
|
53
55
|
ref: setInputElRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' | 'md' | 'lg'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n (\n {\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...remainingProps\n },\n ref\n ) => {\n const [date, setDate] = React.useState(\n initialDate ? dayjs(initialDate).toDate() : undefined\n )\n\n const [inputElRef, setInputElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n const dateString = formatDateToString(date, dateFormat)\n\n const handleInputChange = React.useCallback(\n (event) => {\n const newDateString = event.target.value\n const parsedInputDate = dayjs(newDateString, dateFormat)\n const newDate = parsedInputDate.isValid()\n ? parsedInputDate.toDate()\n : undefined\n setDate(newDate)\n onChange?.(newDate)\n },\n [dateFormat, onChange]\n )\n\n const handleCalendarChange = React.useCallback(\n (newDate) => {\n setDate(newDate)\n\n const mirrorChangeToInputElement = () => {\n if (!inputElRef) return\n\n // Call the `set` function on the input value directly to mirror the change.\n // Props to: https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call(\n inputElRef,\n formatDateToString(newDate, dateFormat)\n )\n const event = new Event('input', { bubbles: true })\n inputElRef.dispatchEvent(event)\n }\n mirrorChangeToInputElement()\n },\n [dateFormat, inputElRef]\n )\n\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n return (\n <div className=\"relative h-max\">\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n {...remainingProps}\n onChange={handleInputChange}\n ref={setInputElRef}\n defaultValue={dateString}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n disabled={disabled}\n label={updatedLabels.open}\n size={iconSize}\n theme=\"neutral\"\n hasTooltip={false}\n className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n className=\"z-1147483646 pr-6\"\n >\n <Calendar\n date={date || new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await handleCalendarChange(date.date)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await handleCalendarChange(date)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </div>\n )\n }\n)\n\nDateInput.displayName = 'DateInput'\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,OAAO,kBAAkB;
|
|
1
|
+
{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n theme?: 'white' | 'grey'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n (\n {\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n appearance,\n theme,\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...remainingProps\n },\n ref\n ) => {\n const [date, setDate] = React.useState(\n initialDate ? dayjs(initialDate).toDate() : undefined\n )\n\n const [inputElRef, setInputElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n const dateString = formatDateToString(date, dateFormat)\n\n const handleInputChange = React.useCallback(\n (event) => {\n const newDateString = event.target.value\n const parsedInputDate = dayjs(newDateString, dateFormat)\n const newDate = parsedInputDate.isValid()\n ? parsedInputDate.toDate()\n : undefined\n setDate(newDate)\n onChange?.(newDate)\n },\n [dateFormat, onChange]\n )\n\n const handleCalendarChange = React.useCallback(\n (newDate) => {\n setDate(newDate)\n\n const mirrorChangeToInputElement = () => {\n if (!inputElRef) return\n\n // Call the `set` function on the input value directly to mirror the change.\n // Props to: https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call(\n inputElRef,\n formatDateToString(newDate, dateFormat)\n )\n const event = new Event('input', { bubbles: true })\n inputElRef.dispatchEvent(event)\n }\n mirrorChangeToInputElement()\n },\n [dateFormat, inputElRef]\n )\n\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n return (\n <div className=\"relative h-max\">\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n appearance={appearance}\n theme={theme}\n {...remainingProps}\n onChange={handleInputChange}\n ref={setInputElRef}\n defaultValue={dateString}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n disabled={disabled}\n label={updatedLabels.open}\n size={iconSize}\n theme=\"neutral\"\n hasTooltip={false}\n className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n className=\"z-1147483646 pr-6\"\n >\n <Calendar\n date={date || new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await handleCalendarChange(date.date)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await handleCalendarChange(date)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </div>\n )\n }\n)\n\nDateInput.displayName = 'DateInput'\n"],"mappings":"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"}
|