@economic/taco 2.49.3 → 2.49.5
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/esm/index.css +5 -2
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +0 -7
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Dialog/components/Content.js +4 -2
- package/dist/esm/packages/taco/src/components/Dialog/components/Content.js.map +1 -1
- package/dist/index.css +5 -2
- package/dist/taco.cjs.development.js +4 -8
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.css
CHANGED
@@ -166,9 +166,12 @@
|
|
166
166
|
@apply invisible;
|
167
167
|
}
|
168
168
|
|
169
|
-
/*
|
169
|
+
/*
|
170
|
+
* While the dialog is open, all elements are aria-hidden except for the dialog content. This ensures that the
|
171
|
+
* print document contains only the dialog content.
|
172
|
+
*/
|
170
173
|
[aria-hidden='true'] {
|
171
|
-
@apply print
|
174
|
+
@apply print:!hidden;
|
172
175
|
}
|
173
176
|
|
174
177
|
.wcag-transparent {
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import { useState, useEffect } from 'react';
|
2
2
|
import { useMergedRef } from '../../hooks/useMergedRef.js';
|
3
3
|
import { useLocalization } from '../Provider/Localization.js';
|
4
|
-
import { isMatch } from 'react-day-picker';
|
5
4
|
import { setInputValueByRef } from '../../utils/input.js';
|
6
5
|
import { format, parse, parseFromCustomString } from '../../utils/date.js';
|
7
6
|
|
@@ -20,7 +19,6 @@ const useDatepicker = ({
|
|
20
19
|
} = useLocalization();
|
21
20
|
const [internalValue, setInternalValue] = useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
|
22
21
|
const originalValueAsDate = parse(value);
|
23
|
-
const [invalid, setInvalid] = useState(false);
|
24
22
|
// update internal value if it changed 'externally'
|
25
23
|
useEffect(() => {
|
26
24
|
const formattedValue = format(value, formatting.date);
|
@@ -34,10 +32,6 @@ const useDatepicker = ({
|
|
34
32
|
const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
|
35
33
|
const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
|
36
34
|
event.target.value = formattedValue;
|
37
|
-
if (valueAsDate && calendar !== null && calendar !== void 0 && calendar.disabledDays) {
|
38
|
-
// setting invalid state if user manually write a disabled date.
|
39
|
-
setInvalid(isMatch(valueAsDate, calendar === null || calendar === void 0 ? void 0 : calendar.disabledDays));
|
40
|
-
}
|
41
35
|
if (onChange) {
|
42
36
|
event.detail = valueAsDate;
|
43
37
|
onChange(event);
|
@@ -68,7 +62,6 @@ const useDatepicker = ({
|
|
68
62
|
const inputProps = {
|
69
63
|
...props,
|
70
64
|
autoComplete: 'off',
|
71
|
-
invalid,
|
72
65
|
onBlur: handleInputBlur,
|
73
66
|
onChange: handleInputChange,
|
74
67
|
onKeyDown: handleKeyDown,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
1
|
+
{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format, parse } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n calendar: CalendarProps;\n input: InputProps;\n};\n\nexport const useDatepicker = (\n { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const { formatting } = useLocalization();\n const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n const originalValueAsDate = parse(value);\n\n // update internal value if it changed 'externally'\n React.useEffect(() => {\n const formattedValue = format(value, formatting.date);\n\n if (formattedValue !== internalValue) {\n setInternalValue(formattedValue ?? '');\n }\n }, [value]);\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n const valueAsDate = parseFromCustomString(\n event.target.value,\n 'dd.mm.yy',\n originalValueAsDate?.getMonth(),\n originalValueAsDate?.getFullYear()\n );\n const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n event.target.value = formattedValue;\n\n if (onChange) {\n (event as any).detail = valueAsDate;\n onChange(event);\n } else {\n // update the internal value to use the formatted date\n setInternalValue(formattedValue);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInternalValue(event.target.value);\n };\n\n const handleChange = date => {\n setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (props.onKeyDown) {\n props.onKeyDown(event);\n }\n\n if (event.key === 'Enter') {\n event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n }\n };\n\n const inputProps: InputProps = {\n ...props,\n autoComplete: 'off',\n onBlur: handleInputBlur,\n onChange: handleInputChange,\n onKeyDown: handleKeyDown,\n ref: inputRef,\n type: 'text',\n value: internalValue,\n };\n\n const calendarProps: CalendarProps = {\n ...calendar,\n onChange: handleChange,\n value: originalValueAsDate,\n };\n\n return {\n input: inputProps,\n calendar: calendarProps,\n };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useMergedRef","formatting","useLocalization","internalValue","setInternalValue","React","_format","format","date","originalValueAsDate","parse","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","getMonth","getFullYear","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","onKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","type","calendarProps","input"],"mappings":"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"}
|
@@ -57,8 +57,10 @@ const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
|
|
57
57
|
const {
|
58
58
|
texts
|
59
59
|
} = useLocalization();
|
60
|
-
const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
|
61
|
-
const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0',
|
60
|
+
const className = cn('relative bg-white animate-[fade-in_150ms] rounded print:!static', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
|
61
|
+
const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0',
|
62
|
+
// The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.
|
63
|
+
'print:overflow-visible print:h-max print:!transform-none print:!inset-0 print:!m-0', {
|
62
64
|
'rounded-b-none': !!dialog.elements.extra
|
63
65
|
}, props.className);
|
64
66
|
const handleEscapeKeyDown = event => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n close: () => void;\n drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const className = cn('text-center', props.className);\n return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn('mt-8 flex justify-end', props.className);\n return (\n <div {...props} className={className} ref={ref}>\n {props.children}\n </div>\n );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n const dialog = useCurrentDialog();\n\n return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('close'));\n };\n\n return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n /** An accessible label to be announced when the dialog is opened */\n 'aria-label': string;\n children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n onOpenAutoFocus?: DialogPrimitive.DialogContentProps['onOpenAutoFocus'];\n onCloseAutoFocus?: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n const dialog = useCurrentDialog();\n const internalRef = useMergedRef<HTMLDivElement>(ref);\n const { position, dragging, handleProps: dragHandleProps } = useDraggable(internalRef);\n const { texts } = useLocalization();\n\n const className = cn(\n 'relative bg-white animate-[fade-in_150ms] rounded',\n getDialogPositionClassnames(),\n getDialogSizeClassnames(dialog.size),\n 'print:w-full print:h-max print:m-0 print:overflow-visible'\n );\n\n const containerClassName = cn(\n 'bg-white p-6 rounded relative z-10 shadow print:p-0',\n 'print:overflow-visible print:h-max print:!transform-none print:!static print:!inset-0 print:!m-0',\n {\n 'rounded-b-none': !!dialog.elements.extra,\n },\n props.className\n );\n\n const handleEscapeKeyDown = (event: KeyboardEvent) => {\n if (!dialog.closeOnEscape) {\n event.preventDefault();\n } else if (dialog.onClose) {\n dialog.onClose();\n }\n };\n\n // the chosen behaviour in taco is that outside clicks do not close the dialog\n const handleInteractOutside = event => event.preventDefault();\n\n let output;\n\n if (typeof props.children === 'function') {\n output = (\n <Close>\n <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n </Close>\n );\n } else {\n output = props.children;\n }\n\n return (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay asChild>\n <Backdrop>\n <DialogPrimitive.Content\n {...props}\n className={className}\n onEscapeKeyDown={handleEscapeKeyDown}\n onInteractOutside={handleInteractOutside}\n ref={internalRef}\n style={{\n ...props.style,\n left: dialog.draggable ? `${position.x}px` : undefined,\n top: dialog.draggable ? `${position.y}px` : undefined,\n }}>\n <div className={containerClassName} data-taco=\"dialog\">\n {output}\n {dialog.draggable && (\n <div\n {...dragHandleProps}\n role=\"button\"\n draggable\n aria-grabbed={dragging}\n aria-label={texts.dialog.drag}\n className=\"yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center print:hidden\"\n />\n )}\n {dialog.showCloseButton ? (\n <DialogPrimitive.Close onClick={dialog.onClose} asChild>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.dialog.close}\n className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n icon=\"close\"\n />\n </DialogPrimitive.Close>\n ) : null}\n </div>\n {dialog.elements.drawer}\n {dialog.elements.extra}\n </DialogPrimitive.Content>\n </Backdrop>\n </DialogPrimitive.Overlay>\n </DialogPrimitive.Portal>\n );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useMergedRef","position","dragging","handleProps","dragHandleProps","useDraggable","texts","useLocalization","getDialogPositionClassnames","getDialogSizeClassnames","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","style","left","draggable","x","undefined","top","y","role","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n close: () => void;\n drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const className = cn('text-center', props.className);\n return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn('mt-8 flex justify-end', props.className);\n return (\n <div {...props} className={className} ref={ref}>\n {props.children}\n </div>\n );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n const dialog = useCurrentDialog();\n\n return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('close'));\n };\n\n return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n /** An accessible label to be announced when the dialog is opened */\n 'aria-label': string;\n children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n onOpenAutoFocus?: DialogPrimitive.DialogContentProps['onOpenAutoFocus'];\n onCloseAutoFocus?: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n const dialog = useCurrentDialog();\n const internalRef = useMergedRef<HTMLDivElement>(ref);\n const { position, dragging, handleProps: dragHandleProps } = useDraggable(internalRef);\n const { texts } = useLocalization();\n\n const className = cn(\n 'relative bg-white animate-[fade-in_150ms] rounded print:!static',\n getDialogPositionClassnames(),\n getDialogSizeClassnames(dialog.size),\n 'print:w-full print:h-max print:m-0 print:overflow-visible'\n );\n\n const containerClassName = cn(\n 'bg-white p-6 rounded relative z-10 shadow print:p-0',\n // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.\n 'print:overflow-visible print:h-max print:!transform-none print:!inset-0 print:!m-0',\n {\n 'rounded-b-none': !!dialog.elements.extra,\n },\n props.className\n );\n\n const handleEscapeKeyDown = (event: KeyboardEvent) => {\n if (!dialog.closeOnEscape) {\n event.preventDefault();\n } else if (dialog.onClose) {\n dialog.onClose();\n }\n };\n\n // the chosen behaviour in taco is that outside clicks do not close the dialog\n const handleInteractOutside = event => event.preventDefault();\n\n let output;\n\n if (typeof props.children === 'function') {\n output = (\n <Close>\n <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n </Close>\n );\n } else {\n output = props.children;\n }\n\n return (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay asChild>\n <Backdrop>\n <DialogPrimitive.Content\n {...props}\n className={className}\n onEscapeKeyDown={handleEscapeKeyDown}\n onInteractOutside={handleInteractOutside}\n ref={internalRef}\n style={{\n ...props.style,\n left: dialog.draggable ? `${position.x}px` : undefined,\n top: dialog.draggable ? `${position.y}px` : undefined,\n }}>\n <div className={containerClassName} data-taco=\"dialog\">\n {output}\n {dialog.draggable && (\n <div\n {...dragHandleProps}\n role=\"button\"\n draggable\n aria-grabbed={dragging}\n aria-label={texts.dialog.drag}\n className=\"yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center print:hidden\"\n />\n )}\n {dialog.showCloseButton ? (\n <DialogPrimitive.Close onClick={dialog.onClose} asChild>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.dialog.close}\n className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n icon=\"close\"\n />\n </DialogPrimitive.Close>\n ) : null}\n </div>\n {dialog.elements.drawer}\n {dialog.elements.extra}\n </DialogPrimitive.Content>\n </Backdrop>\n </DialogPrimitive.Overlay>\n </DialogPrimitive.Portal>\n );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useMergedRef","position","dragging","handleProps","dragHandleProps","useDraggable","texts","useLocalization","getDialogPositionClassnames","getDialogSizeClassnames","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","style","left","draggable","x","undefined","top","y","role","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}
|
package/dist/index.css
CHANGED
@@ -166,9 +166,12 @@
|
|
166
166
|
@apply invisible;
|
167
167
|
}
|
168
168
|
|
169
|
-
/*
|
169
|
+
/*
|
170
|
+
* While the dialog is open, all elements are aria-hidden except for the dialog content. This ensures that the
|
171
|
+
* print document contains only the dialog content.
|
172
|
+
*/
|
170
173
|
[aria-hidden='true'] {
|
171
|
-
@apply print
|
174
|
+
@apply print:!hidden;
|
172
175
|
}
|
173
176
|
|
174
177
|
.wcag-transparent {
|
@@ -6392,7 +6392,6 @@ const useDatepicker = ({
|
|
6392
6392
|
} = useLocalization();
|
6393
6393
|
const [internalValue, setInternalValue] = React.useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
|
6394
6394
|
const originalValueAsDate = parse(value);
|
6395
|
-
const [invalid, setInvalid] = React.useState(false);
|
6396
6395
|
// update internal value if it changed 'externally'
|
6397
6396
|
React.useEffect(() => {
|
6398
6397
|
const formattedValue = format(value, formatting.date);
|
@@ -6406,10 +6405,6 @@ const useDatepicker = ({
|
|
6406
6405
|
const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
|
6407
6406
|
const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
|
6408
6407
|
event.target.value = formattedValue;
|
6409
|
-
if (valueAsDate && calendar !== null && calendar !== void 0 && calendar.disabledDays) {
|
6410
|
-
// setting invalid state if user manually write a disabled date.
|
6411
|
-
setInvalid(reactDayPicker.isMatch(valueAsDate, calendar === null || calendar === void 0 ? void 0 : calendar.disabledDays));
|
6412
|
-
}
|
6413
6408
|
if (onChange) {
|
6414
6409
|
event.detail = valueAsDate;
|
6415
6410
|
onChange(event);
|
@@ -6440,7 +6435,6 @@ const useDatepicker = ({
|
|
6440
6435
|
const inputProps = {
|
6441
6436
|
...props,
|
6442
6437
|
autoComplete: 'off',
|
6443
|
-
invalid,
|
6444
6438
|
onBlur: handleInputBlur,
|
6445
6439
|
onChange: handleInputChange,
|
6446
6440
|
onKeyDown: handleKeyDown,
|
@@ -6806,8 +6800,10 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
|
|
6806
6800
|
const {
|
6807
6801
|
texts
|
6808
6802
|
} = useLocalization();
|
6809
|
-
const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
|
6810
|
-
const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0',
|
6803
|
+
const className = cn('relative bg-white animate-[fade-in_150ms] rounded print:!static', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
|
6804
|
+
const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0',
|
6805
|
+
// The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.
|
6806
|
+
'print:overflow-visible print:h-max print:!transform-none print:!inset-0 print:!m-0', {
|
6811
6807
|
'rounded-b-none': !!dialog.elements.extra
|
6812
6808
|
}, props.className);
|
6813
6809
|
const handleEscapeKeyDown = event => {
|