@hitachivantara/uikit-react-core 5.19.3 → 5.20.0
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/cjs/components/Accordion/Accordion.cjs +19 -11
- package/dist/cjs/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/components/Accordion/Accordion.styles.cjs +44 -68
- package/dist/cjs/components/Accordion/Accordion.styles.cjs.map +1 -1
- package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs +22 -12
- package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs.map +1 -1
- package/dist/cjs/components/ActionsGeneric/ActionsGeneric.styles.cjs +17 -53
- package/dist/cjs/components/ActionsGeneric/ActionsGeneric.styles.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/Action/Action.cjs +23 -16
- package/dist/cjs/components/AppSwitcher/Action/Action.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs +51 -91
- package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs +28 -24
- package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs +52 -116
- package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/TitleWithTooltip.cjs +3 -6
- package/dist/cjs/components/AppSwitcher/TitleWithTooltip.cjs.map +1 -1
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs +6 -14
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/components/BreadCrumb/Page/Page.styles.cjs +2 -2
- package/dist/cjs/components/BreadCrumb/Page/Page.styles.cjs.map +1 -1
- package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.cjs +2 -6
- package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.cjs.map +1 -1
- package/dist/cjs/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.cjs +2 -3
- package/dist/cjs/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.cjs.map +1 -1
- package/dist/cjs/components/Calendar/CalendarNavigation/Navigation/Navigation.cjs +2 -3
- package/dist/cjs/components/Calendar/CalendarNavigation/Navigation/Navigation.cjs.map +1 -1
- package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.cjs +6 -14
- package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Actions/Actions.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Content/Content.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +47 -46
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +15 -0
- package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Title/Title.cjs.map +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs +2 -3
- package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs +2 -3
- package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs.map +1 -1
- package/dist/cjs/components/Focus/Focus.cjs +22 -44
- package/dist/cjs/components/Focus/Focus.cjs.map +1 -1
- package/dist/cjs/components/Focus/utils.cjs +0 -5
- package/dist/cjs/components/Focus/utils.cjs.map +1 -1
- package/dist/cjs/components/Header/Navigation/MenuBar/MenuBar.cjs +5 -1
- package/dist/cjs/components/Header/Navigation/MenuBar/MenuBar.cjs.map +1 -1
- package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs +9 -6
- package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/cjs/components/Header/Navigation/Navigation.cjs +4 -1
- package/dist/cjs/components/Header/Navigation/Navigation.cjs.map +1 -1
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs +4 -5
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -1
- package/dist/cjs/components/Input/Input.cjs +5 -6
- package/dist/cjs/components/Input/Input.cjs.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.cjs +2 -6
- package/dist/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +2 -6
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +2 -6
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -1
- package/dist/cjs/components/SelectionList/SelectionList.cjs +3 -8
- package/dist/cjs/components/SelectionList/SelectionList.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs +5 -2
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs.map +1 -1
- package/dist/cjs/components/TagsInput/TagsInput.cjs +3 -4
- package/dist/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs +2 -3
- package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs.map +1 -1
- package/dist/cjs/hooks/useCss.cjs +4 -13
- package/dist/cjs/hooks/useCss.cjs.map +1 -1
- package/dist/cjs/hooks/useEmotionCache.cjs +4 -4
- package/dist/cjs/hooks/useEmotionCache.cjs.map +1 -1
- package/dist/cjs/hooks/useTheme.cjs +3 -1
- package/dist/cjs/hooks/useTheme.cjs.map +1 -1
- package/dist/cjs/index.cjs +25 -19
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs +5 -4
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/cjs/providers/ThemeProvider.cjs +13 -15
- package/dist/cjs/providers/ThemeProvider.cjs.map +1 -1
- package/dist/cjs/utils/keyboardUtils.cjs +30 -0
- package/dist/cjs/utils/keyboardUtils.cjs.map +1 -0
- package/dist/esm/components/Accordion/Accordion.js +22 -13
- package/dist/esm/components/Accordion/Accordion.js.map +1 -1
- package/dist/esm/components/Accordion/Accordion.styles.js +44 -66
- package/dist/esm/components/Accordion/Accordion.styles.js.map +1 -1
- package/dist/esm/components/ActionsGeneric/ActionsGeneric.js +25 -14
- package/dist/esm/components/ActionsGeneric/ActionsGeneric.js.map +1 -1
- package/dist/esm/components/ActionsGeneric/ActionsGeneric.styles.js +17 -51
- package/dist/esm/components/ActionsGeneric/ActionsGeneric.styles.js.map +1 -1
- package/dist/esm/components/AppSwitcher/Action/Action.js +26 -18
- package/dist/esm/components/AppSwitcher/Action/Action.js.map +1 -1
- package/dist/esm/components/AppSwitcher/Action/Action.styles.js +51 -89
- package/dist/esm/components/AppSwitcher/Action/Action.styles.js.map +1 -1
- package/dist/esm/components/AppSwitcher/AppSwitcher.js +31 -26
- package/dist/esm/components/AppSwitcher/AppSwitcher.js.map +1 -1
- package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js +52 -114
- package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js.map +1 -1
- package/dist/esm/components/AppSwitcher/TitleWithTooltip.js +3 -6
- package/dist/esm/components/AppSwitcher/TitleWithTooltip.js.map +1 -1
- package/dist/esm/components/BaseDropdown/BaseDropdown.js +6 -14
- package/dist/esm/components/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/components/BreadCrumb/Page/Page.styles.js +1 -1
- package/dist/esm/components/BreadCrumb/Page/Page.styles.js.map +1 -1
- package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js +2 -6
- package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/esm/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js +2 -3
- package/dist/esm/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js.map +1 -1
- package/dist/esm/components/Calendar/CalendarNavigation/Navigation/Navigation.js +2 -3
- package/dist/esm/components/Calendar/CalendarNavigation/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.js +6 -14
- package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.js.map +1 -1
- package/dist/esm/components/Dialog/Actions/Actions.js.map +1 -1
- package/dist/esm/components/Dialog/Content/Content.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +47 -46
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +15 -0
- package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/components/Dialog/Title/Title.js.map +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.js +2 -3
- package/dist/esm/components/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/components/FileUploader/DropZone/DropZone.js +2 -3
- package/dist/esm/components/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/components/Focus/Focus.js +23 -45
- package/dist/esm/components/Focus/Focus.js.map +1 -1
- package/dist/esm/components/Focus/utils.js +0 -5
- package/dist/esm/components/Focus/utils.js.map +1 -1
- package/dist/esm/components/Header/Navigation/MenuBar/MenuBar.js +5 -1
- package/dist/esm/components/Header/Navigation/MenuBar/MenuBar.js.map +1 -1
- package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js +9 -6
- package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/components/Header/Navigation/Navigation.js +4 -1
- package/dist/esm/components/Header/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/InlineEditor/InlineEditor.js +3 -4
- package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/esm/components/Input/Input.js +5 -6
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +2 -6
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +2 -6
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -1
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +2 -6
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
- package/dist/esm/components/SelectionList/SelectionList.js +3 -8
- package/dist/esm/components/SelectionList/SelectionList.js.map +1 -1
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.js +5 -2
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.js.map +1 -1
- package/dist/esm/components/TagsInput/TagsInput.js +3 -4
- package/dist/esm/components/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/Actions/Action.js +2 -3
- package/dist/esm/components/VerticalNavigation/Actions/Action.js.map +1 -1
- package/dist/esm/hooks/useCss.js +4 -13
- package/dist/esm/hooks/useCss.js.map +1 -1
- package/dist/esm/hooks/useEmotionCache.js +4 -4
- package/dist/esm/hooks/useEmotionCache.js.map +1 -1
- package/dist/esm/hooks/useTheme.js +3 -1
- package/dist/esm/hooks/useTheme.js.map +1 -1
- package/dist/esm/index.js +241 -244
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/providers/Provider.js +4 -3
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/providers/ThemeProvider.js +4 -13
- package/dist/esm/providers/ThemeProvider.js.map +1 -1
- package/dist/esm/utils/keyboardUtils.js +30 -0
- package/dist/esm/utils/keyboardUtils.js.map +1 -0
- package/dist/types/index.d.ts +261 -317
- package/package.json +4 -4
- package/dist/cjs/components/Accordion/accordionClasses.cjs +0 -8
- package/dist/cjs/components/Accordion/accordionClasses.cjs.map +0 -1
- package/dist/cjs/components/ActionsGeneric/actionsGenericClasses.cjs +0 -8
- package/dist/cjs/components/ActionsGeneric/actionsGenericClasses.cjs.map +0 -1
- package/dist/cjs/components/AppSwitcher/Action/actionClasses.cjs +0 -8
- package/dist/cjs/components/AppSwitcher/Action/actionClasses.cjs.map +0 -1
- package/dist/cjs/components/AppSwitcher/appSwitcherClasses.cjs +0 -8
- package/dist/cjs/components/AppSwitcher/appSwitcherClasses.cjs.map +0 -1
- package/dist/cjs/utils/keyboardUtils/keyCheck.cjs +0 -9
- package/dist/cjs/utils/keyboardUtils/keyCheck.cjs.map +0 -1
- package/dist/cjs/utils/keyboardUtils/keyboardCodes.cjs +0 -105
- package/dist/cjs/utils/keyboardUtils/keyboardCodes.cjs.map +0 -1
- package/dist/esm/components/Accordion/accordionClasses.js +0 -8
- package/dist/esm/components/Accordion/accordionClasses.js.map +0 -1
- package/dist/esm/components/ActionsGeneric/actionsGenericClasses.js +0 -8
- package/dist/esm/components/ActionsGeneric/actionsGenericClasses.js.map +0 -1
- package/dist/esm/components/AppSwitcher/Action/actionClasses.js +0 -8
- package/dist/esm/components/AppSwitcher/Action/actionClasses.js.map +0 -1
- package/dist/esm/components/AppSwitcher/appSwitcherClasses.js +0 -8
- package/dist/esm/components/AppSwitcher/appSwitcherClasses.js.map +0 -1
- package/dist/esm/utils/keyboardUtils/keyCheck.js +0 -9
- package/dist/esm/utils/keyboardUtils/keyCheck.js.map +0 -1
- package/dist/esm/utils/keyboardUtils/keyboardCodes.js +0 -105
- package/dist/esm/utils/keyboardUtils/keyboardCodes.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarHeader.cjs","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport {\n HvFormElementContext,\n HvFormElementValueContext,\n HvFormElementDescriptorsContext,\n} from \"@core/components\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../Calendar\";\nimport calendarHeaderClasses, {\n HvCalendarHeaderClasses,\n} from \"./calendarHeaderClasses\";\nimport {\n StyledHeaderDayOfWeek,\n StyledInput,\n StyledInputBorderContainer,\n StyledRoot,\n StyledTypography,\n} from \"./CalendarHeader.styles\";\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nconst { Enter } = keyboardCodes;\n\nexport const HvCalendarHeader = ({\n id,\n value,\n locale = \"en-US\",\n classes,\n onChange,\n showEndDate,\n showDayOfWeek = false,\n onFocus,\n invalidDateLabel = \"Invalid Date\",\n ...others\n}: HvCalendarHeaderProps) => {\n const { elementId } = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const { label } = useContext(HvFormElementDescriptorsContext);\n\n let localValue: string | Date | DateRangeProp | undefined =\n value ?? elementValue ?? \"\";\n if (isRange(localValue)) {\n localValue = showEndDate ? localValue.endDate : localValue.startDate;\n }\n const [dateValue, setDateValue] = useState<\n string | Date | DateRangeProp | undefined\n >(localValue);\n const [editedValue, setEditedValue] = useState<string | null>(null);\n const [displayValue, setDisplayValue] = useState(\"\");\n const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n const localId = id ?? setId(elementId, \"calendarHeader\");\n\n const inputValue = editedValue ?? displayValue;\n const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n const [isValidValue, setIsValidValue] = useState(\n inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n );\n\n const validateInput = (incomingValid) =>\n incomingValid === undefined || dayjs(incomingValid).isValid();\n useEffect(() => {\n const valid = validateInput(localValue);\n setIsValidValue(valid);\n if (valid) {\n if (!localValue) {\n setDisplayValue(\"\");\n setEditedValue(null);\n setWeekdayDisplay(\"\");\n return;\n }\n const weekday = new Intl.DateTimeFormat(locale, {\n weekday: \"short\",\n }).format(isDate(localValue) ? localValue : 0);\n setDisplayValue(formatToLocale(localValue, locale));\n setEditedValue(null);\n setWeekdayDisplay(weekday);\n }\n }, [localValue, locale]);\n\n const handleNewDate = (event, date) => {\n // attempt to format in locale data, or fallback to default\n const localeParsedDate = dayjs(date, localeFormat);\n\n const isValidInput = localeParsedDate.isValid();\n const dateParsed = isValidInput\n ? localeParsedDate.toDate()\n : dayjs(date).toDate();\n // prevent extra updates\n if (!isSameDay(dateParsed, dateValue)) {\n setDateValue(dateParsed);\n onChange?.(event, dateParsed);\n }\n\n setIsValidValue(isValidInput);\n if (isValidInput) {\n setEditedValue(null);\n }\n };\n\n const onBlurHandler = (event) => {\n if (isNil(editedValue)) return;\n if (editedValue === \"\") {\n setIsValidValue(true);\n setEditedValue(null);\n return;\n }\n handleNewDate(event, editedValue);\n };\n\n const keyDownHandler = (event) => {\n if (!isKeypress(event, Enter) || isNil(editedValue) || editedValue === \"\")\n return;\n event.preventDefault();\n\n handleNewDate(event, editedValue);\n };\n\n const onFocusHandler = (event) => {\n if (!localValue) return;\n const formattedDate =\n isValidValue && isDate(localValue)\n ? dayjs(localValue).locale(locale).format(\"L\")\n : editedValue;\n setEditedValue(formattedDate);\n onFocus?.(event, formattedDate);\n };\n\n const onChangeHandler = (event) => {\n setEditedValue(event.target.value);\n };\n return (\n <>\n <StyledRoot\n id={localId}\n className={clsx(\n calendarHeaderClasses.root,\n classes?.root,\n !isValidValue &&\n inputValue !== \"\" &&\n clsx(calendarHeaderClasses.invalid, classes?.invalid)\n )}\n >\n {showDayOfWeek && (\n <StyledHeaderDayOfWeek\n className={clsx(\n calendarHeaderClasses.headerDayOfWeek,\n classes?.headerDayOfWeek\n )}\n >\n {weekdayDisplay || \"\\u00A0\"}\n </StyledHeaderDayOfWeek>\n )}\n\n <div\n className={clsx(\n calendarHeaderClasses.headerDate,\n classes?.headerDate\n )}\n >\n <StyledInput\n type=\"text\"\n id={setId(localId, \"header-input\")}\n placeholder={localeFormat}\n value={inputValue}\n className={clsx(calendarHeaderClasses.input, classes?.input)}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n onChange={onChangeHandler}\n onKeyDown={keyDownHandler}\n aria-labelledby={label?.[0]?.id}\n {...others}\n />\n </div>\n </StyledRoot>\n {!isValidValue && inputValue !== \"\" && (\n <StyledInputBorderContainer\n role=\"presentation\"\n className={clsx(\n calendarHeaderClasses.inputBorderContainer,\n classes?.inputBorderContainer\n )}\n />\n )}\n <div style={{ height: 32 }}>\n {!isValidValue && inputValue !== \"\" && (\n <StyledTypography\n component=\"span\"\n variant=\"body\"\n className={clsx(\n calendarHeaderClasses.invalidMessageStyling,\n classes?.invalidMessageStyling\n )}\n >\n <Info color=\"brand\" iconSize=\"S\" />\n {invalidDateLabel}\n </StyledTypography>\n )}\n </div>\n </>\n );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvCalendarHeaderClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The text to be shown on the main part of the header.\n */\n value?: string | Date | DateRangeProp;\n /**\n * Locale to be used by the calendar.\n */\n locale?: string;\n /**\n * Callback to define the input date.\n */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n value: Date | DateRangeProp\n ) => void;\n /**\n * Callback to handle input onFocus.\n */\n onFocus?: (\n event: React.FocusEventHandler<any>,\n formattedDate: string | null\n ) => void;\n /**\n * Indicates if header should display end date in a date range.\n */\n showEndDate?: boolean;\n /**\n * Indicates if header should display the day of week.\n */\n showDayOfWeek?: boolean;\n /**\n * Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","Enter","keyboardCodes","HvCalendarHeader","id","value","locale","classes","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKeypress","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","_Fragment","children","_jsxs","StyledRoot","className","clsx","calendarHeaderClasses","root","invalid","_jsx","StyledHeaderDayOfWeek","headerDayOfWeek","headerDate","StyledInput","type","placeholder","input","onBlur","onKeyDown","StyledInputBorderContainer","role","inputBorderContainer","style","height","StyledTypography","component","variant","invalidMessageStyling","Info","color","iconSize","formElementType"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CalendarHeader.cjs","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport {\n HvFormElementContext,\n HvFormElementValueContext,\n HvFormElementDescriptorsContext,\n} from \"@core/components\";\nimport { isKey, setId } from \"@core/utils\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../Calendar\";\nimport calendarHeaderClasses, {\n HvCalendarHeaderClasses,\n} from \"./calendarHeaderClasses\";\nimport {\n StyledHeaderDayOfWeek,\n StyledInput,\n StyledInputBorderContainer,\n StyledRoot,\n StyledTypography,\n} from \"./CalendarHeader.styles\";\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = ({\n id,\n value,\n locale = \"en-US\",\n classes,\n onChange,\n showEndDate,\n showDayOfWeek = false,\n onFocus,\n invalidDateLabel = \"Invalid Date\",\n ...others\n}: HvCalendarHeaderProps) => {\n const { elementId } = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const { label } = useContext(HvFormElementDescriptorsContext);\n\n let localValue: string | Date | DateRangeProp | undefined =\n value ?? elementValue ?? \"\";\n if (isRange(localValue)) {\n localValue = showEndDate ? localValue.endDate : localValue.startDate;\n }\n const [dateValue, setDateValue] = useState<\n string | Date | DateRangeProp | undefined\n >(localValue);\n const [editedValue, setEditedValue] = useState<string | null>(null);\n const [displayValue, setDisplayValue] = useState(\"\");\n const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n const localId = id ?? setId(elementId, \"calendarHeader\");\n\n const inputValue = editedValue ?? displayValue;\n const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n const [isValidValue, setIsValidValue] = useState(\n inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n );\n\n const validateInput = (incomingValid) =>\n incomingValid === undefined || dayjs(incomingValid).isValid();\n useEffect(() => {\n const valid = validateInput(localValue);\n setIsValidValue(valid);\n if (valid) {\n if (!localValue) {\n setDisplayValue(\"\");\n setEditedValue(null);\n setWeekdayDisplay(\"\");\n return;\n }\n const weekday = new Intl.DateTimeFormat(locale, {\n weekday: \"short\",\n }).format(isDate(localValue) ? localValue : 0);\n setDisplayValue(formatToLocale(localValue, locale));\n setEditedValue(null);\n setWeekdayDisplay(weekday);\n }\n }, [localValue, locale]);\n\n const handleNewDate = (event, date) => {\n // attempt to format in locale data, or fallback to default\n const localeParsedDate = dayjs(date, localeFormat);\n\n const isValidInput = localeParsedDate.isValid();\n const dateParsed = isValidInput\n ? localeParsedDate.toDate()\n : dayjs(date).toDate();\n // prevent extra updates\n if (!isSameDay(dateParsed, dateValue)) {\n setDateValue(dateParsed);\n onChange?.(event, dateParsed);\n }\n\n setIsValidValue(isValidInput);\n if (isValidInput) {\n setEditedValue(null);\n }\n };\n\n const onBlurHandler = (event) => {\n if (isNil(editedValue)) return;\n if (editedValue === \"\") {\n setIsValidValue(true);\n setEditedValue(null);\n return;\n }\n handleNewDate(event, editedValue);\n };\n\n const keyDownHandler = (event) => {\n if (!isKey(event, \"Enter\") || isNil(editedValue) || editedValue === \"\")\n return;\n event.preventDefault();\n\n handleNewDate(event, editedValue);\n };\n\n const onFocusHandler = (event) => {\n if (!localValue) return;\n const formattedDate =\n isValidValue && isDate(localValue)\n ? dayjs(localValue).locale(locale).format(\"L\")\n : editedValue;\n setEditedValue(formattedDate);\n onFocus?.(event, formattedDate);\n };\n\n const onChangeHandler = (event) => {\n setEditedValue(event.target.value);\n };\n return (\n <>\n <StyledRoot\n id={localId}\n className={clsx(\n calendarHeaderClasses.root,\n classes?.root,\n !isValidValue &&\n inputValue !== \"\" &&\n clsx(calendarHeaderClasses.invalid, classes?.invalid)\n )}\n >\n {showDayOfWeek && (\n <StyledHeaderDayOfWeek\n className={clsx(\n calendarHeaderClasses.headerDayOfWeek,\n classes?.headerDayOfWeek\n )}\n >\n {weekdayDisplay || \"\\u00A0\"}\n </StyledHeaderDayOfWeek>\n )}\n\n <div\n className={clsx(\n calendarHeaderClasses.headerDate,\n classes?.headerDate\n )}\n >\n <StyledInput\n type=\"text\"\n id={setId(localId, \"header-input\")}\n placeholder={localeFormat}\n value={inputValue}\n className={clsx(calendarHeaderClasses.input, classes?.input)}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n onChange={onChangeHandler}\n onKeyDown={keyDownHandler}\n aria-labelledby={label?.[0]?.id}\n {...others}\n />\n </div>\n </StyledRoot>\n {!isValidValue && inputValue !== \"\" && (\n <StyledInputBorderContainer\n role=\"presentation\"\n className={clsx(\n calendarHeaderClasses.inputBorderContainer,\n classes?.inputBorderContainer\n )}\n />\n )}\n <div style={{ height: 32 }}>\n {!isValidValue && inputValue !== \"\" && (\n <StyledTypography\n component=\"span\"\n variant=\"body\"\n className={clsx(\n calendarHeaderClasses.invalidMessageStyling,\n classes?.invalidMessageStyling\n )}\n >\n <Info color=\"brand\" iconSize=\"S\" />\n {invalidDateLabel}\n </StyledTypography>\n )}\n </div>\n </>\n );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvCalendarHeaderClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The text to be shown on the main part of the header.\n */\n value?: string | Date | DateRangeProp;\n /**\n * Locale to be used by the calendar.\n */\n locale?: string;\n /**\n * Callback to define the input date.\n */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n value: Date | DateRangeProp\n ) => void;\n /**\n * Callback to handle input onFocus.\n */\n onFocus?: (\n event: React.FocusEventHandler<any>,\n formattedDate: string | null\n ) => void;\n /**\n * Indicates if header should display end date in a date range.\n */\n showEndDate?: boolean;\n /**\n * Indicates if header should display the day of week.\n */\n showDayOfWeek?: boolean;\n /**\n * Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","id","value","locale","classes","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","_Fragment","children","_jsxs","StyledRoot","className","clsx","calendarHeaderClasses","root","invalid","_jsx","StyledHeaderDayOfWeek","headerDayOfWeek","headerDate","StyledInput","type","placeholder","input","onBlur","onKeyDown","StyledInputBorderContainer","role","inputBorderContainer","style","height","StyledTypography","component","variant","invalidMessageStyling","Info","color","iconSize","formElementType"],"mappings":"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"}
|
|
@@ -5,8 +5,7 @@ const utils = require("../../utils.cjs");
|
|
|
5
5
|
const monthSelectorClasses = require("./monthSelectorClasses.cjs");
|
|
6
6
|
const MonthSelector_styles = require("./MonthSelector.styles.cjs");
|
|
7
7
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
8
|
-
const
|
|
9
|
-
const keyboardCodes = require("../../../../utils/keyboardUtils/keyboardCodes.cjs");
|
|
8
|
+
const keyboardUtils = require("../../../../utils/keyboardUtils.cjs");
|
|
10
9
|
const HvMonthSelector = ({
|
|
11
10
|
classes,
|
|
12
11
|
id,
|
|
@@ -19,7 +18,7 @@ const HvMonthSelector = ({
|
|
|
19
18
|
}) => {
|
|
20
19
|
const listMonthNamesShort = utils.getMonthNamesList(locale, "short");
|
|
21
20
|
const onKeyDownHandler = (event, index) => {
|
|
22
|
-
if (
|
|
21
|
+
if (keyboardUtils.isKey(event, "Enter")) {
|
|
23
22
|
onChange == null ? void 0 : onChange(event, "month", index + 1);
|
|
24
23
|
onViewModeChange("calendar");
|
|
25
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthSelector.cjs","sources":["../../../../../../src/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"MonthSelector.cjs","sources":["../../../../../../src/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { isKey } from \"@core/utils\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport monthSelectorClasses, {\n HvMonthSelectorClasses,\n} from \"./monthSelectorClasses\";\nimport {\n StyledCalendarMonthlyCell,\n StyledCalendarMonthlyGrid,\n StyledFocusSelection,\n} from \"./MonthSelector.styles\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../../Calendar\";\n\nexport const HvMonthSelector = ({\n classes,\n id,\n locale,\n onChange,\n onViewModeChange,\n rangeMode,\n visibleMonth,\n ...others\n}: HvMonthSelectorProps) => {\n const listMonthNamesShort = getMonthNamesList(locale, \"short\");\n const onKeyDownHandler = (event, index) => {\n if (isKey(event, \"Enter\")) {\n onChange?.(event, \"month\", index + 1);\n onViewModeChange(\"calendar\");\n }\n };\n return (\n <StyledCalendarMonthlyGrid\n className={clsx(\n monthSelectorClasses.calendarMonthlyGrid,\n classes?.calendarMonthlyGrid,\n rangeMode\n ? clsx(monthSelectorClasses.rangeModeWidth, classes?.rangeModeWidth)\n : clsx(monthSelectorClasses.normalWidth, classes?.normalWidth)\n )}\n >\n {listMonthNamesShort.map((monthName, index) => (\n <StyledFocusSelection\n className={clsx(\n monthSelectorClasses.focusSelection,\n classes?.focusSelection\n )}\n key={monthName}\n role=\"button\"\n onClick={(event) => {\n onChange?.(event, \"month\", index + 1);\n onViewModeChange(\"calendar\");\n }}\n onKeyDown={(event) => onKeyDownHandler(event, index)}\n tabIndex={0}\n {...others}\n >\n <StyledCalendarMonthlyCell\n className={clsx(\n monthSelectorClasses.calendarMonthlyCell,\n classes?.calendarMonthlyCell,\n index + 1 === visibleMonth &&\n clsx(\n monthSelectorClasses.calendarMonthlyCellSelected,\n classes?.calendarMonthlyCellSelected\n )\n )}\n >\n {monthName}\n </StyledCalendarMonthlyCell>\n </StyledFocusSelection>\n ))}\n </StyledCalendarMonthlyGrid>\n );\n};\n\nexport interface HvMonthSelectorProps {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvMonthSelectorClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * Locale to be used by the calendar.\n */\n locale?: string;\n /**\n * Callback to define the input date.\n */\n onChange?: (\n event: any,\n action: VisibilitySelectorActions,\n value: Date | DateRangeProp | number\n ) => void;\n /**\n * Callback to define the input date.\n */\n onViewModeChange: (viewMode: ViewMode) => void;\n /**\n * Controls the visible month of the Calendar\n */\n visibleMonth: number;\n /**\n * Controls the visible month of the Calendar\n */\n visibleYear?: number;\n rangeMode?: boolean;\n}\n"],"names":["HvMonthSelector","classes","id","locale","onChange","onViewModeChange","rangeMode","visibleMonth","others","listMonthNamesShort","getMonthNamesList","onKeyDownHandler","event","index","isKey","StyledCalendarMonthlyGrid","className","clsx","monthSelectorClasses","calendarMonthlyGrid","rangeModeWidth","normalWidth","children","map","monthName","StyledFocusSelection","focusSelection","role","onClick","onKeyDown","tabIndex","StyledCalendarMonthlyCell","calendarMonthlyCell","calendarMonthlyCellSelected"],"mappings":";;;;;;;;AAcO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpBC,QAAAA,sBAAsBC,MAAAA,kBAAkBP,QAAQ,OAAO;AACvDQ,QAAAA,mBAAmBA,CAACC,OAAOC,UAAU;AACrCC,QAAAA,cAAAA,MAAMF,OAAO,OAAO,GAAG;AACdA,2CAAAA,OAAO,SAASC,QAAQ;AACnCR,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EAAA;AAEF,wCACGU,qBAAAA,2BAAyB;AAAA,IACxBC,WAAWC,KACTC,KAAAA,6BAAqBC,qBACrBlB,mCAASkB,qBACTb,YACIW,UAAKC,qBAAAA,QAAqBE,gBAAgBnB,mCAASmB,cAAc,IACjEH,KAAAA,KAAKC,6BAAqBG,aAAapB,mCAASoB,WAAW,CACjE;AAAA,IAAEC,UAEDb,oBAAoBc,IAAI,CAACC,WAAWX,yCAClCY,2CAAoB;AAAA,MACnBT,WAAWC,KAAAA,KACTC,qBAAAA,QAAqBQ,gBACrBzB,mCAASyB,cACX;AAAA,MAEAC,MAAK;AAAA,MACLC,SAAUhB,CAAU,UAAA;AACPA,6CAAAA,OAAO,SAASC,QAAQ;AACnCR,yBAAiB,UAAU;AAAA,MAC7B;AAAA,MACAwB,WAAYjB,CAAAA,UAAUD,iBAAiBC,OAAOC,KAAK;AAAA,MACnDiB,UAAU;AAAA,MAAE,GACRtB;AAAAA,MAAMc,yCAETS,gDAAyB;AAAA,QACxBf,WAAWC,KAAAA,KACTC,qBAAqBc,QAAAA,qBACrB/B,mCAAS+B,qBACTnB,QAAQ,MAAMN,gBACZU,KACEC,KAAAA,qBAAAA,QAAqBe,6BACrBhC,mCAASgC,2BACX,CACJ;AAAA,QAAEX,UAEDE;AAAAA,MAAAA,CACwB;AAAA,IAAC,GAtBvBA,SAuBe,CACvB;AAAA,EAAA,CACwB;AAE/B;;"}
|
|
@@ -6,8 +6,7 @@ const navigationClasses = require("./navigationClasses.cjs");
|
|
|
6
6
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
7
7
|
const setId = require("../../../../utils/setId.cjs");
|
|
8
8
|
const Typography = require("../../../Typography/Typography.cjs");
|
|
9
|
-
const
|
|
10
|
-
const keyboardCodes = require("../../../../utils/keyboardUtils/keyboardCodes.cjs");
|
|
9
|
+
const keyboardUtils = require("../../../../utils/keyboardUtils.cjs");
|
|
11
10
|
const Navigation = ({
|
|
12
11
|
id,
|
|
13
12
|
classes,
|
|
@@ -19,7 +18,7 @@ const Navigation = ({
|
|
|
19
18
|
isNextEnabled = true
|
|
20
19
|
}) => {
|
|
21
20
|
const onkeyDownHandler = (event, funcAction) => {
|
|
22
|
-
if (
|
|
21
|
+
if (keyboardUtils.isKey(event, "Enter") || keyboardUtils.isKey(event, "Space")) {
|
|
23
22
|
event.preventDefault();
|
|
24
23
|
funcAction(event);
|
|
25
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.cjs","sources":["../../../../../../src/components/Calendar/CalendarNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"Navigation.cjs","sources":["../../../../../../src/components/Calendar/CalendarNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { isKey, setId } from \"@core/utils\";\nimport { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n StyledDropLeftIcon,\n StyledDropRightIcon,\n StyledRoot,\n StyledText,\n} from \"./Navigation.styles\";\nimport navigationClasses, { HvNavigationClasses } from \"./navigationClasses\";\n\nexport const Navigation = ({\n id,\n classes,\n onNavigatePrevious,\n onNavigateNext,\n onTextClick,\n navigationText = \"n/a\",\n isPreviousEnabled = true,\n isNextEnabled = true,\n}: NavigationProps) => {\n const onkeyDownHandler = (event, funcAction) => {\n if (isKey(event, \"Enter\") || isKey(event, \"Space\")) {\n event.preventDefault();\n funcAction(event);\n }\n };\n\n const onTextClickIsFunction = typeof onTextClick === \"function\";\n\n return (\n <StyledRoot className={clsx(navigationClasses.root, classes?.root)}>\n <StyledDropLeftIcon\n id={setId(id, \"left\")}\n className={clsx(\n navigationClasses.icon,\n classes?.icon,\n !isPreviousEnabled &&\n clsx(navigationClasses.disabled, classes?.disabled)\n )}\n onClick={\n isPreviousEnabled ? (event) => onNavigatePrevious(event) : undefined\n }\n onKeyDown={(event) =>\n isNextEnabled\n ? onkeyDownHandler(event, onNavigatePrevious)\n : undefined\n }\n tabIndex={0}\n />\n\n <StyledText\n id={id}\n className={clsx(\n onTextClickIsFunction && clsx(navigationClasses.text, classes?.text),\n !onTextClickIsFunction &&\n clsx(navigationClasses.textWithoutHover, classes?.textWithoutHover)\n )}\n role=\"presentation\"\n onClick={onTextClick}\n onKeyDown={\n onTextClick && ((event) => onkeyDownHandler(event, onTextClick))\n }\n tabIndex={onTextClick ? 0 : -1}\n >\n <HvTypography variant=\"body\">{navigationText}</HvTypography>\n </StyledText>\n\n <StyledDropRightIcon\n id={setId(id, \"right\")}\n className={`${clsx(navigationClasses.icon, classes?.icon)} ${\n isNextEnabled\n ? \"\"\n : clsx(navigationClasses.disabled, classes?.disabled)\n }`}\n onClick={isNextEnabled ? (event) => onNavigateNext(event) : undefined}\n onKeyDown={(event) =>\n isNextEnabled ? onkeyDownHandler(event, onNavigateNext) : undefined\n }\n tabIndex={0}\n />\n </StyledRoot>\n );\n};\n\nexport interface NavigationProps extends HvBaseProps {\n /**\n * Identifier.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvNavigationClasses;\n /**\n * A function to be executed whenever the navigate previous action is triggered.\n */\n onNavigatePrevious: (event: React.MouseEvent<HTMLDivElement>) => void;\n /**\n * A function to be executed whenever the navigate next action is triggered.\n */\n onNavigateNext: (event: React.MouseEvent<HTMLDivElement>) => void;\n /**\n * A function to be executed whenever the text is clicked.\n */\n onTextClick?: () => void;\n /**\n * The text that will be shown between the navigation buttons.\n */\n navigationText?: string;\n /**\n * Flag stating if the previous button should be enabled or disabled.\n */\n isPreviousEnabled?: boolean;\n /**\n * Flag stating if the next button should be enabled or disabled.\n */\n isNextEnabled?: boolean;\n}\n"],"names":["Navigation","id","classes","onNavigatePrevious","onNavigateNext","onTextClick","navigationText","isPreviousEnabled","isNextEnabled","onkeyDownHandler","event","funcAction","isKey","preventDefault","onTextClickIsFunction","StyledRoot","className","clsx","navigationClasses","root","children","_jsx","StyledDropLeftIcon","setId","icon","disabled","onClick","undefined","onKeyDown","tabIndex","StyledText","text","textWithoutHover","role","HvTypography","variant","StyledDropRightIcon"],"mappings":";;;;;;;;;AAYO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,iBAAiB;AAAA,EACjBC,oBAAoB;AAAA,EACpBC,gBAAgB;AACD,MAAM;AACfC,QAAAA,mBAAmBA,CAACC,OAAOC,eAAe;AAC9C,QAAIC,cAAAA,MAAMF,OAAO,OAAO,KAAKE,cAAAA,MAAMF,OAAO,OAAO,GAAG;AAClDA,YAAMG,eAAe;AACrBF,iBAAWD,KAAK;AAAA,IAClB;AAAA,EAAA;AAGII,QAAAA,wBAAwB,OAAOT,gBAAgB;AAErD,yCACGU,kBAAAA,YAAU;AAAA,IAACC,WAAWC,KAAAA,KAAKC,kBAAAA,QAAkBC,MAAMjB,mCAASiB,IAAI;AAAA,IAAEC,UAAA,CACjEC,2BAAAA,IAACC,sCAAkB;AAAA,MACjBrB,IAAIsB,MAAAA,MAAMtB,IAAI,MAAM;AAAA,MACpBe,WAAWC,KAAAA,KACTC,kBAAAA,QAAkBM,MAClBtB,mCAASsB,MACT,CAACjB,qBACCU,KAAKC,KAAAA,kBAAAA,QAAkBO,UAAUvB,mCAASuB,QAAQ,CACtD;AAAA,MACAC,SACEnB,oBAAqBG,CAAUP,UAAAA,mBAAmBO,KAAK,IAAIiB;AAAAA,MAE7DC,WAAYlB,CACVF,UAAAA,gBACIC,iBAAiBC,OAAOP,kBAAkB,IAC1CwB;AAAAA,MAENE,UAAU;AAAA,IAAA,CACX,GAEDR,2BAAAA,IAACS,8BAAU;AAAA,MACT7B;AAAAA,MACAe,WAAWC,KACTH,KAAAA,yBAAyBG,KAAKC,KAAAA,kBAAAA,QAAkBa,MAAM7B,mCAAS6B,IAAI,GACnE,CAACjB,yBACCG,KAAAA,KAAKC,kBAAAA,QAAkBc,kBAAkB9B,mCAAS8B,gBAAgB,CACtE;AAAA,MACAC,MAAK;AAAA,MACLP,SAASrB;AAAAA,MACTuB,WACEvB,gBAAiBK,CAAUD,UAAAA,iBAAiBC,OAAOL,WAAW;AAAA,MAEhEwB,UAAUxB,cAAc,IAAI;AAAA,MAAGe,yCAE9Bc,yBAAY;AAAA,QAACC,SAAQ;AAAA,QAAMf,UAAEd;AAAAA,MAAAA,CAA6B;AAAA,IAAA,CACjD,GAEZe,2BAAAA,IAACe,uCAAmB;AAAA,MAClBnC,IAAIsB,MAAAA,MAAMtB,IAAI,OAAO;AAAA,MACrBe,WAAY,GAAEC,UAAKC,kBAAAA,QAAkBM,MAAMtB,mCAASsB,IAAI,KACtDhB,gBACI,KACAS,KAAAA,KAAKC,kBAAkBO,QAAAA,UAAUvB,mCAASuB,QAAQ;AAAA,MAExDC,SAASlB,gBAAiBE,CAAUN,UAAAA,eAAeM,KAAK,IAAIiB;AAAAA,MAC5DC,WAAYlB,CACVF,UAAAA,gBAAgBC,iBAAiBC,OAAON,cAAc,IAAIuB;AAAAA,MAE5DE,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EAAA,CACQ;AAEhB;;"}
|
|
@@ -14,17 +14,9 @@ const ComposedNavigation = require("../CalendarNavigation/ComposedNavigation/Com
|
|
|
14
14
|
const CalendarWeekLabels = require("../CalendarWeekLabels/CalendarWeekLabels.cjs");
|
|
15
15
|
const MonthSelector = require("../CalendarNavigation/MonthSelector/MonthSelector.cjs");
|
|
16
16
|
const setId = require("../../../utils/setId.cjs");
|
|
17
|
-
const
|
|
18
|
-
const keyboardCodes = require("../../../utils/keyboardUtils/keyboardCodes.cjs");
|
|
17
|
+
const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
|
|
19
18
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
20
19
|
const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
|
|
21
|
-
const {
|
|
22
|
-
Enter,
|
|
23
|
-
ArrowLeft,
|
|
24
|
-
ArrowRight,
|
|
25
|
-
ArrowUp,
|
|
26
|
-
ArrowDown
|
|
27
|
-
} = keyboardCodes.keyboardCodes;
|
|
28
20
|
const HvSingleCalendar = ({
|
|
29
21
|
classes,
|
|
30
22
|
className,
|
|
@@ -63,13 +55,13 @@ const HvSingleCalendar = ({
|
|
|
63
55
|
onInputChange == null ? void 0 : onInputChange(event, date);
|
|
64
56
|
};
|
|
65
57
|
const getNavChild = (event, siblings, i) => {
|
|
66
|
-
if (
|
|
58
|
+
if (keyboardUtils.isKey(event, "ArrowLeft"))
|
|
67
59
|
return siblings[i - 1];
|
|
68
|
-
if (
|
|
60
|
+
if (keyboardUtils.isKey(event, "ArrowRight"))
|
|
69
61
|
return siblings[i + 1];
|
|
70
|
-
if (
|
|
62
|
+
if (keyboardUtils.isKey(event, "ArrowUp"))
|
|
71
63
|
return siblings[i - 7];
|
|
72
|
-
if (
|
|
64
|
+
if (keyboardUtils.isKey(event, "ArrowDown"))
|
|
73
65
|
return siblings[i + 7];
|
|
74
66
|
return void 0;
|
|
75
67
|
};
|
|
@@ -79,7 +71,7 @@ const HvSingleCalendar = ({
|
|
|
79
71
|
const parent = (_a2 = el == null ? void 0 : el.parentElement) == null ? void 0 : _a2.parentElement;
|
|
80
72
|
const siblings = parent != null ? Array.from(parent.getElementsByClassName(singleCalendarClasses.default.cellContainer)) : [];
|
|
81
73
|
const elIndex = el ? siblings.indexOf(el) : 0;
|
|
82
|
-
if (
|
|
74
|
+
if (keyboardUtils.isKey(event, "Enter")) {
|
|
83
75
|
el.focus();
|
|
84
76
|
return;
|
|
85
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleCalendar.cjs","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { setId, keyboardCodes, isKeypress } from \"@core/utils\";\nimport { ViewMode } from \"../enums\";\nimport { isRange, isDate, getWeekdayNamesList } from \"../utils\";\nimport { generateCalendarModel } from \"../model\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"..\";\nimport {\n StyledCalendarContainer,\n StyledCalendarGrid,\n StyledCalendarWrapper,\n} from \"./SingleCalendar.styles\";\nimport singleCalendarClasses, {\n HvSingleCalendarClasses,\n} from \"./singleCalendarClasses\";\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { HvCalendarWeekLabel } from \"../CalendarWeekLabels\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\n\nconst { Enter, ArrowLeft, ArrowRight, ArrowUp, ArrowDown } = keyboardCodes;\n\nexport const HvSingleCalendar = ({\n classes,\n className,\n id,\n locale = \"en-US\",\n value,\n visibleMonth,\n visibleYear,\n minimumDate,\n maximumDate,\n onChange,\n onInputChange,\n onVisibleDateChange,\n showEndDate,\n showDayOfWeek,\n invalidDateLabel,\n children,\n ...others\n}: HvSingleCalendarProps) => {\n // TODO: refactor this out\n // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n const today = new Date();\n const localValue = isNil(value) ? today : value;\n\n const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n const rangeMode = isRange(localValue);\n const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n const calModel = rangeMode\n ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n : generateCalendarModel(localValue, visibleMonth, visibleYear);\n const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n const listWeekdayNames = useMemo(\n () => getWeekdayNamesList(locale, \"narrow\"),\n [locale]\n );\n\n const handleChange = (event, date: Date | DateRangeProp) => {\n event?.preventDefault();\n onChange?.(event, date);\n };\n\n const handleInputChange = (event, date) => {\n event?.preventDefault();\n onInputChange?.(event, date);\n };\n\n const getNavChild = (event: KeyboardEvent, siblings, i: number) => {\n if (isKeypress(event, ArrowLeft)) return siblings[i - 1];\n if (isKeypress(event, ArrowRight)) return siblings[i + 1];\n if (isKeypress(event, ArrowUp)) return siblings[i - 7];\n if (isKeypress(event, ArrowDown)) return siblings[i + 7];\n return undefined;\n };\n\n const handleKeyDown = (event) => {\n // This code is very brittle and should be managed with the focus wrapper\n const el = document?.activeElement;\n const parent = el?.parentElement?.parentElement;\n const siblings =\n parent != null\n ? Array.from(\n parent.getElementsByClassName(\n singleCalendarClasses.cellContainer as string\n )\n )\n : [];\n const elIndex = el ? siblings.indexOf(el) : 0;\n\n if (isKeypress(event, Enter)) {\n (el as HTMLElement).focus();\n return;\n }\n\n const child = getNavChild(event, siblings, elIndex);\n\n if (child) {\n const inMonth = child.getAttribute(\"data-in-month\");\n if (inMonth === \"true\") {\n event?.preventDefault();\n child?.focus();\n }\n }\n };\n\n /**\n * Renders the element representing the received date.\n *\n * @param currentDate - The array representing the date [YYYY, MM, DD].\n * @memberOf Calendar\n */\n const renderCalendarDate = (currentDate) => {\n return (\n <HvCalendarCell\n classes={classes}\n key={currentDate}\n tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={currentDate}\n today={today}\n calendarValue={localValue}\n rangeMode={rangeMode}\n isDateSelectionMode={isDateSelectionMode}\n locale={locale}\n firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n maximumDate={maximumDate}\n minimumDate={minimumDate}\n />\n );\n };\n\n return (\n <StyledCalendarContainer\n className={clsx(\n className,\n singleCalendarClasses.calendarContainer,\n classes?.calendarContainer\n )}\n {...others}\n >\n <StyledCalendarWrapper\n id={id}\n className={clsx(\n singleCalendarClasses.calendarWrapper,\n classes?.calendarWrapper\n )}\n >\n <HvCalendarHeader\n id={setId(id, \"header\")}\n locale={locale}\n onChange={handleInputChange}\n showEndDate={showEndDate && !isDateSelectionMode}\n showDayOfWeek={showDayOfWeek}\n invalidDateLabel={invalidDateLabel}\n />\n {calViewMode === \"calendar\" && (\n <div>\n <HvComposedNavigation\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleYear={visibleYear || today.getFullYear()}\n visibleMonth={visibleMonth || today.getMonth() + 1}\n />\n <StyledCalendarGrid\n className={clsx(\n singleCalendarClasses.calendarGrid,\n classes?.calendarGrid\n )}\n aria-controls={HvCalendarHeader?.[0]?.id}\n >\n <HvCalendarWeekLabel labels={listWeekdayNames} />\n {calModel.dates.map(renderCalendarDate)}\n </StyledCalendarGrid>\n </div>\n )}\n {calViewMode === \"monthly\" && (\n <HvMonthSelector\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleMonth={visibleMonth || today.getMonth() + 1}\n rangeMode={rangeMode}\n />\n )}\n </StyledCalendarWrapper>\n </StyledCalendarContainer>\n );\n};\n\nexport interface HvSingleCalendarProps {\n /**\n * Styles applied from the theme.\n */\n classes?: HvSingleCalendarClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The class name to add at the root of the single calendar\n */\n className?: string;\n /**\n * The calendar locale.\n *\n */\n locale: string;\n /**\n * Date that the calendar would show.\n */\n value?: string | Date | DateRangeProp;\n /**\n * Date that will be used to know which month and year should be displayed on the calendar. The value of the day is\n * irrelevant.\n */\n visibleDate?: Date;\n /**\n * Controls the visible month of the Calendar\n */\n visibleMonth?: number;\n /**\n * Controls the visible month of the Calendar\n */\n visibleYear?: number;\n /**\n * Callback function to be triggered when the selected date has changed.\n */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n value: Date | DateRangeProp\n ) => void;\n /**\n * Callback function to be triggered when the selected date input has changed.\n */\n onInputChange?: (\n event:\n | React.ChangeEvent<\n HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n >\n | undefined,\n value: Date | DateRangeProp,\n position?: \"left\" | \"right\"\n ) => void;\n /**\n * Callback function to be triggered when visible date has changed.\n */\n onVisibleDateChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n action: VisibilitySelectorActions,\n value?: Date | DateRangeProp | number\n ) => void;\n /**\n * The maximum selectable date after this all values are disabled.\n */\n maximumDate?: Date;\n /**\n * The minimum selectable date before this all values are disabled.\n */\n minimumDate?: Date;\n /**\n * Indicates if header should display end date in a date range.\n */\n showEndDate?: boolean;\n /**\n * Indicates if header should display the day of week.\n */\n showDayOfWeek?: boolean;\n /**\n * Content on the upper part of the calendar.\n */\n children?: React.ReactNode;\n /**\n * Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n"],"names":["Enter","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","keyboardCodes","HvSingleCalendar","classes","className","id","locale","value","visibleMonth","visibleYear","minimumDate","maximumDate","onChange","onInputChange","onVisibleDateChange","showEndDate","showDayOfWeek","invalidDateLabel","children","others","today","Date","localValue","isNil","calViewMode","setCalViewMode","useState","rangeMode","isRange","isDateSelectionMode","isDate","endDate","calModel","generateCalendarModel","startDate","firstDayOfCurrentMonth","year","month","firstDayOfCurrentMonthTime","getTime","listWeekdayNames","useMemo","getWeekdayNamesList","handleChange","event","date","preventDefault","handleInputChange","getNavChild","siblings","i","isKeypress","undefined","handleKeyDown","el","document","activeElement","parent","parentElement","Array","from","getElementsByClassName","singleCalendarClasses","cellContainer","elIndex","indexOf","focus","child","inMonth","getAttribute","renderCalendarDate","currentDate","HvCalendarCell","tabIndex","onKeyDown","calendarValue","StyledCalendarContainer","clsx","calendarContainer","StyledCalendarWrapper","calendarWrapper","_jsx","HvCalendarHeader","setId","HvComposedNavigation","onViewModeChange","getFullYear","getMonth","_jsxs","StyledCalendarGrid","calendarGrid","HvCalendarWeekLabel","labels","dates","map","HvMonthSelector"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SingleCalendar.cjs","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { setId, isKey } from \"@core/utils\";\nimport { ViewMode } from \"../enums\";\nimport { isRange, isDate, getWeekdayNamesList } from \"../utils\";\nimport { generateCalendarModel } from \"../model\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"..\";\nimport {\n StyledCalendarContainer,\n StyledCalendarGrid,\n StyledCalendarWrapper,\n} from \"./SingleCalendar.styles\";\nimport singleCalendarClasses, {\n HvSingleCalendarClasses,\n} from \"./singleCalendarClasses\";\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { HvCalendarWeekLabel } from \"../CalendarWeekLabels\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\n\nexport const HvSingleCalendar = ({\n classes,\n className,\n id,\n locale = \"en-US\",\n value,\n visibleMonth,\n visibleYear,\n minimumDate,\n maximumDate,\n onChange,\n onInputChange,\n onVisibleDateChange,\n showEndDate,\n showDayOfWeek,\n invalidDateLabel,\n children,\n ...others\n}: HvSingleCalendarProps) => {\n // TODO: refactor this out\n // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n const today = new Date();\n const localValue = isNil(value) ? today : value;\n\n const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n const rangeMode = isRange(localValue);\n const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n const calModel = rangeMode\n ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n : generateCalendarModel(localValue, visibleMonth, visibleYear);\n const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n const listWeekdayNames = useMemo(\n () => getWeekdayNamesList(locale, \"narrow\"),\n [locale]\n );\n\n const handleChange = (event, date: Date | DateRangeProp) => {\n event?.preventDefault();\n onChange?.(event, date);\n };\n\n const handleInputChange = (event, date) => {\n event?.preventDefault();\n onInputChange?.(event, date);\n };\n\n const getNavChild = (event: KeyboardEvent, siblings, i: number) => {\n if (isKey(event, \"ArrowLeft\")) return siblings[i - 1];\n if (isKey(event, \"ArrowRight\")) return siblings[i + 1];\n if (isKey(event, \"ArrowUp\")) return siblings[i - 7];\n if (isKey(event, \"ArrowDown\")) return siblings[i + 7];\n return undefined;\n };\n\n const handleKeyDown = (event) => {\n // This code is very brittle and should be managed with the focus wrapper\n const el = document?.activeElement;\n const parent = el?.parentElement?.parentElement;\n const siblings =\n parent != null\n ? Array.from(\n parent.getElementsByClassName(\n singleCalendarClasses.cellContainer as string\n )\n )\n : [];\n const elIndex = el ? siblings.indexOf(el) : 0;\n\n if (isKey(event, \"Enter\")) {\n (el as HTMLElement).focus();\n return;\n }\n\n const child = getNavChild(event, siblings, elIndex);\n\n if (child) {\n const inMonth = child.getAttribute(\"data-in-month\");\n if (inMonth === \"true\") {\n event?.preventDefault();\n child?.focus();\n }\n }\n };\n\n /**\n * Renders the element representing the received date.\n *\n * @param currentDate - The array representing the date [YYYY, MM, DD].\n * @memberOf Calendar\n */\n const renderCalendarDate = (currentDate) => {\n return (\n <HvCalendarCell\n classes={classes}\n key={currentDate}\n tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={currentDate}\n today={today}\n calendarValue={localValue}\n rangeMode={rangeMode}\n isDateSelectionMode={isDateSelectionMode}\n locale={locale}\n firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n maximumDate={maximumDate}\n minimumDate={minimumDate}\n />\n );\n };\n\n return (\n <StyledCalendarContainer\n className={clsx(\n className,\n singleCalendarClasses.calendarContainer,\n classes?.calendarContainer\n )}\n {...others}\n >\n <StyledCalendarWrapper\n id={id}\n className={clsx(\n singleCalendarClasses.calendarWrapper,\n classes?.calendarWrapper\n )}\n >\n <HvCalendarHeader\n id={setId(id, \"header\")}\n locale={locale}\n onChange={handleInputChange}\n showEndDate={showEndDate && !isDateSelectionMode}\n showDayOfWeek={showDayOfWeek}\n invalidDateLabel={invalidDateLabel}\n />\n {calViewMode === \"calendar\" && (\n <div>\n <HvComposedNavigation\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleYear={visibleYear || today.getFullYear()}\n visibleMonth={visibleMonth || today.getMonth() + 1}\n />\n <StyledCalendarGrid\n className={clsx(\n singleCalendarClasses.calendarGrid,\n classes?.calendarGrid\n )}\n aria-controls={HvCalendarHeader?.[0]?.id}\n >\n <HvCalendarWeekLabel labels={listWeekdayNames} />\n {calModel.dates.map(renderCalendarDate)}\n </StyledCalendarGrid>\n </div>\n )}\n {calViewMode === \"monthly\" && (\n <HvMonthSelector\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleMonth={visibleMonth || today.getMonth() + 1}\n rangeMode={rangeMode}\n />\n )}\n </StyledCalendarWrapper>\n </StyledCalendarContainer>\n );\n};\n\nexport interface HvSingleCalendarProps {\n /**\n * Styles applied from the theme.\n */\n classes?: HvSingleCalendarClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The class name to add at the root of the single calendar\n */\n className?: string;\n /**\n * The calendar locale.\n *\n */\n locale: string;\n /**\n * Date that the calendar would show.\n */\n value?: string | Date | DateRangeProp;\n /**\n * Date that will be used to know which month and year should be displayed on the calendar. The value of the day is\n * irrelevant.\n */\n visibleDate?: Date;\n /**\n * Controls the visible month of the Calendar\n */\n visibleMonth?: number;\n /**\n * Controls the visible month of the Calendar\n */\n visibleYear?: number;\n /**\n * Callback function to be triggered when the selected date has changed.\n */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n value: Date | DateRangeProp\n ) => void;\n /**\n * Callback function to be triggered when the selected date input has changed.\n */\n onInputChange?: (\n event:\n | React.ChangeEvent<\n HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n >\n | undefined,\n value: Date | DateRangeProp,\n position?: \"left\" | \"right\"\n ) => void;\n /**\n * Callback function to be triggered when visible date has changed.\n */\n onVisibleDateChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n action: VisibilitySelectorActions,\n value?: Date | DateRangeProp | number\n ) => void;\n /**\n * The maximum selectable date after this all values are disabled.\n */\n maximumDate?: Date;\n /**\n * The minimum selectable date before this all values are disabled.\n */\n minimumDate?: Date;\n /**\n * Indicates if header should display end date in a date range.\n */\n showEndDate?: boolean;\n /**\n * Indicates if header should display the day of week.\n */\n showDayOfWeek?: boolean;\n /**\n * Content on the upper part of the calendar.\n */\n children?: React.ReactNode;\n /**\n * Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n"],"names":["HvSingleCalendar","classes","className","id","locale","value","visibleMonth","visibleYear","minimumDate","maximumDate","onChange","onInputChange","onVisibleDateChange","showEndDate","showDayOfWeek","invalidDateLabel","children","others","today","Date","localValue","isNil","calViewMode","setCalViewMode","useState","rangeMode","isRange","isDateSelectionMode","isDate","endDate","calModel","generateCalendarModel","startDate","firstDayOfCurrentMonth","year","month","firstDayOfCurrentMonthTime","getTime","listWeekdayNames","useMemo","getWeekdayNamesList","handleChange","event","date","preventDefault","handleInputChange","getNavChild","siblings","i","isKey","undefined","handleKeyDown","el","document","activeElement","parent","parentElement","Array","from","getElementsByClassName","singleCalendarClasses","cellContainer","elIndex","indexOf","focus","child","inMonth","getAttribute","renderCalendarDate","currentDate","HvCalendarCell","tabIndex","onKeyDown","calendarValue","StyledCalendarContainer","clsx","calendarContainer","StyledCalendarWrapper","calendarWrapper","_jsx","HvCalendarHeader","setId","HvComposedNavigation","onViewModeChange","getFullYear","getMonth","_jsxs","StyledCalendarGrid","calendarGrid","HvCalendarWeekLabel","labels","dates","map","HvMonthSelector"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\">,\n HvBaseProps {\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = ({\n classes: classesProp,\n className,\n children,\n fullscreen = false,\n ...others\n}: HvDialogActionsProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiDialogActions\n className={className}\n classes={{\n root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n spacing: classes.spacing,\n }}\n {...others}\n >\n {children}\n </MuiDialogActions>\n );\n};\n"],"names":["HvDialogActions","classes","classesProp","className","children","fullscreen","others","cx","useClasses","MuiDialogActions","root","spacing"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\">,\n HvBaseProps {\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = ({\n classes: classesProp,\n className,\n children,\n fullscreen = false,\n ...others\n}: HvDialogActionsProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiDialogActions\n className={className}\n classes={{\n root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n spacing: classes.spacing,\n }}\n {...others}\n >\n {children}\n </MuiDialogActions>\n );\n};\n"],"names":["HvDialogActions","classes","classesProp","className","children","fullscreen","others","cx","useClasses","MuiDialogActions","root","spacing"],"mappings":";;;;;;;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACb,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEL;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,eAAAA,WAAWN,WAAW;AAE9C,wCACGO,0BAAAA,SAAgB;AAAA,IACfN;AAAAA,IACAF,SAAS;AAAA,MACPS,MAAMH,GAAGN,QAAQS,MAAM;AAAA,QAAE,CAACT,QAAQI,UAAU,GAAGA;AAAAA,MAAAA,CAAY;AAAA,MAC3DM,SAASV,QAAQU;AAAAA,IACnB;AAAA,IAAE,GACEL;AAAAA,IAAMF;AAAAA,EAAAA,CAGM;AAEtB;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.cjs","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { HvTypography } from \"@core/components\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as dialogContentClasses };\n\nexport type HvDialogContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogContentProps\n extends Omit<MuiDialogContentProps, \"classes\">,\n HvBaseProps {\n /** Content should be indented in relationship to the Dialog title. */\n indentContent?: boolean;\n classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = ({\n classes: classesProp,\n className,\n children,\n indentContent = false,\n}: HvDialogContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <HvTypography\n component={MuiDialogContent}\n className={cx(\n classes.root,\n { [classes.textContent]: !!indentContent },\n className\n )}\n >\n {children}\n </HvTypography>\n );\n};\n"],"names":["HvDialogContent","classes","classesProp","className","children","indentContent","cx","useClasses","HvTypography","component","MuiDialogContent","root","textContent"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Content.cjs","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { HvTypography } from \"@core/components\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as dialogContentClasses };\n\nexport type HvDialogContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogContentProps\n extends Omit<MuiDialogContentProps, \"classes\">,\n HvBaseProps {\n /** Content should be indented in relationship to the Dialog title. */\n indentContent?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = ({\n classes: classesProp,\n className,\n children,\n indentContent = false,\n}: HvDialogContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <HvTypography\n component={MuiDialogContent}\n className={cx(\n classes.root,\n { [classes.textContent]: !!indentContent },\n className\n )}\n >\n {children}\n </HvTypography>\n );\n};\n"],"names":["HvDialogContent","classes","classesProp","className","children","indentContent","cx","useClasses","HvTypography","component","MuiDialogContent","root","textContent"],"mappings":";;;;;;;;AAuBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,gBAAgB;AACI,MAAM;AACpB,QAAA;AAAA,IAAEJ;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,eAAAA,WAAWL,WAAW;AAE9C,wCACGM,WAAAA,cAAY;AAAA,IACXC,WAAWC,0BAAAA;AAAAA,IACXP,WAAWG,GACTL,QAAQU,MACR;AAAA,MAAE,CAACV,QAAQW,WAAW,GAAG,CAAC,CAACP;AAAAA,OAC3BF,SACF;AAAA,IAAEC;AAAAA,EAAAA,CAGU;AAElB;;;"}
|
|
@@ -17,6 +17,7 @@ const React__default = /* @__PURE__ */ _interopDefault(React);
|
|
|
17
17
|
const MuiDialog__default = /* @__PURE__ */ _interopDefault(MuiDialog);
|
|
18
18
|
const MuiBackdrop__default = /* @__PURE__ */ _interopDefault(MuiBackdrop);
|
|
19
19
|
const HvDialog = ({
|
|
20
|
+
variant,
|
|
20
21
|
classes: classesProp,
|
|
21
22
|
className,
|
|
22
23
|
id,
|
|
@@ -63,55 +64,55 @@ const HvDialog = ({
|
|
|
63
64
|
...backdropProps
|
|
64
65
|
})
|
|
65
66
|
}), [open, wrappedClose]);
|
|
66
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
background: hexToRgbA.default(((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || uikitStyles.theme.colors.atmo4, 0.8)
|
|
87
|
-
}), classes.background)
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
},
|
|
91
|
-
PaperProps: {
|
|
67
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, {
|
|
68
|
+
container: typeof window !== "undefined" ? (
|
|
69
|
+
// TODO: review
|
|
70
|
+
// eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
|
|
71
|
+
document.getElementById(rootId || "") || document.body
|
|
72
|
+
) : void 0,
|
|
73
|
+
className: cx(classes.root, className),
|
|
74
|
+
classes: {
|
|
75
|
+
container: css({
|
|
76
|
+
position: "relative"
|
|
77
|
+
})
|
|
78
|
+
},
|
|
79
|
+
id,
|
|
80
|
+
ref: measuredRef,
|
|
81
|
+
open,
|
|
82
|
+
fullScreen: fullscreen,
|
|
83
|
+
onClose: (event, reason) => wrappedClose(event, void 0, reason),
|
|
84
|
+
slots,
|
|
85
|
+
slotProps: {
|
|
86
|
+
backdrop: {
|
|
92
87
|
classes: {
|
|
93
88
|
root: cx(css({
|
|
94
|
-
|
|
95
|
-
}), classes.
|
|
96
|
-
fullscreen,
|
|
97
|
-
[classes.fullscreen]: fullscreen
|
|
98
|
-
})
|
|
89
|
+
background: hexToRgbA.default(((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || uikitStyles.theme.colors.atmo4, 0.8)
|
|
90
|
+
}), classes.background)
|
|
99
91
|
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
variant
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
PaperProps: {
|
|
95
|
+
classes: {
|
|
96
|
+
root: cx(css({
|
|
97
|
+
position: "absolute"
|
|
98
|
+
}), classes.paper, variant && cx(classes.statusBar, classes[variant]), {
|
|
99
|
+
[classes.fullscreen]: fullscreen
|
|
100
|
+
})
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
"aria-modal": true,
|
|
104
|
+
...others,
|
|
105
|
+
children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
|
|
106
|
+
id: setId.setId(id, "close"),
|
|
107
|
+
className: classes.closeButton,
|
|
108
|
+
variant: "secondaryGhost",
|
|
109
|
+
onClick: (event) => wrappedClose(event, true, void 0),
|
|
110
|
+
"aria-label": buttonTitle,
|
|
111
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {})
|
|
112
|
+
}), children && typeof children === "object" ? React__default.default.Children.map(children, (c) => c && React__default.default.cloneElement(c, {
|
|
113
|
+
fullscreen
|
|
114
|
+
})) : children]
|
|
115
|
+
});
|
|
115
116
|
};
|
|
116
117
|
exports.dialogClasses = Dialog_styles.staticClasses;
|
|
117
118
|
exports.HvDialog = HvDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport fade from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { HvButton } from \"..\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /**\n * Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n}\n\nexport const HvDialog = ({\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n delete (others as any).fullScreen;\n\n const { rootId, activeTheme, selectedMode } = useTheme();\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = useCallback(\n (\n event: any,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation || !disableBackdropClick) {\n onClose?.(event, reason);\n }\n },\n [onClose, disableBackdropClick]\n );\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n const slots = useMemo<MuiDialogProps[\"slots\"]>(\n () => ({\n backdrop: (backdropProps) => (\n <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n ),\n }),\n [open, wrappedClose]\n );\n\n return (\n <MuiDialog\n // TODO: review\n
|
|
1
|
+
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport fade from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { HvButton } from \"..\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /**\n * Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n variant?: \"success\" | \"error\" | \"warning\";\n}\n\nexport const HvDialog = ({\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n delete (others as any).fullScreen;\n\n const { rootId, activeTheme, selectedMode } = useTheme();\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = useCallback(\n (\n event: any,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation || !disableBackdropClick) {\n onClose?.(event, reason);\n }\n },\n [onClose, disableBackdropClick]\n );\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n const slots = useMemo<MuiDialogProps[\"slots\"]>(\n () => ({\n backdrop: (backdropProps) => (\n <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n ),\n }),\n [open, wrappedClose]\n );\n\n return (\n <MuiDialog\n container={\n typeof window !== \"undefined\"\n ? // TODO: review\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n document.getElementById(rootId || \"\") || document.body\n : undefined\n }\n className={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n slots={slots}\n slotProps={{\n backdrop: {\n classes: {\n root: cx(\n css({\n background: fade(\n activeTheme?.colors?.modes[selectedMode].atmo4 ||\n theme.colors.atmo4,\n 0.8\n ),\n }),\n classes.background\n ),\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n }\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"secondaryGhost\"\n onClick={(event) => wrappedClose(event, true, undefined)}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </HvButton>\n {children && typeof children === \"object\"\n ? React.Children.map(\n children,\n (c: React.ReactNode) =>\n c && React.cloneElement(c as React.ReactElement, { fullscreen })\n )\n : children}\n </MuiDialog>\n );\n};\n"],"names":["HvDialog","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","css","cx","useClasses","fullScreen","rootId","activeTheme","selectedMode","useTheme","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","MuiBackdrop","onClick","MuiDialog","container","window","body","undefined","root","position","ref","slotProps","background","fade","colors","modes","atmo4","theme","PaperProps","paper","statusBar","HvButton","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":"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"}
|
|
@@ -23,6 +23,21 @@ const {
|
|
|
23
23
|
right: uikitStyles.theme.space.sm,
|
|
24
24
|
width: 32,
|
|
25
25
|
height: 32
|
|
26
|
+
},
|
|
27
|
+
statusBar: {
|
|
28
|
+
borderTopLeftRadius: 0,
|
|
29
|
+
borderTopRightRadius: 0,
|
|
30
|
+
borderTopWidth: 4,
|
|
31
|
+
borderTopStyle: "solid"
|
|
32
|
+
},
|
|
33
|
+
success: {
|
|
34
|
+
borderTopColor: uikitStyles.theme.colors.positive
|
|
35
|
+
},
|
|
36
|
+
error: {
|
|
37
|
+
borderTopColor: uikitStyles.theme.colors.negative
|
|
38
|
+
},
|
|
39
|
+
warning: {
|
|
40
|
+
borderTopColor: uikitStyles.theme.colors.warning
|
|
26
41
|
}
|
|
27
42
|
});
|
|
28
43
|
exports.staticClasses = staticClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n root: {},\n background: {},\n paper: {\n color: theme.colors.secondary,\n backgroundColor: theme.colors.atmo1,\n boxShadow: [\"none\", theme.colors.shadow],\n borderRadius: theme.dialog.borderRadius,\n },\n fullscreen: {},\n closeButton: {\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","background","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","dialog","fullscreen","closeButton","padding","minWidth","position","top","space","sm","right","width","height"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,kBAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,YAAAA,MAAMQ,OAAOD;AAAAA,EAC7B;AAAA,EACAE,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKd,YAAAA,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,YAAAA,MAAMe,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF,CAAC;;;"}
|
|
1
|
+
{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n root: {},\n background: {},\n paper: {\n color: theme.colors.secondary,\n backgroundColor: theme.colors.atmo1,\n boxShadow: [\"none\", theme.colors.shadow],\n borderRadius: theme.dialog.borderRadius,\n },\n fullscreen: {},\n closeButton: {\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n },\n statusBar: {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTopWidth: 4,\n borderTopStyle: \"solid\",\n },\n success: {\n borderTopColor: theme.colors.positive,\n },\n error: {\n borderTopColor: theme.colors.negative,\n },\n warning: {\n borderTopColor: theme.colors.warning,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","background","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","dialog","fullscreen","closeButton","padding","minWidth","position","top","space","sm","right","width","height","statusBar","borderTopLeftRadius","borderTopRightRadius","borderTopWidth","borderTopStyle","success","borderTopColor","positive","error","negative","warning"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,kBAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,YAAAA,MAAMQ,OAAOD;AAAAA,EAC7B;AAAA,EACAE,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKd,YAAAA,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,YAAAA,MAAMe,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACAC,WAAW;AAAA,IACTC,qBAAqB;AAAA,IACrBC,sBAAsB;AAAA,IACtBC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IACPC,gBAAgB1B,YAAAA,MAAMC,OAAO0B;AAAAA,EAC/B;AAAA,EACAC,OAAO;AAAA,IACLF,gBAAgB1B,YAAAA,MAAMC,OAAO4B;AAAAA,EAC/B;AAAA,EACAC,SAAS;AAAA,IACPJ,gBAAgB1B,YAAAA,MAAMC,OAAO6B;AAAAA,EAC/B;AACF,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\n\nimport { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames, iconVariant } from \"@core/utils\";\nimport { useTheme } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"default\";\n\nexport interface HvDialogTitleProps\n extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\">,\n HvBaseProps<HTMLSpanElement, \"color\"> {\n /** Variant of the
|
|
1
|
+
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\n\nimport { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames, iconVariant } from \"@core/utils\";\nimport { useTheme } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"default\";\n\nexport interface HvDialogTitleProps\n extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\">,\n HvBaseProps<HTMLSpanElement, \"color\"> {\n /** Variant of the dialog title. */\n variant?: HvDialogTitleVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = ({\n classes: classesProp,\n className,\n children,\n variant = \"default\",\n showIcon = true,\n customIcon = null,\n ...others\n}: HvDialogTitleProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n const isString = typeof children === \"string\";\n\n const { fullscreen } = others as any;\n delete (others as any).fullscreen;\n\n const icon = customIcon || (showIcon && iconVariant(variant));\n\n return (\n <MuiDialogTitle\n className={cx(\n !fullscreen && css({ flex: 1 }),\n classes.root,\n {\n [classes.fullscreen]: fullscreen,\n },\n className\n )}\n {...others}\n >\n <div className={classes.messageContainer}>\n {icon}\n <div className={cx({ [classes.textWithIcon]: !!icon })}>\n {!isString && children}\n {isString && (\n <HvTypography variant={activeTheme?.dialog.titleVariant}>\n {children}\n </HvTypography>\n )}\n </div>\n </div>\n </MuiDialogTitle>\n );\n};\n"],"names":["HvDialogTitle","classes","classesProp","className","children","variant","showIcon","customIcon","others","css","cx","useClasses","activeTheme","useTheme","isString","fullscreen","icon","iconVariant","MuiDialogTitle","flex","root","messageContainer","_jsxs","textWithIcon","HvTypography","dialog","titleVariant"],"mappings":";;;;;;;;;;AAmCO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,EACb,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,aAAAA,WAAWT,WAAW;AAE7C,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAE3BC,QAAAA,WAAW,OAAOV,aAAa;AAE/B,QAAA;AAAA,IAAEW;AAAAA,EAAeP,IAAAA;AACvB,SAAQA,OAAeO;AAEvB,QAAMC,OAAOT,cAAeD,YAAYW,YAAAA,QAAYZ,OAAO;AAE3D,wCACGa,wBAAAA,SAAc;AAAA,IACbf,WAAWO,GACT,CAACK,cAAcN,IAAI;AAAA,MAAEU,MAAM;AAAA,IAAA,CAAG,GAC9BlB,QAAQmB,MACR;AAAA,MACE,CAACnB,QAAQc,UAAU,GAAGA;AAAAA,OAExBZ,SACF;AAAA,IAAE,GACEK;AAAAA,IAAMJ,0CAEV,OAAA;AAAA,MAAKD,WAAWF,QAAQoB;AAAAA,MAAiBjB,UAAA,CACtCY,MACDM,2BAAAA,KAAA,OAAA;AAAA,QAAKnB,WAAWO,GAAG;AAAA,UAAE,CAACT,QAAQsB,YAAY,GAAG,CAAC,CAACP;AAAAA,QAAAA,CAAM;AAAA,QAAEZ,UAAA,CACpD,CAACU,YAAYV,UACbU,2CACEU,yBAAY;AAAA,UAACnB,SAASO,2CAAaa,OAAOC;AAAAA,UAAatB;AAAAA,QAAAA,CAE1C,CACf;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACS;AAEpB;;;"}
|
|
@@ -13,8 +13,7 @@ const List = require("../List/List.cjs");
|
|
|
13
13
|
const useControlled = require("../../hooks/useControlled.cjs");
|
|
14
14
|
const setId = require("../../utils/setId.cjs");
|
|
15
15
|
const Button = require("../Button/Button.cjs");
|
|
16
|
-
const
|
|
17
|
-
const keyboardCodes = require("../../utils/keyboardUtils/keyboardCodes.cjs");
|
|
16
|
+
const keyboardUtils = require("../../utils/keyboardUtils.cjs");
|
|
18
17
|
const HvDropDownMenu = ({
|
|
19
18
|
id: idProp,
|
|
20
19
|
classes: classesProp,
|
|
@@ -45,7 +44,7 @@ const HvDropDownMenu = ({
|
|
|
45
44
|
onToggle == null ? void 0 : onToggle(event, false);
|
|
46
45
|
};
|
|
47
46
|
const handleKeyDown = (event) => {
|
|
48
|
-
if (
|
|
47
|
+
if (keyboardUtils.isKey(event, "Tab")) {
|
|
49
48
|
const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
|
|
50
49
|
if (node)
|
|
51
50
|
setTimeout(() => node.focus(), 0);
|