@salt-ds/lab 1.0.0-alpha.52 → 1.0.0-alpha.54
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/css/salt-lab.css +280 -38
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-cjs/calendar/Calendar.js +55 -26
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarDateGrid.css.js +6 -0
- package/dist-cjs/calendar/CalendarDateGrid.css.js.map +1 -0
- package/dist-cjs/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +37 -14
- package/dist-cjs/calendar/CalendarDateGrid.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.js +7 -5
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +4 -3
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +2 -4
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +16 -43
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/carousel/Carousel.js +5 -5
- package/dist-cjs/carousel/Carousel.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.js +2 -2
- package/dist-cjs/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-cjs/contact-details/ContactMetadata.js +2 -2
- package/dist-cjs/contact-details/ContactMetadata.js.map +1 -1
- package/dist-cjs/date-input/DateInputRange.js +2 -0
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +2 -0
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +40 -5
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js +7 -3
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +5 -4
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangePanel.js +33 -9
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +5 -4
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +19 -5
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-cjs/date-picker/useDatePicker.js +91 -63
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js +4 -2
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/index.js +10 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/menu-button/MenuButtonTrigger.js +2 -2
- package/dist-cjs/menu-button/MenuButtonTrigger.js.map +1 -1
- package/dist-cjs/query-input/internal/CategoryListItem.js +2 -2
- package/dist-cjs/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-cjs/query-input/internal/ValueList.js +2 -2
- package/dist-cjs/query-input/internal/ValueList.js.map +1 -1
- package/dist-cjs/search-input/SearchInput.js +2 -1
- package/dist-cjs/search-input/SearchInput.js.map +1 -1
- package/dist-cjs/static-list/StaticList.css.js +6 -0
- package/dist-cjs/static-list/StaticList.css.js.map +1 -0
- package/dist-cjs/static-list/StaticList.js +32 -0
- package/dist-cjs/static-list/StaticList.js.map +1 -0
- package/dist-cjs/static-list/StaticListItem.css.js +6 -0
- package/dist-cjs/static-list/StaticListItem.css.js.map +1 -0
- package/dist-cjs/static-list/StaticListItem.js +33 -0
- package/dist-cjs/static-list/StaticListItem.js.map +1 -0
- package/dist-cjs/static-list/StaticListItemContent.css.js +6 -0
- package/dist-cjs/static-list/StaticListItemContent.css.js.map +1 -0
- package/dist-cjs/static-list/StaticListItemContent.js +30 -0
- package/dist-cjs/static-list/StaticListItemContent.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +8 -8
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-cjs/stepper-input/StepperInput.css.js +1 -1
- package/dist-cjs/stepper-input/StepperInput.js +214 -29
- package/dist-cjs/stepper-input/StepperInput.js.map +1 -1
- package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js +54 -0
- package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-cjs/stepper-input/internal/utils.js +43 -0
- package/dist-cjs/stepper-input/internal/utils.js.map +1 -0
- package/dist-cjs/stepper-input/useStepperInput.js +88 -172
- package/dist-cjs/stepper-input/useStepperInput.js.map +1 -1
- package/dist-cjs/tabs/Tab.js +14 -12
- package/dist-cjs/tabs/Tab.js.map +1 -1
- package/dist-cjs/tabs/Tabstrip.js +2 -1
- package/dist-cjs/tabs/Tabstrip.js.map +1 -1
- package/dist-cjs/tabs-next/OverflowMenu.js +2 -2
- package/dist-cjs/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-cjs/tokenized-input/TokenizedInputBase.js +3 -3
- package/dist-cjs/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-cjs/tokenized-input/internal/InputPill.js +2 -2
- package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +3 -3
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-cjs/tokenized-input-next/internal/InputPill.js +2 -2
- package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +2 -2
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-es/calendar/Calendar.js +57 -28
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarDateGrid.css.js +4 -0
- package/dist-es/calendar/CalendarDateGrid.css.js.map +1 -0
- package/dist-es/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +37 -14
- package/dist-es/calendar/CalendarDateGrid.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.js +8 -6
- package/dist-es/calendar/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +4 -3
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +2 -4
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +16 -43
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/carousel/Carousel.js +6 -6
- package/dist-es/carousel/Carousel.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.js +3 -3
- package/dist-es/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-es/contact-details/ContactMetadata.js +3 -3
- package/dist-es/contact-details/ContactMetadata.js.map +1 -1
- package/dist-es/date-input/DateInputRange.js +2 -0
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +2 -0
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +40 -5
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.js +7 -3
- package/dist-es/date-picker/DatePickerActions.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +5 -4
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangePanel.js +33 -9
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +5 -4
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSinglePanel.js +19 -5
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-es/date-picker/useDatePicker.js +92 -64
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/dropdown/DropdownButton.js +6 -4
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/index.js +5 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/menu-button/MenuButtonTrigger.js +3 -3
- package/dist-es/menu-button/MenuButtonTrigger.js.map +1 -1
- package/dist-es/query-input/internal/CategoryListItem.js +3 -3
- package/dist-es/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-es/query-input/internal/ValueList.js +3 -3
- package/dist-es/query-input/internal/ValueList.js.map +1 -1
- package/dist-es/search-input/SearchInput.js +3 -2
- package/dist-es/search-input/SearchInput.js.map +1 -1
- package/dist-es/static-list/StaticList.css.js +4 -0
- package/dist-es/static-list/StaticList.css.js.map +1 -0
- package/dist-es/static-list/StaticList.js +28 -0
- package/dist-es/static-list/StaticList.js.map +1 -0
- package/dist-es/static-list/StaticListItem.css.js +4 -0
- package/dist-es/static-list/StaticListItem.css.js.map +1 -0
- package/dist-es/static-list/StaticListItem.js +29 -0
- package/dist-es/static-list/StaticListItem.js.map +1 -0
- package/dist-es/static-list/StaticListItemContent.css.js +4 -0
- package/dist-es/static-list/StaticListItemContent.css.js.map +1 -0
- package/dist-es/static-list/StaticListItemContent.js +26 -0
- package/dist-es/static-list/StaticListItemContent.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +9 -9
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-es/stepper-input/StepperInput.css.js +1 -1
- package/dist-es/stepper-input/StepperInput.js +216 -31
- package/dist-es/stepper-input/StepperInput.js.map +1 -1
- package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js +50 -0
- package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-es/stepper-input/internal/utils.js +32 -0
- package/dist-es/stepper-input/internal/utils.js.map +1 -0
- package/dist-es/stepper-input/useStepperInput.js +88 -172
- package/dist-es/stepper-input/useStepperInput.js.map +1 -1
- package/dist-es/tabs/Tab.js +15 -13
- package/dist-es/tabs/Tab.js.map +1 -1
- package/dist-es/tabs/Tabstrip.js +4 -3
- package/dist-es/tabs/Tabstrip.js.map +1 -1
- package/dist-es/tabs-next/OverflowMenu.js +3 -3
- package/dist-es/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-es/tokenized-input/TokenizedInputBase.js +3 -3
- package/dist-es/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-es/tokenized-input/internal/InputPill.js +2 -2
- package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.js +3 -3
- package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-es/tokenized-input-next/internal/InputPill.js +2 -2
- package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js +3 -3
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-types/calendar/Calendar.d.ts +2 -15
- package/dist-types/calendar/CalendarDateGrid.d.ts +10 -0
- package/dist-types/calendar/{internal/CalendarWeekHeader.d.ts → CalendarWeekHeader.d.ts} +1 -1
- package/dist-types/calendar/index.d.ts +2 -0
- package/dist-types/calendar/internal/CalendarMonth.d.ts +9 -1
- package/dist-types/calendar/useCalendarSelection.d.ts +0 -7
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +17 -1
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +9 -1
- package/dist-types/index.d.ts +1 -0
- package/dist-types/static-list/StaticList.d.ts +8 -0
- package/dist-types/static-list/StaticListItem.d.ts +4 -0
- package/dist-types/static-list/StaticListItemContent.d.ts +8 -0
- package/dist-types/static-list/index.d.ts +3 -0
- package/dist-types/stepper-input/StepperInput.d.ts +66 -19
- package/dist-types/stepper-input/internal/useActivateWhileMouseDown.d.ts +5 -0
- package/dist-types/stepper-input/internal/utils.d.ts +8 -0
- package/dist-types/stepper-input/useStepperInput.d.ts +21 -8
- package/package.json +2 -2
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js +0 -6
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarCarousel.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/dist-cjs/stepper-input/internal/useSpinner.js +0 -33
- package/dist-cjs/stepper-input/internal/useSpinner.js.map +0 -1
- package/dist-es/calendar/internal/CalendarCarousel.css.js +0 -4
- package/dist-es/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/dist-es/calendar/internal/CalendarCarousel.js.map +0 -1
- package/dist-es/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/dist-es/stepper-input/internal/useSpinner.js +0 -29
- package/dist-es/stepper-input/internal/useSpinner.js.map +0 -1
- package/dist-types/calendar/internal/CalendarCarousel.d.ts +0 -3
- package/dist-types/stepper-input/internal/useSpinner.d.ts +0 -5
- /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
- /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
- /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
- /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport {
|
|
1
|
+
{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIcon,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ForwardedRef,\n type MouseEvent,\n type ReactElement,\n cloneElement,\n forwardRef,\n useCallback,\n useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n useCollectionItems,\n useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n /**\n * Trigger button icon\n */\n triggerButtonIcon?: JSX.Element;\n /**\n * Trigger button text\n */\n triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n {\n children,\n className,\n defaultIsOpen,\n isOpen: isOpenProp,\n onOpenChange,\n triggerButtonIcon,\n triggerButtonLabel,\n ...props\n }: DropdownPanelProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overflow-panel\",\n css: overflowPanelCss,\n window: targetWindow,\n });\n const { OverflowIcon } = useIcon();\n const id = useId();\n const collectionHook = useCollectionItems<ReactElement>({\n id,\n children,\n });\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen || false,\n name: \"DropdownPanel\",\n });\n\n const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n useKeyboardNavigationPanel({\n cycleFocus: true,\n defaultHighlightedIndex: 0,\n focusOnHighlight: true,\n indexPositions: collectionHook.data,\n });\n\n const focusTrigger = useCallback(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, []);\n\n const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n const handleItemClick = (evt: MouseEvent) => {\n // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n setIsOpen(false);\n focusTrigger();\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange?.(open);\n };\n\n const getTriggerButtonIcon = () =>\n (triggerButtonIcon ?? triggerButtonLabel === undefined) ? (\n <OverflowIcon />\n ) : undefined;\n\n return (\n <DropdownBase\n {...props}\n className={clsx(withBaseName(), className)}\n isOpen={isOpen}\n onOpenChange={handleOpenChange}\n placement=\"bottom-end\"\n ref={forwardedRef}\n >\n <Button variant=\"secondary\" ref={triggerRef}>\n {getTriggerButtonIcon()}\n {triggerButtonLabel}\n </Button>\n <div\n className={withBaseName(\"content\")}\n ref={setPanelRef}\n tabIndex={-1}\n {...keyboardHook.listProps}\n >\n {collectionHook.data.map((item) => {\n const { type } = item.value as ReactElement;\n if (type === OverflowSeparator) {\n return item.value;\n }\n const formFieldProps = {\n id: item.id,\n inOverflowPanel: true,\n key: item.id,\n onClick: handleItemClick,\n } as ToolbarFieldProps;\n\n if (type === ToolbarField) {\n return cloneElement(item.value as ReactElement, formFieldProps);\n }\n return (\n <ToolbarField {...formFieldProps} key={item.id}>\n {item.value}\n </ToolbarField>\n );\n })}\n </div>\n </DropdownBase>\n );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","overflowPanelCss","useIcon","useId","useCollectionItems","useRef","useControlled","useKeyboardNavigationPanel","useCallback","jsx","jsxs","DropdownBase","clsx","Button","OverflowSeparator","ToolbarField","cloneElement","createElement"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { useIcon } from '@salt-ds/core';
|
|
3
3
|
import { Children, isValidElement, useCallback } from 'react';
|
|
4
4
|
import { MenuButton } from '../../menu-button/MenuButton.js';
|
|
5
5
|
import { useFocusMenuRemount } from './useFocusMenuRemount.js';
|
|
@@ -16,6 +16,7 @@ const BreadcrumbsCollapsed = ({
|
|
|
16
16
|
}
|
|
17
17
|
return "";
|
|
18
18
|
});
|
|
19
|
+
const { OverflowIcon } = useIcon();
|
|
19
20
|
const key = keys ? keys.join("") : "";
|
|
20
21
|
const { ref, shouldFocusOnMount } = useFocusMenuRemount(key);
|
|
21
22
|
const itemToString = useCallback((child) => {
|
|
@@ -50,7 +51,7 @@ const BreadcrumbsCollapsed = ({
|
|
|
50
51
|
hideCaret: true,
|
|
51
52
|
...rest,
|
|
52
53
|
ref,
|
|
53
|
-
children: /* @__PURE__ */ jsx(
|
|
54
|
+
children: /* @__PURE__ */ jsx(OverflowIcon, {})
|
|
54
55
|
});
|
|
55
56
|
};
|
|
56
57
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbsCollapsed.js","sources":["../src/breadcrumbs/internal/BreadcrumbsCollapsed.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"BreadcrumbsCollapsed.js","sources":["../src/breadcrumbs/internal/BreadcrumbsCollapsed.tsx"],"sourcesContent":["import { useIcon } from \"@salt-ds/core\";\nimport {\n Children,\n type Component,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n isValidElement,\n useCallback,\n} from \"react\";\nimport type { CascadingMenuProps, MenuDescriptor } from \"../../cascading-menu\";\nimport { MenuButton, type MenuButtonProps } from \"../../menu-button\";\nimport type { BreadcrumbProps } from \"../Breadcrumb\";\nimport { useFocusMenuRemount } from \"./useFocusMenuRemount\";\n\nexport interface BreadcrumbsCollapsedProps\n extends Omit<MenuButtonProps, \"CascadingMenuProps\"> {\n CascadingMenuProps?: CascadingMenuProps;\n accessibleText?: string;\n children: ReactNode;\n className?: string;\n}\n\nexport const BreadcrumbsCollapsed = ({\n children,\n CascadingMenuProps,\n accessibleText,\n ...rest\n}: BreadcrumbsCollapsedProps) => {\n const keys = Children.map(children, (child) => {\n if (isValidElement(child)) {\n return child.key;\n }\n return \"\";\n });\n\n const { OverflowIcon } = useIcon();\n const key = keys ? keys.join(\"\") : \"\";\n const { ref, shouldFocusOnMount } =\n useFocusMenuRemount<HTMLButtonElement>(key);\n\n const itemToString = useCallback((child: Component<BreadcrumbProps>) => {\n if (!child) {\n return \"\";\n }\n const { overflowLabel, tooltipText, children } = child.props;\n return overflowLabel || tooltipText || String(children);\n }, []);\n\n const onItemClick = useCallback(\n (sourceItem: MenuDescriptor, event: MouseEvent | KeyboardEvent): void => {\n shouldFocusOnMount.current = true;\n },\n [shouldFocusOnMount],\n );\n\n const menuItems: MenuDescriptor[] = [];\n Children.forEach(children, (x) => {\n if (isValidElement(x)) {\n menuItems.push({ props: x.props } as MenuDescriptor);\n }\n });\n\n return (\n <MenuButton\n CascadingMenuProps={{\n initialSource: {\n // Only `props` is required for `itemToString`. Otherwise causing circular JSON conversion in useControlled.js\n // This is not reproducible in unit tests, where react / react-dom is partially mocked without circular reference\n menuItems,\n },\n itemToString,\n onItemClick,\n minWidth: 0,\n ...CascadingMenuProps,\n }}\n hideCaret\n {...rest}\n ref={ref}\n >\n <OverflowIcon />\n </MenuButton>\n );\n};\n"],"names":["children"],"mappings":";;;;;;AAuBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAiC,KAAA;AAC/B,EAAA,MAAM,IAAO,GAAA,QAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC7C,IAAI,IAAA,cAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAA,OAAO,KAAM,CAAA,GAAA,CAAA;AAAA,KACf;AACA,IAAO,OAAA,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA,CAAA;AACjC,EAAA,MAAM,GAAM,GAAA,IAAA,GAAO,IAAK,CAAA,IAAA,CAAK,EAAE,CAAI,GAAA,EAAA,CAAA;AACnC,EAAA,MAAM,EAAE,GAAA,EAAK,kBAAmB,EAAA,GAC9B,oBAAuC,GAAG,CAAA,CAAA;AAE5C,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAAC,KAAsC,KAAA;AACtE,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAO,OAAA,EAAA,CAAA;AAAA,KACT;AACA,IAAA,MAAM,EAAE,aAAe,EAAA,WAAA,EAAa,QAAAA,EAAAA,SAAAA,KAAa,KAAM,CAAA,KAAA,CAAA;AACvD,IAAO,OAAA,aAAA,IAAiB,WAAe,IAAA,MAAA,CAAOA,SAAQ,CAAA,CAAA;AAAA,GACxD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,YAA4B,KAA4C,KAAA;AACvE,MAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,kBAAkB,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,YAA8B,EAAC,CAAA;AACrC,EAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,CAAM,KAAA;AAChC,IAAI,IAAA,cAAA,CAAe,CAAC,CAAG,EAAA;AACrB,MAAA,SAAA,CAAU,IAAK,CAAA,EAAE,KAAO,EAAA,CAAA,CAAE,OAAyB,CAAA,CAAA;AAAA,KACrD;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,kBAAoB,EAAA;AAAA,MAClB,aAAe,EAAA;AAAA,QAGb,SAAA;AAAA,OACF;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA;AAAA,MACV,GAAG,kBAAA;AAAA,KACL;AAAA,IACA,SAAS,EAAA,IAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,8BAAC,YAAa,EAAA,EAAA,CAAA;AAAA,GAChB,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { makePrefixer } from '@salt-ds/core';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
|
-
import { forwardRef
|
|
5
|
-
import { CalendarCarousel } from './internal/CalendarCarousel.js';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
6
5
|
import { CalendarContext } from './internal/CalendarContext.js';
|
|
7
|
-
import { CalendarWeekHeader } from './internal/CalendarWeekHeader.js';
|
|
8
6
|
import { useCalendar } from './useCalendar.js';
|
|
9
7
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
10
8
|
import { useWindow } from '@salt-ds/window';
|
|
@@ -14,23 +12,64 @@ import css_248z from './Calendar.css.js';
|
|
|
14
12
|
const withBaseName = makePrefixer("saltCalendar");
|
|
15
13
|
const Calendar = forwardRef(
|
|
16
14
|
function Calendar2(props, ref) {
|
|
17
|
-
const { children, className, renderDayContents, TooltipProps, ...rest } = props;
|
|
18
15
|
const targetWindow = useWindow();
|
|
19
16
|
useComponentCssInjection({
|
|
20
17
|
testId: "salt-calendar",
|
|
21
18
|
css: css_248z,
|
|
22
19
|
window: targetWindow
|
|
23
20
|
});
|
|
24
|
-
const {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
const {
|
|
22
|
+
children,
|
|
23
|
+
className,
|
|
24
|
+
selectedDate,
|
|
25
|
+
defaultSelectedDate,
|
|
26
|
+
visibleMonth: visibleMonthProp,
|
|
27
|
+
timeZone,
|
|
28
|
+
locale,
|
|
29
|
+
defaultVisibleMonth,
|
|
30
|
+
onSelectedDateChange,
|
|
31
|
+
onVisibleMonthChange,
|
|
32
|
+
hideOutOfRangeDates,
|
|
33
|
+
isDayUnselectable,
|
|
34
|
+
isDayHighlighted,
|
|
35
|
+
isDayDisabled,
|
|
36
|
+
minDate,
|
|
37
|
+
maxDate,
|
|
38
|
+
selectionVariant,
|
|
39
|
+
onHoveredDateChange,
|
|
40
|
+
hoveredDate,
|
|
41
|
+
...propsRest
|
|
42
|
+
} = props;
|
|
43
|
+
let startDateOffset;
|
|
44
|
+
let endDateOffset;
|
|
45
|
+
let rest;
|
|
46
|
+
if (selectionVariant === "offset") {
|
|
47
|
+
({ startDateOffset, endDateOffset, ...rest } = propsRest);
|
|
48
|
+
} else {
|
|
49
|
+
rest = propsRest;
|
|
50
|
+
}
|
|
51
|
+
const useCalendarProps = {
|
|
52
|
+
selectedDate,
|
|
53
|
+
defaultSelectedDate,
|
|
54
|
+
visibleMonth: visibleMonthProp,
|
|
55
|
+
timeZone,
|
|
56
|
+
locale,
|
|
57
|
+
defaultVisibleMonth,
|
|
58
|
+
onSelectedDateChange,
|
|
59
|
+
onVisibleMonthChange,
|
|
60
|
+
isDayUnselectable,
|
|
61
|
+
isDayHighlighted,
|
|
62
|
+
isDayDisabled,
|
|
63
|
+
minDate,
|
|
64
|
+
maxDate,
|
|
65
|
+
selectionVariant,
|
|
66
|
+
onHoveredDateChange,
|
|
67
|
+
hideOutOfRangeDates,
|
|
68
|
+
hoveredDate,
|
|
69
|
+
startDateOffset,
|
|
70
|
+
endDateOffset
|
|
71
|
+
};
|
|
72
|
+
const { state, helpers } = useCalendar(useCalendarProps);
|
|
34
73
|
const calendarLabel = new DateFormatter(state.locale, {
|
|
35
74
|
month: "long",
|
|
36
75
|
year: "numeric"
|
|
@@ -40,23 +79,13 @@ const Calendar = forwardRef(
|
|
|
40
79
|
state,
|
|
41
80
|
helpers
|
|
42
81
|
},
|
|
43
|
-
children: /* @__PURE__ */
|
|
82
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
44
83
|
className: clsx(withBaseName(), className),
|
|
45
84
|
role: "application",
|
|
46
85
|
"aria-label": calendarLabel,
|
|
47
86
|
ref,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
/* @__PURE__ */ jsx(CalendarWeekHeader, {
|
|
51
|
-
locale: state.locale
|
|
52
|
-
}),
|
|
53
|
-
/* @__PURE__ */ jsx(CalendarCarousel, {
|
|
54
|
-
onFocus: handleFocus,
|
|
55
|
-
onBlur: handleBlur,
|
|
56
|
-
renderDayContents,
|
|
57
|
-
TooltipProps
|
|
58
|
-
})
|
|
59
|
-
]
|
|
87
|
+
...rest,
|
|
88
|
+
children
|
|
60
89
|
})
|
|
61
90
|
});
|
|
62
91
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n type UseCalendarMultiSelectProps,\n type UseCalendarOffsetProps,\n type UseCalendarRangeProps,\n type UseCalendarSingleProps,\n useCalendar,\n} from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { DateFormatter } from \"@internationalized/date\";\nimport calendarCss from \"./Calendar.css\";\n\n/**\n * Base props for the Calendar component.\n */\nexport interface CalendarBaseProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content to be rendered inside the Calendar.\n */\n children: ReactNode;\n /**\n * If `true`, hides dates that are out of the selectable range.\n */\n hideOutOfRangeDates?: boolean;\n}\n\n/**\n * Props for the Calendar component with single date selection.\n */\nexport interface CalendarSingleProps\n extends CalendarBaseProps,\n UseCalendarSingleProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n}\n\n/**\n * Props for the Calendar component with date range selection.\n */\nexport interface CalendarRangeProps\n extends CalendarBaseProps,\n UseCalendarRangeProps {\n /**\n * The selection variant, set to \"range\".\n */\n selectionVariant: \"range\";\n}\n\n/**\n * Props for the Calendar component with multi-select date selection.\n */\nexport interface CalendarMultiSelectProps\n extends CalendarBaseProps,\n UseCalendarMultiSelectProps {\n /**\n * The selection variant, set to \"multiselect\".\n */\n selectionVariant: \"multiselect\";\n}\n\n/**\n * Props for the Calendar component with offset date selection.\n */\nexport interface CalendarOffsetProps\n extends CalendarBaseProps,\n UseCalendarOffsetProps {\n /**\n * The selection variant, set to \"offset\".\n */\n selectionVariant: \"offset\";\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps =\n | CalendarSingleProps\n | CalendarRangeProps\n | CalendarMultiSelectProps\n | CalendarOffsetProps;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n function Calendar(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar\",\n css: calendarCss,\n window: targetWindow,\n });\n const {\n children,\n className,\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n timeZone,\n locale,\n defaultVisibleMonth,\n onSelectedDateChange,\n onVisibleMonthChange,\n hideOutOfRangeDates,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n minDate,\n maxDate,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n ...propsRest\n } = props;\n let startDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n let endDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n let rest: Partial<typeof props>;\n if (selectionVariant === \"offset\") {\n ({ startDateOffset, endDateOffset, ...rest } =\n propsRest as CalendarOffsetProps);\n } else {\n rest = propsRest;\n }\n // biome-ignore lint/suspicious/noExplicitAny: type guard\n const useCalendarProps: any = {\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n timeZone,\n locale,\n defaultVisibleMonth,\n onSelectedDateChange,\n onVisibleMonthChange,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n minDate,\n maxDate,\n selectionVariant,\n onHoveredDateChange,\n hideOutOfRangeDates,\n hoveredDate,\n startDateOffset,\n endDateOffset,\n };\n const { state, helpers } = useCalendar(useCalendarProps);\n const calendarLabel = new DateFormatter(state.locale, {\n month: \"long\",\n year: \"numeric\",\n }).format(state.visibleMonth.toDate(state.timeZone));\n\n return (\n <CalendarContext.Provider\n value={{\n state,\n helpers,\n }}\n >\n <div\n className={clsx(withBaseName(), className)}\n role=\"application\"\n aria-label={calendarLabel}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n </CalendarContext.Provider>\n );\n },\n);\n"],"names":["Calendar","calendarCss"],"mappings":";;;;;;;;;;;AA6FA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,QAAA;AAAA,MACA,MAAA;AAAA,MACA,mBAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AACJ,IAAI,IAAA,eAAA,CAAA;AACJ,IAAI,IAAA,aAAA,CAAA;AACJ,IAAI,IAAA,IAAA,CAAA;AACJ,IAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,MAAA,CAAC,EAAE,eAAA,EAAiB,aAAe,EAAA,GAAG,MACpC,GAAA,SAAA,EAAA;AAAA,KACG,MAAA;AACL,MAAO,IAAA,GAAA,SAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,gBAAwB,GAAA;AAAA,MAC5B,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,QAAA;AAAA,MACA,MAAA;AAAA,MACA,mBAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,aAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,YAAY,gBAAgB,CAAA,CAAA;AACvD,IAAA,MAAM,aAAgB,GAAA,IAAI,aAAc,CAAA,KAAA,CAAM,MAAQ,EAAA;AAAA,MACpD,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,KACP,EAAE,MAAO,CAAA,KAAA,CAAM,aAAa,MAAO,CAAA,KAAA,CAAM,QAAQ,CAAC,CAAA,CAAA;AAEnD,IACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,OAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,aAAA;AAAA,QACL,YAAY,EAAA,aAAA;AAAA,QACZ,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltCalendarDateGrid-grid {\n display: grid;\n grid-auto-flow: column;\n}\n\n.saltCalendarDateGrid-grid > * {\n position: absolute;\n left: 0;\n width: 100%;\n}\n\n.saltCalendarDateGrid-grid > :nth-child(2) {\n position: relative;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=CalendarDateGrid.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarDateGrid.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,28 +1,34 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { isSameMonth } from '@internationalized/date';
|
|
3
3
|
import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
4
|
-
import { forwardRef, useRef, useState, useEffect } from 'react';
|
|
5
|
-
import { useCalendarContext } from './CalendarContext.js';
|
|
6
|
-
import { CalendarMonth } from './CalendarMonth.js';
|
|
4
|
+
import { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
|
|
5
|
+
import { useCalendarContext } from './internal/CalendarContext.js';
|
|
6
|
+
import { CalendarMonth } from './internal/CalendarMonth.js';
|
|
7
7
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
8
|
import { useWindow } from '@salt-ds/window';
|
|
9
|
-
import css_248z from './
|
|
10
|
-
import { formatDate, monthDiff } from './utils.js';
|
|
9
|
+
import css_248z from './CalendarDateGrid.css.js';
|
|
10
|
+
import { formatDate, monthDiff } from './internal/utils.js';
|
|
11
11
|
|
|
12
12
|
function getMonths(month) {
|
|
13
13
|
return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
|
|
14
14
|
}
|
|
15
|
-
const withBaseName = makePrefixer("
|
|
16
|
-
const
|
|
17
|
-
const {
|
|
15
|
+
const withBaseName = makePrefixer("saltCalendarDateGrid");
|
|
16
|
+
const CalendarDateGrid = forwardRef(function CalendarDateGrid2(props, ref) {
|
|
17
|
+
const {
|
|
18
|
+
onFocus,
|
|
19
|
+
onBlur,
|
|
20
|
+
getCalendarMonthProps = () => void 0,
|
|
21
|
+
...rest
|
|
22
|
+
} = props;
|
|
18
23
|
const targetWindow = useWindow();
|
|
19
24
|
useComponentCssInjection({
|
|
20
|
-
testId: "salt-calendar-
|
|
25
|
+
testId: "salt-calendar-date-grid",
|
|
21
26
|
css: css_248z,
|
|
22
27
|
window: targetWindow
|
|
23
28
|
});
|
|
24
29
|
const {
|
|
25
|
-
state: { visibleMonth, locale }
|
|
30
|
+
state: { visibleMonth, locale },
|
|
31
|
+
helpers: { setCalendarFocused }
|
|
26
32
|
} = useCalendarContext();
|
|
27
33
|
const containerRef = useRef(null);
|
|
28
34
|
const diffIndex = (a, b) => monthDiff(a, b);
|
|
@@ -43,6 +49,20 @@ const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
|
|
|
43
49
|
setMonths(getMonths(visibleMonth));
|
|
44
50
|
return void 0;
|
|
45
51
|
}, [formatDate(visibleMonth, locale)]);
|
|
52
|
+
const handleFocus = useCallback(
|
|
53
|
+
(event) => {
|
|
54
|
+
setCalendarFocused(true);
|
|
55
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
56
|
+
},
|
|
57
|
+
[setCalendarFocused, onFocus]
|
|
58
|
+
);
|
|
59
|
+
const handleBlur = useCallback(
|
|
60
|
+
(event) => {
|
|
61
|
+
setCalendarFocused(false);
|
|
62
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
63
|
+
},
|
|
64
|
+
[setCalendarFocused, onBlur]
|
|
65
|
+
);
|
|
46
66
|
return /* @__PURE__ */ jsx("div", {
|
|
47
67
|
className: withBaseName(),
|
|
48
68
|
tabIndex: -1,
|
|
@@ -52,8 +72,11 @@ const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
|
|
|
52
72
|
},
|
|
53
73
|
ref,
|
|
54
74
|
children: /* @__PURE__ */ jsx("div", {
|
|
55
|
-
className: withBaseName("
|
|
75
|
+
className: withBaseName("grid"),
|
|
56
76
|
ref: containerRef,
|
|
77
|
+
onBlur: handleBlur,
|
|
78
|
+
onFocus: handleFocus,
|
|
79
|
+
...rest,
|
|
57
80
|
children: months.map((date, index) => /* @__PURE__ */ jsx("div", {
|
|
58
81
|
className: withBaseName("slide"),
|
|
59
82
|
style: {
|
|
@@ -61,7 +84,7 @@ const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
|
|
|
61
84
|
},
|
|
62
85
|
"aria-hidden": index !== 1 ? "true" : void 0,
|
|
63
86
|
children: /* @__PURE__ */ jsx(CalendarMonth, {
|
|
64
|
-
...
|
|
87
|
+
...getCalendarMonthProps(date),
|
|
65
88
|
date
|
|
66
89
|
})
|
|
67
90
|
}, formatDate(date, locale)))
|
|
@@ -69,5 +92,5 @@ const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
|
|
|
69
92
|
});
|
|
70
93
|
});
|
|
71
94
|
|
|
72
|
-
export {
|
|
73
|
-
//# sourceMappingURL=
|
|
95
|
+
export { CalendarDateGrid };
|
|
96
|
+
//# sourceMappingURL=CalendarDateGrid.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarDateGrid.js","sources":["../src/calendar/CalendarDateGrid.tsx"],"sourcesContent":["import { type DateValue, isSameMonth } from \"@internationalized/date\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport {\n CalendarMonth,\n type CalendarMonthProps,\n} from \"./internal/CalendarMonth\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport calendarDateGridCss from \"./CalendarDateGrid.css\";\nimport { formatDate, monthDiff } from \"./internal/utils\";\n\nexport interface CalendarDateGridProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Props getter to pass to each CalendarMonth element\n */\n getCalendarMonthProps?: (date: DateValue) => Omit<CalendarMonthProps, \"date\">;\n}\n\nfunction getMonths(month: DateValue) {\n return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDateGrid\");\n\nexport const CalendarDateGrid = forwardRef<\n HTMLDivElement,\n CalendarDateGridProps\n>(function CalendarDateGrid(props, ref) {\n const {\n onFocus,\n onBlur,\n getCalendarMonthProps = () => undefined,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-date-grid\",\n css: calendarDateGridCss,\n window: targetWindow,\n });\n\n const {\n state: { visibleMonth, locale },\n helpers: { setCalendarFocused },\n } = useCalendarContext();\n const containerRef = useRef<HTMLDivElement>(null);\n const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n const { current: baseIndex } = useRef(visibleMonth);\n\n useIsomorphicLayoutEffect(() => {\n if (containerRef.current) {\n containerRef.current.style.transform = `translate3d(${\n diffIndex(baseIndex, visibleMonth) * -101 // needs to be higher than 100% so the next month doesn't show on the edges\n }%, 0, 0)`;\n }\n });\n\n const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: uses formatData to change visibleMonth into string\n useEffect(() => {\n setMonths((oldMonths) => {\n const newMonths = getMonths(visibleMonth).filter((month) => {\n return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n });\n\n return oldMonths.concat(newMonths);\n });\n setMonths(getMonths(visibleMonth));\n return undefined;\n }, [formatDate(visibleMonth, locale)]);\n\n const handleFocus: FocusEventHandler<HTMLDivElement> = useCallback(\n (event) => {\n setCalendarFocused(true);\n onFocus?.(event);\n },\n [setCalendarFocused, onFocus],\n );\n\n const handleBlur: FocusEventHandler<HTMLDivElement> = useCallback(\n (event) => {\n setCalendarFocused(false);\n onBlur?.(event);\n },\n [setCalendarFocused, onBlur],\n );\n\n return (\n <div\n className={withBaseName()}\n tabIndex={-1} // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739\n style={{\n overflowX: \"hidden\",\n position: \"relative\",\n }}\n ref={ref}\n >\n <div\n className={withBaseName(\"grid\")}\n ref={containerRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n {...rest}\n >\n {months.map((date, index) => (\n <div\n key={formatDate(date, locale)}\n className={withBaseName(\"slide\")}\n style={{\n transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`,\n }}\n aria-hidden={index !== 1 ? \"true\" : undefined}\n >\n <CalendarMonth {...getCalendarMonthProps(date)} date={date} />\n </div>\n ))}\n </div>\n </div>\n );\n});\n"],"names":["CalendarDateGrid","calendarDateGridCss"],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, Button, Dropdown, Tooltip, useListControlContext, Option } from '@salt-ds/core';
|
|
3
|
-
import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
|
|
2
|
+
import { makePrefixer, useIcon, Button, Dropdown, Tooltip, useListControlContext, Option } from '@salt-ds/core';
|
|
4
3
|
import { clsx } from 'clsx';
|
|
5
4
|
import { forwardRef, useCallback, useMemo } from 'react';
|
|
6
5
|
import { useCalendarContext } from './internal/CalendarContext.js';
|
|
@@ -171,6 +170,7 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
|
|
|
171
170
|
css: css_248z,
|
|
172
171
|
window: targetWindow
|
|
173
172
|
});
|
|
173
|
+
const { NextIcon, PreviousIcon } = useIcon();
|
|
174
174
|
const {
|
|
175
175
|
moveToPreviousMonth,
|
|
176
176
|
moveToNextMonth,
|
|
@@ -247,10 +247,11 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
|
|
|
247
247
|
leaveDelay: 0,
|
|
248
248
|
children: /* @__PURE__ */ jsx(Button, {
|
|
249
249
|
disabled: !canNavigatePrevious,
|
|
250
|
-
|
|
250
|
+
appearance: "transparent",
|
|
251
|
+
sentiment: "neutral",
|
|
251
252
|
onClick: handleNavigatePrevious,
|
|
252
253
|
focusableWhenDisabled: true,
|
|
253
|
-
children: /* @__PURE__ */ jsx(
|
|
254
|
+
children: /* @__PURE__ */ jsx(PreviousIcon, {
|
|
254
255
|
"aria-label": "Previous Month"
|
|
255
256
|
})
|
|
256
257
|
})
|
|
@@ -292,10 +293,11 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
|
|
|
292
293
|
leaveDelay: 0,
|
|
293
294
|
children: /* @__PURE__ */ jsx(Button, {
|
|
294
295
|
disabled: !canNavigateNext,
|
|
295
|
-
|
|
296
|
+
appearance: "transparent",
|
|
297
|
+
sentiment: "neutral",
|
|
296
298
|
onClick: handleNavigateNext,
|
|
297
299
|
focusableWhenDisabled: true,
|
|
298
|
-
children: /* @__PURE__ */ jsx(
|
|
300
|
+
children: /* @__PURE__ */ jsx(NextIcon, {
|
|
299
301
|
"aria-label": "Next Month"
|
|
300
302
|
})
|
|
301
303
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/CalendarNavigation.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n Dropdown,\n type DropdownProps,\n Option,\n type OptionProps,\n Tooltip,\n type TooltipProps,\n makePrefixer,\n useListControlContext,\n} from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type MouseEventHandler,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { CALENDAR_MAX_YEAR, CALENDAR_MIN_YEAR } from \"./useCalendarSelection\";\n\nimport {\n CalendarDate,\n type DateValue,\n isSameMonth,\n isSameYear,\n} from \"@internationalized/date\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { formatDate } from \"./formatDate\";\nimport { monthDiff, monthsForLocale } from \"./internal/utils\";\n\ntype DateDropdownProps = DropdownProps<DateValue>;\n\n/**\n * Props for the CalendarNavigation component.\n */\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Props for the month dropdown component.\n */\n MonthDropdownProps?: DateDropdownProps;\n\n /**\n * Props for the year dropdown component.\n */\n YearDropdownProps?: DateDropdownProps;\n\n /**\n * Callback fired when a month is selected.\n * @param event - The change event.\n */\n onMonthSelect?: DateDropdownProps[\"onChange\"];\n\n /**\n * Callback fired when a year is selected.\n * @param event - The change event.\n */\n onYearSelect?: DateDropdownProps[\"onChange\"];\n\n /**\n * Callback fired when navigating to the next month.\n * @param event - The click event.\n */\n onNavigateNext?: ButtonProps[\"onClick\"];\n\n /**\n * Callback fired when navigating to the previous month.\n * @param event - The click event.\n */\n onNavigatePrevious?: ButtonProps[\"onClick\"];\n\n /**\n * If `true`, hides the year dropdown.\n */\n hideYearDropdown?: boolean;\n\n /**\n * The step value for navigation. Defaults to 1.\n */\n step?: number;\n /**\n * Format the month dropdown values\n * @param date\n */\n formatMonth?: (date: DateValue) => string;\n /**\n * Format the year dropdown values\n * @param date\n */\n formatYear?: (date: DateValue) => string;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n value: DateValue;\n tooltipContent?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nconst ConditionalTooltip: React.FC<TooltipProps> = ({\n children,\n disabled = true,\n ...rest\n}) => {\n if (disabled) {\n return <>{children}</>;\n }\n return <Tooltip {...rest}>{children}</Tooltip>;\n};\n\nfunction generateYearsBetweenRange(\n minYear: number,\n maxYear: number,\n): DateValue[] {\n const years: DateValue[] = [];\n for (let year = minYear; year <= maxYear; year++) {\n years.push(new CalendarDate(year, 1, 1));\n }\n return years;\n}\n\nfunction useCalendarNavigation() {\n const {\n state: { visibleMonth, minDate, maxDate, locale, timeZone },\n helpers: {\n setVisibleMonth,\n isDayVisible,\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n },\n } = useCalendarContext();\n\n const moveToNextMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(event, visibleMonth.add({ months: step }));\n },\n [setVisibleMonth, visibleMonth],\n );\n\n const moveToPreviousMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(event, visibleMonth.subtract({ months: step }));\n },\n [setVisibleMonth, visibleMonth],\n );\n\n const moveToMonth = useCallback(\n (event: SyntheticEvent, month: DateValue) => {\n let newMonth = month;\n\n if (!isOutsideAllowedYears(newMonth)) {\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month\n const navigableMonths = monthsForLocale(visibleMonth, locale).filter(\n (n) => !isOutsideAllowedMonths(n),\n );\n newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n Math.abs(monthDiff(currentMonth, newMonth)) <\n Math.abs(monthDiff(closestMonth, newMonth))\n ? currentMonth\n : closestMonth,\n );\n }\n setVisibleMonth(event, newMonth);\n }\n },\n [\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n setVisibleMonth,\n visibleMonth,\n locale,\n ],\n );\n\n const months: DateValue[] = useMemo(\n () => monthsForLocale(visibleMonth, locale),\n [visibleMonth, locale],\n );\n\n const years: DateValue[] = useMemo(\n () =>\n generateYearsBetweenRange(\n Math.min(minDate ? minDate.year : CALENDAR_MIN_YEAR, visibleMonth.year),\n Math.max(maxDate ? maxDate.year : CALENDAR_MAX_YEAR, visibleMonth.year),\n ),\n [minDate, maxDate, visibleMonth.year],\n );\n\n const selectedMonth: DateValue | undefined = months.find((month: DateValue) =>\n isSameMonth(month, visibleMonth),\n );\n const selectedYear: DateValue | undefined = years.find((year: DateValue) =>\n isSameYear(year, visibleMonth),\n );\n\n const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n return useMemo(\n () => ({\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n locale,\n timeZone,\n }),\n [\n months,\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n visibleMonth,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n locale,\n timeZone,\n ],\n );\n}\n\nconst OptionWithTooltip = ({\n value,\n children,\n disabled = false,\n tooltipContent,\n}: OptionWithTooltipProps) => {\n const { activeState, openState } = useListControlContext();\n const open = activeState?.value === value;\n return (\n <ConditionalTooltip\n placement=\"right\"\n open={open && openState}\n disabled={!disabled}\n content={tooltipContent}\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Option value={value} disabled={disabled}>\n {children}\n </Option>\n </ConditionalTooltip>\n );\n};\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n const {\n className,\n formatMonth: formatMonthProp,\n formatYear: formatYearProp,\n MonthDropdownProps,\n YearDropdownProps,\n hideYearDropdown,\n step = 1,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n locale,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> =\n useCallback(\n (event) => {\n moveToPreviousMonth(event, step);\n },\n [moveToPreviousMonth, step],\n );\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (event) => {\n moveToNextMonth(event, step);\n },\n [moveToNextMonth, step],\n );\n\n const handleMonthSelect = useCallback(\n (event: SyntheticEvent, month: DateValue[]) => {\n moveToMonth(event, month[0]);\n },\n [moveToMonth],\n );\n\n const handleYearSelect = useCallback(\n (event: SyntheticEvent, year: DateValue[]) => {\n moveToMonth(event, year[0]);\n },\n [moveToMonth],\n );\n\n const formatMonth = useCallback(\n (date?: DateValue) => {\n if (date && formatMonthProp) {\n return formatMonthProp(date);\n }\n return !date\n ? \"\"\n : formatDate(date, locale, {\n month: hideYearDropdown ? \"long\" : \"short\",\n day: undefined,\n year: undefined,\n });\n },\n [formatMonthProp],\n );\n\n const formatYear = useCallback(\n (date?: DateValue) => {\n if (date && formatYearProp) {\n return formatYearProp(date);\n }\n return !date ? \"\" : `${date.year}`;\n },\n [formatYearProp],\n );\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <ConditionalTooltip\n placement=\"top\"\n disabled={canNavigatePrevious}\n content=\"Past dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigatePrevious}\n variant=\"secondary\"\n onClick={handleNavigatePrevious}\n focusableWhenDisabled={true}\n >\n <ChevronLeftIcon aria-label=\"Previous Month\" />\n </Button>\n </ConditionalTooltip>\n <div className={clsx({ [withBaseName(\"dropdowns\")]: !hideYearDropdown })}>\n <Dropdown\n aria-label=\"Month Dropdown\"\n selected={selectedMonth ? [selectedMonth] : []}\n value={formatMonth(selectedMonth)}\n onSelectionChange={handleMonthSelect}\n {...MonthDropdownProps}\n >\n {months.map((month) => (\n <OptionWithTooltip\n key={formatMonth(month)}\n value={month}\n disabled={isOutsideAllowedMonths(month)}\n tooltipContent=\"This month is out of range\"\n >\n {formatMonth(month)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n {!hideYearDropdown && (\n <Dropdown\n aria-label=\"Year Dropdown\"\n selected={selectedYear ? [selectedYear] : []}\n value={formatYear(selectedYear)}\n onSelectionChange={handleYearSelect}\n {...YearDropdownProps}\n >\n {years.map((year) => (\n <OptionWithTooltip key={formatYear(year)} value={year}>\n {formatYear(year)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n )}\n </div>\n <ConditionalTooltip\n placement=\"top\"\n disabled={canNavigateNext}\n content=\"Future dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigateNext}\n variant=\"secondary\"\n onClick={handleNavigateNext}\n focusableWhenDisabled={true}\n >\n <ChevronRightIcon aria-label=\"Next Month\" />\n </Button>\n </ConditionalTooltip>\n </div>\n );\n});\n"],"names":["CalendarNavigation","calendarNavigationCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/CalendarNavigation.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n Dropdown,\n type DropdownProps,\n Option,\n type OptionProps,\n Tooltip,\n type TooltipProps,\n makePrefixer,\n useIcon,\n useListControlContext,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type MouseEventHandler,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { CALENDAR_MAX_YEAR, CALENDAR_MIN_YEAR } from \"./useCalendarSelection\";\n\nimport {\n CalendarDate,\n type DateValue,\n isSameMonth,\n isSameYear,\n} from \"@internationalized/date\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { formatDate } from \"./formatDate\";\nimport { monthDiff, monthsForLocale } from \"./internal/utils\";\n\ntype DateDropdownProps = DropdownProps<DateValue>;\n\n/**\n * Props for the CalendarNavigation component.\n */\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Props for the month dropdown component.\n */\n MonthDropdownProps?: DateDropdownProps;\n\n /**\n * Props for the year dropdown component.\n */\n YearDropdownProps?: DateDropdownProps;\n\n /**\n * Callback fired when a month is selected.\n * @param event - The change event.\n */\n onMonthSelect?: DateDropdownProps[\"onChange\"];\n\n /**\n * Callback fired when a year is selected.\n * @param event - The change event.\n */\n onYearSelect?: DateDropdownProps[\"onChange\"];\n\n /**\n * Callback fired when navigating to the next month.\n * @param event - The click event.\n */\n onNavigateNext?: ButtonProps[\"onClick\"];\n\n /**\n * Callback fired when navigating to the previous month.\n * @param event - The click event.\n */\n onNavigatePrevious?: ButtonProps[\"onClick\"];\n\n /**\n * If `true`, hides the year dropdown.\n */\n hideYearDropdown?: boolean;\n\n /**\n * The step value for navigation. Defaults to 1.\n */\n step?: number;\n /**\n * Format the month dropdown values\n * @param date\n */\n formatMonth?: (date: DateValue) => string;\n /**\n * Format the year dropdown values\n * @param date\n */\n formatYear?: (date: DateValue) => string;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n value: DateValue;\n tooltipContent?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nconst ConditionalTooltip: React.FC<TooltipProps> = ({\n children,\n disabled = true,\n ...rest\n}) => {\n if (disabled) {\n return <>{children}</>;\n }\n return <Tooltip {...rest}>{children}</Tooltip>;\n};\n\nfunction generateYearsBetweenRange(\n minYear: number,\n maxYear: number,\n): DateValue[] {\n const years: DateValue[] = [];\n for (let year = minYear; year <= maxYear; year++) {\n years.push(new CalendarDate(year, 1, 1));\n }\n return years;\n}\n\nfunction useCalendarNavigation() {\n const {\n state: { visibleMonth, minDate, maxDate, locale, timeZone },\n helpers: {\n setVisibleMonth,\n isDayVisible,\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n },\n } = useCalendarContext();\n\n const moveToNextMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(event, visibleMonth.add({ months: step }));\n },\n [setVisibleMonth, visibleMonth],\n );\n\n const moveToPreviousMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(event, visibleMonth.subtract({ months: step }));\n },\n [setVisibleMonth, visibleMonth],\n );\n\n const moveToMonth = useCallback(\n (event: SyntheticEvent, month: DateValue) => {\n let newMonth = month;\n\n if (!isOutsideAllowedYears(newMonth)) {\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month\n const navigableMonths = monthsForLocale(visibleMonth, locale).filter(\n (n) => !isOutsideAllowedMonths(n),\n );\n newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n Math.abs(monthDiff(currentMonth, newMonth)) <\n Math.abs(monthDiff(closestMonth, newMonth))\n ? currentMonth\n : closestMonth,\n );\n }\n setVisibleMonth(event, newMonth);\n }\n },\n [\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n setVisibleMonth,\n visibleMonth,\n locale,\n ],\n );\n\n const months: DateValue[] = useMemo(\n () => monthsForLocale(visibleMonth, locale),\n [visibleMonth, locale],\n );\n\n const years: DateValue[] = useMemo(\n () =>\n generateYearsBetweenRange(\n Math.min(minDate ? minDate.year : CALENDAR_MIN_YEAR, visibleMonth.year),\n Math.max(maxDate ? maxDate.year : CALENDAR_MAX_YEAR, visibleMonth.year),\n ),\n [minDate, maxDate, visibleMonth.year],\n );\n\n const selectedMonth: DateValue | undefined = months.find((month: DateValue) =>\n isSameMonth(month, visibleMonth),\n );\n const selectedYear: DateValue | undefined = years.find((year: DateValue) =>\n isSameYear(year, visibleMonth),\n );\n\n const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n return useMemo(\n () => ({\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n locale,\n timeZone,\n }),\n [\n months,\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n visibleMonth,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n locale,\n timeZone,\n ],\n );\n}\n\nconst OptionWithTooltip = ({\n value,\n children,\n disabled = false,\n tooltipContent,\n}: OptionWithTooltipProps) => {\n const { activeState, openState } = useListControlContext();\n const open = activeState?.value === value;\n return (\n <ConditionalTooltip\n placement=\"right\"\n open={open && openState}\n disabled={!disabled}\n content={tooltipContent}\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Option value={value} disabled={disabled}>\n {children}\n </Option>\n </ConditionalTooltip>\n );\n};\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n const {\n className,\n formatMonth: formatMonthProp,\n formatYear: formatYearProp,\n MonthDropdownProps,\n YearDropdownProps,\n hideYearDropdown,\n step = 1,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const { NextIcon, PreviousIcon } = useIcon();\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n locale,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> =\n useCallback(\n (event) => {\n moveToPreviousMonth(event, step);\n },\n [moveToPreviousMonth, step],\n );\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (event) => {\n moveToNextMonth(event, step);\n },\n [moveToNextMonth, step],\n );\n\n const handleMonthSelect = useCallback(\n (event: SyntheticEvent, month: DateValue[]) => {\n moveToMonth(event, month[0]);\n },\n [moveToMonth],\n );\n\n const handleYearSelect = useCallback(\n (event: SyntheticEvent, year: DateValue[]) => {\n moveToMonth(event, year[0]);\n },\n [moveToMonth],\n );\n\n const formatMonth = useCallback(\n (date?: DateValue) => {\n if (date && formatMonthProp) {\n return formatMonthProp(date);\n }\n return !date\n ? \"\"\n : formatDate(date, locale, {\n month: hideYearDropdown ? \"long\" : \"short\",\n day: undefined,\n year: undefined,\n });\n },\n [formatMonthProp],\n );\n\n const formatYear = useCallback(\n (date?: DateValue) => {\n if (date && formatYearProp) {\n return formatYearProp(date);\n }\n return !date ? \"\" : `${date.year}`;\n },\n [formatYearProp],\n );\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <ConditionalTooltip\n placement=\"top\"\n disabled={canNavigatePrevious}\n content=\"Past dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigatePrevious}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleNavigatePrevious}\n focusableWhenDisabled={true}\n >\n <PreviousIcon aria-label=\"Previous Month\" />\n </Button>\n </ConditionalTooltip>\n <div className={clsx({ [withBaseName(\"dropdowns\")]: !hideYearDropdown })}>\n <Dropdown\n aria-label=\"Month Dropdown\"\n selected={selectedMonth ? [selectedMonth] : []}\n value={formatMonth(selectedMonth)}\n onSelectionChange={handleMonthSelect}\n {...MonthDropdownProps}\n >\n {months.map((month) => (\n <OptionWithTooltip\n key={formatMonth(month)}\n value={month}\n disabled={isOutsideAllowedMonths(month)}\n tooltipContent=\"This month is out of range\"\n >\n {formatMonth(month)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n {!hideYearDropdown && (\n <Dropdown\n aria-label=\"Year Dropdown\"\n selected={selectedYear ? [selectedYear] : []}\n value={formatYear(selectedYear)}\n onSelectionChange={handleYearSelect}\n {...YearDropdownProps}\n >\n {years.map((year) => (\n <OptionWithTooltip key={formatYear(year)} value={year}>\n {formatYear(year)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n )}\n </div>\n <ConditionalTooltip\n placement=\"top\"\n disabled={canNavigateNext}\n content=\"Future dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigateNext}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleNavigateNext}\n focusableWhenDisabled={true}\n >\n <NextIcon aria-label=\"Next Month\" />\n </Button>\n </ConditionalTooltip>\n </div>\n );\n});\n"],"names":["CalendarNavigation","calendarNavigationCss"],"mappings":"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"}
|
|
@@ -2,18 +2,19 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { makePrefixer } from '@salt-ds/core';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
-
import { daysForLocale } from './utils.js';
|
|
5
|
+
import { daysForLocale } from './internal/utils.js';
|
|
6
6
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
7
|
import { useWindow } from '@salt-ds/window';
|
|
8
8
|
import css_248z from './CalendarWeekHeader.css.js';
|
|
9
|
+
import { getCurrentLocale } from './formatDate.js';
|
|
9
10
|
|
|
10
11
|
const withBaseName = makePrefixer("saltCalendarWeekHeader");
|
|
11
|
-
const CalendarWeekHeader = forwardRef(function CalendarWeekHeader2({ className, locale, ...rest }, ref) {
|
|
12
|
+
const CalendarWeekHeader = forwardRef(function CalendarWeekHeader2({ className, locale = getCurrentLocale(), ...rest }, ref) {
|
|
12
13
|
const weekdaysShort = daysForLocale("narrow", locale);
|
|
13
14
|
const weekdaysLong = daysForLocale("long", locale);
|
|
14
15
|
const targetWindow = useWindow();
|
|
15
16
|
useComponentCssInjection({
|
|
16
|
-
testId: "salt-calendar",
|
|
17
|
+
testId: "salt-calendar-week-header",
|
|
17
18
|
css: css_248z,
|
|
18
19
|
window: targetWindow
|
|
19
20
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarWeekHeader.js","sources":["../src/calendar/CalendarWeekHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { daysForLocale } from \"./internal/utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport calendarWeekHeaderCss from \"./CalendarWeekHeader.css\";\nimport { getCurrentLocale } from \"./formatDate\";\n\nexport type CalendarWeekHeaderProps = ComponentPropsWithRef<\"div\"> & {\n locale?: string;\n};\n\nconst withBaseName = makePrefixer(\"saltCalendarWeekHeader\");\n\nexport const CalendarWeekHeader = forwardRef<\n HTMLDivElement,\n CalendarWeekHeaderProps\n>(function CalendarWeekHeader(\n { className, locale = getCurrentLocale(), ...rest },\n ref,\n) {\n const weekdaysShort = daysForLocale(\"narrow\", locale);\n const weekdaysLong = daysForLocale(\"long\", locale);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-week-header\",\n css: calendarWeekHeaderCss,\n window: targetWindow,\n });\n\n return (\n <div\n data-testid=\"CalendarWeekHeader\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n >\n {weekdaysShort.map((day, index) => (\n <small\n aria-hidden\n key={weekdaysLong[index]}\n className={withBaseName(\"dayOfWeek\")}\n >\n {day}\n </small>\n ))}\n </div>\n );\n});\n"],"names":["CalendarWeekHeader","calendarWeekHeaderCss"],"mappings":";;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAE7C,MAAA,kBAAA,GAAqB,UAGhC,CAAA,SAASA,mBACT,CAAA,EAAE,SAAW,EAAA,MAAA,GAAS,gBAAiB,EAAA,EAAA,GAAM,IAAK,EAAA,EAClD,GACA,EAAA;AACA,EAAM,MAAA,aAAA,GAAgB,aAAc,CAAA,QAAA,EAAU,MAAM,CAAA,CAAA;AACpD,EAAM,MAAA,YAAA,GAAe,aAAc,CAAA,MAAA,EAAQ,MAAM,CAAA,CAAA;AAEjD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,oBAAA;AAAA,IACZ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAc,EAAA,aAAA,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,0BACtB,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MAEX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MAElC,QAAA,EAAA,GAAA;AAAA,KAHI,EAAA,YAAA,CAAa,MAIpB,CACD,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCalendarDay {\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: pointer;\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n.saltCalendarDay-outOfRange .saltCalendarDay-today {\n border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {\n background: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarDay-selected {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedStart {\n z-index: var(--salt-zIndex-default);\n\n border-top-left-radius: var(--salt-palette-corner-weak, 0);\n border-bottom-left-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd {\n border-top-right-radius: var(--salt-palette-corner-weak, 0);\n border-bottom-right-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n background: var(--salt-selectable-background-selected);\n box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n background: var(--salt-selectable-background-hover);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before,\n.saltCalendarDay-highlighted:hover:before {\n content: \"\";\n height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n width: var(--salt-spacing-200);\n top: calc(var(--salt-spacing-100) * -1);\n right: calc(var(--salt-spacing-100) * -1);\n transform: rotate(45deg);\n background: var(--salt-accent-background);\n position: absolute;\n}\n\n.saltCalendarDay-unselectable:after {\n content: \"\";\n height: var(--salt-size-border);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover,\n.saltCalendarDay-outOfRange .saltCalendarDay-today:hover {\n border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);\n margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover {\n color: var(--salt-content-secondary-foreground-disabled);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
|
|
1
|
+
var css_248z = ".saltCalendarDay {\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: pointer;\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n.saltCalendarDay-outOfRange .saltCalendarDay-today {\n border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {\n background: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarDay-selected {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedStart {\n z-index: var(--salt-zIndex-default);\n\n border-top-left-radius: var(--salt-palette-corner-weak, 0);\n border-bottom-left-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd {\n border-top-right-radius: var(--salt-palette-corner-weak, 0);\n border-bottom-right-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before,\n.saltCalendarDay-highlighted:hover:before {\n content: \"\";\n height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n width: var(--salt-spacing-200);\n top: calc(var(--salt-spacing-100) * -1);\n right: calc(var(--salt-spacing-100) * -1);\n transform: rotate(45deg);\n background: var(--salt-accent-background);\n position: absolute;\n}\n\n.saltCalendarDay-unselectable:after {\n content: \"\";\n height: var(--salt-size-border);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover,\n.saltCalendarDay-outOfRange .saltCalendarDay-today:hover {\n border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);\n margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover {\n color: var(--salt-content-secondary-foreground-disabled);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CalendarDay.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type MouseEvent,\n type SyntheticEvent,\n forwardRef,\n} from \"react\";\nimport { CalendarDay, type CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n date: DateValue;\n
|
|
1
|
+
{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type MouseEvent,\n type SyntheticEvent,\n forwardRef,\n} from \"react\";\nimport { CalendarDay, type CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Month to render as selectable dates\n */\n date: DateValue;\n /**\n * Function to render the contents of a day.\n */\n renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n /**\n * Props for the tooltip component.\n */\n TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n function CalendarMonth(props, ref) {\n const {\n className,\n date,\n renderDayContents,\n onMouseLeave,\n TooltipProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-month\",\n css: calendarMonthCss,\n window: targetWindow,\n });\n\n const {\n state: { locale },\n helpers: { setHoveredDate },\n } = useCalendarContext();\n const days = generateVisibleDays(date, locale);\n\n const handleMouseLeave = (event: SyntheticEvent) => {\n setHoveredDate(event, null);\n onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n };\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n onMouseLeave={handleMouseLeave}\n {...rest}\n >\n <div\n data-testid=\"CalendarDateGrid\"\n className={withBaseName(\"dateGrid\")}\n >\n {days.map((day) => {\n return (\n <CalendarDay\n key={formatDate(day.date, locale)}\n day={day.date}\n renderDayContents={renderDayContents}\n month={date}\n TooltipProps={TooltipProps}\n />\n );\n })}\n </div>\n </div>\n );\n },\n);\n"],"names":["CalendarMonth","calendarMonthCss"],"mappings":";;;;;;;;;;;AAgCA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,MAChB,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxB,kBAAmB,EAAA,CAAA;AACvB,IAAM,MAAA,IAAA,GAAO,mBAAoB,CAAA,IAAA,EAAM,MAAM,CAAA,CAAA;AAE7C,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACG,GAAA,CAAA,WAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAAA,EAJK,UAAW,CAAA,GAAA,CAAI,IAAM,EAAA,MAAM,CAKlC,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -26,8 +26,7 @@ function useCalendar(props) {
|
|
|
26
26
|
maxDate,
|
|
27
27
|
selectionVariant,
|
|
28
28
|
onHoveredDateChange,
|
|
29
|
-
hoveredDate
|
|
30
|
-
select
|
|
29
|
+
hoveredDate
|
|
31
30
|
} = props;
|
|
32
31
|
const [visibleMonth, setVisibleMonthState] = useControlled({
|
|
33
32
|
controlled: visibleMonthProp ? startOfMonth(visibleMonthProp) : void 0,
|
|
@@ -66,8 +65,7 @@ function useCalendar(props) {
|
|
|
66
65
|
isDaySelectable,
|
|
67
66
|
selectionVariant,
|
|
68
67
|
onHoveredDateChange,
|
|
69
|
-
hoveredDate
|
|
70
|
-
select
|
|
68
|
+
hoveredDate
|
|
71
69
|
});
|
|
72
70
|
const [calendarFocused, setCalendarFocused] = useState(false);
|
|
73
71
|
const isInVisibleMonth = useCallback(
|