npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.66 → 1.0.0-alpha.68 - Mend

@salt-ds/lab 1.0.0-alpha.66 → 1.0.0-alpha.68

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.

Files changed (645) hide show

package/dist-cjs/window/ElectronWindow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElectronWindow.js","sources":["../src/window/ElectronWindow.tsx"],"sourcesContent":["import {\n SaltProvider,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n Window as SaltWindow,\n type WindowProps,\n isDesktop,\n} from \"./WindowContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport electronWindowCss from \"./ElectronWindow.css\";\nimport { WindowParentContext, useWindowParentContext } from \"./desktop-utils\";\n\nconst Window = forwardRef<HTMLDivElement, WindowProps>(function ElectronWindow(\n { className, children, id = \"dialog\", open = true, style = {}, ...rest },\n forwardedRef,\n): JSX.Element \| null {\n const { top, left, position, ...styleRest } = style;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-electron-window\",\n css: electronWindowCss,\n window: targetWindow,\n });\n\n const [mountNode, setMountNode] = useState<Element \| null>(null);\n const windowRoot = useRef<HTMLDivElement>(null);\n\n const forkedRef = useForkRef(forwardedRef, windowRoot);\n\n if (!mountNode) {\n const win = window.open(\"\", id);\n win?.document.write(\n `<html lang=\"en\"><head><title>${id}</title><base href=\"${location.origin}\"><style>body {margin: 0;}</style></head><body></body></html>`,\n );\n document.head.querySelectorAll(\"style\").forEach((htmlElement) => {\n (win as Window).document.head.appendChild(htmlElement.cloneNode(true));\n });\n const bodyElement = (win as Window).document.body;\n setMountNode(bodyElement);\n }\n\n const parentWindow = useWindowParentContext();\n\n const closeWindow = useCallback(() => {\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n ipcRenderer.send(\"window-close\", { id: id });\n }\n }, [id]);\n\n // The timeout is required to give the Dialog component time to report the correct height\n // otherwise the window will be smaller than expected\n useEffect(() => {\n setTimeout(() => {\n if (windowRoot.current) {\n const { scrollHeight: height, scrollWidth: width } = windowRoot.current;\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n ipcRenderer.send(\"window-size\", {\n id: id,\n height: Math.ceil(height + 1),\n width: Math.ceil(width + 1),\n });\n }\n }\n }, 80);\n });\n\n // The timeout is required to allow the window time to be moved into position and scaled\n // before being shown to the user,\n useEffect(() => {\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n setTimeout(() => {\n ipcRenderer.send(\"window-ready\", { id: id });\n }, 100);\n }\n\n return () => {\n closeWindow();\n };\n }, [closeWindow, id]);\n\n // The timeout is required to give the Dialog component time to report the correct height\n // otherwise the window will be smaller than expected\n useIsomorphicLayoutEffect(() => {\n setTimeout(() => {\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n ipcRenderer.send(\"window-position\", {\n id: id,\n parentWindowID: parentWindow.id,\n left: style.left,\n top: style.top,\n });\n }\n }, 90);\n }, [style, id, parentWindow.id]);\n\n return mountNode\n ? ReactDOM.createPortal(\n <SaltProvider>\n <WindowParentContext.Provider\n value={{\n top: (style.top as number) + parentWindow.top,\n left: (style.left as number) + parentWindow.left,\n id: id,\n }}\n >\n <div className=\"saltWindow\" ref={forkedRef}>\n <div className={className} style={{ ...styleRest }} {...rest}>\n {children}\n </div>\n </div>\n </WindowParentContext.Provider>\n </SaltProvider>,\n mountNode,\n )\n : null;\n});\n\nexport const ElectronWindow = isDesktop ? Window : SaltWindow;\n"],"names":["forwardRef","ElectronWindow","useWindow","useComponentCssInjection","electronWindowCss","useState","useRef","useForkRef","useWindowParentContext","useCallback","useEffect","useIsomorphicLayoutEffect","SaltProvider","jsx","WindowParentContext","isDesktop","SaltWindow"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,SAASA,gBAAwC,CAAA,SAASC,eAC9D,CAAA,EAAE,WAAW,QAAU,EAAA,EAAA,GAAK,QAAU,EAAA,IAAA,GAAO,MAAM,KAAQ,GAAA,IAAI,GAAG,IAAA,IAClE,YACoB,EAAA;AACpB,EAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,QAAU,EAAA,GAAG,WAAc,GAAA,KAAA;AAE9C,EAAA,MAAM,eAAeC,kBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAyB,IAAI,CAAA;AAC/D,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA;AAE9C,EAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,YAAA,EAAc,UAAU,CAAA;AAErD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAA,MAAM,GAAM,GAAA,MAAA,CAAO,IAAK,CAAA,EAAA,EAAI,EAAE,CAAA;AAC9B,IAAA,GAAA,IAAA,IAAA,GAAA,~~KAAA~~,~~CAAA,~~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"}
1	+ {"version":3,"file":"ElectronWindow.js","sources":["../src/window/ElectronWindow.tsx"],"sourcesContent":["import {\n SaltProvider,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n Window as SaltWindow,\n type WindowProps,\n isDesktop,\n} from \"./WindowContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport electronWindowCss from \"./ElectronWindow.css\";\nimport { WindowParentContext, useWindowParentContext } from \"./desktop-utils\";\n\nconst Window = forwardRef<HTMLDivElement, WindowProps>(function ElectronWindow(\n { className, children, id = \"dialog\", open = true, style = {}, ...rest },\n forwardedRef,\n): JSX.Element \| null {\n const { top, left, position, ...styleRest } = style;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-electron-window\",\n css: electronWindowCss,\n window: targetWindow,\n });\n\n const [mountNode, setMountNode] = useState<Element \| null>(null);\n const windowRoot = useRef<HTMLDivElement>(null);\n\n const forkedRef = useForkRef(forwardedRef, windowRoot);\n\n if (!mountNode) {\n const win = window.open(\"\", id);\n win?.document.write(\n `<html lang=\"en\"><head><title>${id}</title><base href=\"${location.origin}\"><style>body {margin: 0;}</style></head><body></body></html>`,\n );\n document.head.querySelectorAll(\"style\").forEach((htmlElement) => {\n (win as Window).document.head.appendChild(htmlElement.cloneNode(true));\n });\n const bodyElement = (win as Window).document.body;\n setMountNode(bodyElement);\n }\n\n const parentWindow = useWindowParentContext();\n\n const closeWindow = useCallback(() => {\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n ipcRenderer.send(\"window-close\", { id: id });\n }\n }, [id]);\n\n // The timeout is required to give the Dialog component time to report the correct height\n // otherwise the window will be smaller than expected\n useEffect(() => {\n setTimeout(() => {\n if (windowRoot.current) {\n const { scrollHeight: height, scrollWidth: width } = windowRoot.current;\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n ipcRenderer.send(\"window-size\", {\n id: id,\n height: Math.ceil(height + 1),\n width: Math.ceil(width + 1),\n });\n }\n }\n }, 80);\n });\n\n // The timeout is required to allow the window time to be moved into position and scaled\n // before being shown to the user,\n useEffect(() => {\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n setTimeout(() => {\n ipcRenderer.send(\"window-ready\", { id: id });\n }, 100);\n }\n\n return () => {\n closeWindow();\n };\n }, [closeWindow, id]);\n\n // The timeout is required to give the Dialog component time to report the correct height\n // otherwise the window will be smaller than expected\n useIsomorphicLayoutEffect(() => {\n setTimeout(() => {\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n ipcRenderer.send(\"window-position\", {\n id: id,\n parentWindowID: parentWindow.id,\n left: style.left,\n top: style.top,\n });\n }\n }, 90);\n }, [style, id, parentWindow.id]);\n\n return mountNode\n ? ReactDOM.createPortal(\n <SaltProvider>\n <WindowParentContext.Provider\n value={{\n top: (style.top as number) + parentWindow.top,\n left: (style.left as number) + parentWindow.left,\n id: id,\n }}\n >\n <div className=\"saltWindow\" ref={forkedRef}>\n <div className={className} style={{ ...styleRest }} {...rest}>\n {children}\n </div>\n </div>\n </WindowParentContext.Provider>\n </SaltProvider>,\n mountNode,\n )\n : null;\n});\n\nexport const ElectronWindow = isDesktop ? Window : SaltWindow;\n"],"names":["forwardRef","ElectronWindow","useWindow","useComponentCssInjection","electronWindowCss","useState","useRef","useForkRef","useWindowParentContext","useCallback","useEffect","useIsomorphicLayoutEffect","SaltProvider","jsx","WindowParentContext","isDesktop","SaltWindow"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,SAASA,gBAAwC,CAAA,SAASC,eAC9D,CAAA,EAAE,WAAW,QAAU,EAAA,EAAA,GAAK,QAAU,EAAA,IAAA,GAAO,MAAM,KAAQ,GAAA,IAAI,GAAG,IAAA,IAClE,YACoB,EAAA;AACpB,EAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,QAAU,EAAA,GAAG,WAAc,GAAA,KAAA;AAE9C,EAAA,MAAM,eAAeC,kBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAyB,IAAI,CAAA;AAC/D,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA;AAE9C,EAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,YAAA,EAAc,UAAU,CAAA;AAErD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAA,MAAM,GAAM,GAAA,MAAA,CAAO,IAAK,CAAA,EAAA,EAAI,EAAE,CAAA;AAC9B,IAAA,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,QAAS,CAAA,KAAA;AAAA,MACZ,CAAgC,6BAAA,EAAA,EAAE,CAAuB,oBAAA,EAAA,QAAA,CAAS,MAAM,CAAA,6DAAA;AAAA,KAAA;AAE1E,IAAA,QAAA,CAAS,KAAK,gBAAiB,CAAA,OAAO,CAAE,CAAA,OAAA,CAAQ,CAAC,WAAgB,KAAA;AAC/D,MAAC,IAAe,QAAS,CAAA,IAAA,CAAK,YAAY,WAAY,CAAA,SAAA,CAAU,IAAI,CAAC,CAAA;AAAA,KACtE,CAAA;AACD,IAAM,MAAA,WAAA,GAAe,IAAe,QAAS,CAAA,IAAA;AAC7C,IAAA,YAAA,CAAa,WAAW,CAAA;AAAA;AAG1B,EAAA,MAAM,eAAeC,mCAAuB,EAAA;AAE5C,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AAEpC,IAAM,MAAA,EAAE,aAAgB,GAAA,MAAA;AACxB,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,WAAA,CAAY,IAAK,CAAA,cAAA,EAAgB,EAAE,EAAA,EAAQ,CAAA;AAAA;AAC7C,GACF,EAAG,CAAC,EAAE,CAAC,CAAA;AAIP,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,MAAM,EAAE,YAAc,EAAA,MAAA,EAAQ,WAAa,EAAA,KAAA,KAAU,UAAW,CAAA,OAAA;AAEhE,QAAM,MAAA,EAAE,aAAgB,GAAA,MAAA;AACxB,QAAA,IAAI,WAAa,EAAA;AACf,UAAA,WAAA,CAAY,KAAK,aAAe,EAAA;AAAA,YAC9B,EAAA;AAAA,YACA,MAAQ,EAAA,IAAA,CAAK,IAAK,CAAA,MAAA,GAAS,CAAC,CAAA;AAAA,YAC5B,KAAO,EAAA,IAAA,CAAK,IAAK,CAAA,KAAA,GAAQ,CAAC;AAAA,WAC3B,CAAA;AAAA;AACH;AACF,OACC,EAAE,CAAA;AAAA,GACN,CAAA;AAID,EAAAA,eAAA,CAAU,MAAM;AAEd,IAAM,MAAA,EAAE,aAAgB,GAAA,MAAA;AACxB,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,WAAA,CAAY,IAAK,CAAA,cAAA,EAAgB,EAAE,EAAA,EAAQ,CAAA;AAAA,SAC1C,GAAG,CAAA;AAAA;AAGR,IAAA,OAAO,MAAM;AACX,MAAY,WAAA,EAAA;AAAA,KACd;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,EAAE,CAAC,CAAA;AAIpB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AAEf,MAAM,MAAA,EAAE,aAAgB,GAAA,MAAA;AACxB,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,WAAA,CAAY,KAAK,iBAAmB,EAAA;AAAA,UAClC,EAAA;AAAA,UACA,gBAAgB,YAAa,CAAA,EAAA;AAAA,UAC7B,MAAM,KAAM,CAAA,IAAA;AAAA,UACZ,KAAK,KAAM,CAAA;AAAA,SACZ,CAAA;AAAA;AACH,OACC,EAAE,CAAA;AAAA,KACJ,CAAC,KAAA,EAAO,EAAI,EAAA,YAAA,CAAa,EAAE,CAAC,CAAA;AAE/B,EAAA,OAAO,YACH,QAAS,CAAA,YAAA;AAAA,mCACNC,iBACC,EAAA,EAAA,QAAA,kBAAAC,cAAA;AAAA,MAACC,gCAAoB,CAAA,QAAA;AAAA,MAApB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,GAAA,EAAM,KAAM,CAAA,GAAA,GAAiB,YAAa,CAAA,GAAA;AAAA,UAC1C,IAAA,EAAO,KAAM,CAAA,IAAA,GAAkB,YAAa,CAAA,IAAA;AAAA,UAC5C;AAAA,SACF;AAAA,QAEA,yCAAC,KAAI,EAAA,EAAA,SAAA,EAAU,YAAa,EAAA,GAAA,EAAK,WAC/B,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,KAAA,EAAO,EAAE,GAAG,SAAA,IAAc,GAAG,IAAA,EACrD,UACH,CACF,EAAA;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,IACA;AAAA,GAEF,GAAA,IAAA;AACN,CAAC,CAAA;AAEY,MAAA,cAAA,GAAiBE,0BAAY,MAAS,GAAAC;;;;"}

package/dist-es/breadcrumbs/internal/BreadcrumbsContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreadcrumbsContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface BreadcrumbsContext {\n wrap?: boolean;\n itemsMaxWidth?: number \| string;\n itemsMinWidth?: number \| string;\n liClass?: string;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContext \| undefined>(\n undefined,\n);\n\nexport const useBreadcrumbsContext = () => {\n const context = useContext(BreadcrumbsContext);\n if (!context) {\n throw new Error(\n \"BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component\",\n );\n }\n return context;\n};\n"],"names":[],"mappings":";;AASO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC~~,KAAA~~;AACF;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;"}
1	+ {"version":3,"file":"BreadcrumbsContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface BreadcrumbsContext {\n wrap?: boolean;\n itemsMaxWidth?: number \| string;\n itemsMinWidth?: number \| string;\n liClass?: string;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContext \| undefined>(\n undefined,\n);\n\nexport const useBreadcrumbsContext = () => {\n const context = useContext(BreadcrumbsContext);\n if (!context) {\n throw new Error(\n \"BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component\",\n );\n }\n return context;\n};\n"],"names":[],"mappings":";;AASO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC;AACF;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;"}

package/dist-es/button-bar/ButtonBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBar.js","sources":["../src/button-bar/ButtonBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type HTMLAttributes,\n type ReactNode,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type ButtonVariant, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { DescendantProvider } from \"./internal/DescendantContext\";\nimport { useDescendants } from \"./internal/useDescendants\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport buttonBarCss from \"./ButtonBar.css\";\n\nexport type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;\n\ntype ButtonBarOrderKey = \"order\" \| \"alignLeftOrder\" \| \"stackOrder\";\nexport type ButtonBarSortOrder = \"asc\" \| \"desc\";\n\nexport const DefaultButtonsOrderByVariant: Record<\n ButtonVariant,\n Record<ButtonBarOrderKey, number>\n> = {\n cta: {\n order: 0,\n alignLeftOrder: 1,\n stackOrder: 2,\n },\n primary: {\n order: 1,\n alignLeftOrder: 2,\n stackOrder: 1,\n },\n secondary: {\n order: 2,\n alignLeftOrder: 0,\n stackOrder: 0,\n },\n};\n\ntype OrderedButtonData = { variant?: ButtonVariant } & PartialRecord<\n ButtonBarOrderKey,\n number\n>;\n\nfunction getPriorityForButton(\n item: OrderedButtonData,\n field: ButtonBarOrderKey,\n) {\n const variant = item?.variant \|\| \"primary\";\n return item?.[field] ?? DefaultButtonsOrderByVariant[variant][field];\n}\nconst createComparatorForField = (\n field: ButtonBarOrderKey,\n sort: ButtonBarSortOrder,\n alignLeft: boolean,\n childrenData: Array<OrderedButtonData>,\n) => {\n let equalityResult: number;\n if (field === \"order\" \|\| field === \"stackOrder\") {\n equalityResult = sort === \"asc\" ? 1 : 0;\n } else {\n equalityResult = alignLeft ? 1 : -1;\n }\n\n function createDescComparator(indexA: number, indexB: number) {\n const priorityA = getPriorityForButton(childrenData[indexA], field);\n const priorityB = getPriorityForButton(childrenData[indexB], field);\n if (priorityA == null && priorityB == null) {\n return 0;\n }\n if (priorityA == null) {\n return 1;\n }\n if (priorityB == null) {\n return -1;\n }\n if (priorityA === priorityB) {\n return equalityResult;\n }\n return priorityB - priorityA;\n }\n\n function createAscComparator(indexA: number, indexB: number) {\n return createDescComparator(indexA, indexB) * -1;\n }\n\n return sort === \"asc\" ? createAscComparator : createDescComparator;\n};\n\nfunction alignSecondaryChild(\n orderedChildrenData: Array<OrderedButtonData & { index: number }>,\n sortOrder: ButtonBarSortOrder,\n alignLeft: boolean,\n): { index?: number; align?: \"left\" \| \"right\" } {\n const noSecondaryChildren = { index: undefined, align: undefined };\n if (sortOrder === \"asc\" \|\| alignLeft) {\n const firstSecondaryChildIndex = orderedChildrenData.findIndex(\n (childData) => childData.variant === \"secondary\",\n );\n\n if (firstSecondaryChildIndex !== -1) {\n const originalChildIndex =\n orderedChildrenData[firstSecondaryChildIndex].index;\n return { index: originalChildIndex, align: \"right\" };\n }\n return noSecondaryChildren;\n }\n let index = orderedChildrenData.length;\n while (index--) {\n if (orderedChildrenData[index].variant === \"secondary\") {\n return { index: orderedChildrenData[index].index, align: \"left\" };\n }\n }\n return noSecondaryChildren;\n}\n\nexport interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {\n /*\n By default ButtonBar lays buttons from right to left horizontally ordering action buttons by order prop.\n * Use this prop to lay button from left to right instead.\n * Actions buttons will be ordered by alignLeftOrder prop.\n /\n alignLeft?: boolean;\n /\n A list of OrderButtons. Required to have some children.\n /\n children: ReactNode;\n /\n The className(s) of the component\n /\n className?: string;\n /\n By default ButtonBar aligns secondary buttons to the left while displayed horizontally\n * and to the right while aligned left or sorting ascending.\n * Use this prop to disable this behavior.\n /\n disableAutoAlignment?: boolean;\n /\n By default ButtonBar sorts buttons in descending order.\n * Use this prop to change that when the button bar is NOT stacked and aligned left.\n /\n sortAlignLeft?: ButtonBarSortOrder;\n /\n By default ButtonBar sorts buttons in descending order.\n * Use this prop to change that when the button bar is NOT stacked and NOT aligned left.\n /\n sortOrder?: ButtonBarSortOrder;\n /\n By default ButtonBar sorts buttons in descending order.\n * Use this prop to change that when the button bar is stacked.\n /\n sortStackOrder?: ButtonBarSortOrder;\n /\n When the viewport is equal to or smaller than the breakpoint the buttons will be stacked vertically.\n * Alternatively pass a screen width number in pixels.\n * Use `0` to disable this feature. Defaults to 'xs'.\n * Actions buttons will be ordered by stackOrder prop.\n */\n stackAtBreakpoint?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| number;\n}\n\nconst withBaseName = makePrefixer(\"saltButtonBar\");\n\nexport const ButtonBar = forwardRef<HTMLDivElement, ButtonBarProps>(\n function ButtonBar(\n {\n alignLeft = false,\n children: childrenProp,\n className,\n disableAutoAlignment,\n sortAlignLeft = \"desc\",\n sortOrder = \"desc\",\n sortStackOrder = \"desc\",\n stackAtBreakpoint = \"xs\",\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button-bar\",\n css: buttonBarCss,\n window: targetWindow,\n });\n\n const [childrenData, setChildrenData] = useDescendants<OrderedButtonData>();\n // TODO: we need a mechanism to work with breakpoints.\n const matches = false;\n\n const childrenArray = Children.toArray(childrenProp);\n const childrenIndexes = childrenArray.map((_, index) => index);\n const stackOrderComparator = createComparatorForField(\n \"stackOrder\",\n sortStackOrder,\n alignLeft,\n childrenData,\n );\n const orderComparator = createComparatorForField(\n \"order\",\n sortOrder,\n alignLeft,\n childrenData,\n );\n const alignLeftComparator = createComparatorForField(\n \"alignLeftOrder\",\n sortAlignLeft,\n alignLeft,\n childrenData,\n );\n\n let orderedChildrenIndexes: number[];\n\n if (childrenData.length !== childrenIndexes.length) {\n orderedChildrenIndexes = childrenIndexes;\n } else {\n orderedChildrenIndexes = matches\n ? childrenIndexes.sort(stackOrderComparator)\n : childrenIndexes.sort(\n alignLeft ? alignLeftComparator : orderComparator,\n );\n }\n\n let secondaryChildAlignment: { index?: number; align?: \"left\" \| \"right\" } =\n {\n index: undefined,\n align: undefined,\n };\n if (!disableAutoAlignment) {\n secondaryChildAlignment = alignSecondaryChild(\n orderedChildrenIndexes.map((index) => ({\n index,\n ...childrenData[index],\n })),\n sortOrder,\n alignLeft,\n );\n }\n\n const hasSecondaryButtons = childrenData.some(\n (buttonData) => buttonData.variant === \"secondary\",\n );\n\n const orderedChildren = orderedChildrenIndexes.map(\n (index) => childrenArray[index],\n );\n\n const buttonBarContextValue = useMemo(\n () => ({\n matches,\n alignedIndex: secondaryChildAlignment.index,\n align: secondaryChildAlignment.align,\n }),\n [matches, secondaryChildAlignment.align, secondaryChildAlignment.index],\n );\n\n return (\n <ButtonBarContext.Provider value={buttonBarContextValue}>\n <DescendantProvider items={childrenData} setItems={setChildrenData}>\n <div\n aria-label=\"button bar\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"stacked\")]: matches,\n [withBaseName(\"alignLeft\")]: alignLeft,\n [withBaseName(\"autoAligning\")]:\n hasSecondaryButtons && !disableAutoAlignment,\n },\n className,\n )}\n ref={ref}\n role=\"region\"\n {...rest}\n >\n {orderedChildren}\n </div>\n </DescendantProvider>\n </ButtonBarContext.Provider>\n );\n },\n);\n"],"names":["ButtonBar","buttonBarCss"],"mappings":"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"}
1	+ {"version":3,"file":"ButtonBar.js","sources":["../src/button-bar/ButtonBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type HTMLAttributes,\n type ReactNode,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type ButtonVariant, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { DescendantProvider } from \"./internal/DescendantContext\";\nimport { useDescendants } from \"./internal/useDescendants\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport buttonBarCss from \"./ButtonBar.css\";\n\nexport type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;\n\ntype ButtonBarOrderKey = \"order\" \| \"alignLeftOrder\" \| \"stackOrder\";\nexport type ButtonBarSortOrder = \"asc\" \| \"desc\";\n\nexport const DefaultButtonsOrderByVariant: Record<\n ButtonVariant,\n Record<ButtonBarOrderKey, number>\n> = {\n cta: {\n order: 0,\n alignLeftOrder: 1,\n stackOrder: 2,\n },\n primary: {\n order: 1,\n alignLeftOrder: 2,\n stackOrder: 1,\n },\n secondary: {\n order: 2,\n alignLeftOrder: 0,\n stackOrder: 0,\n },\n};\n\ntype OrderedButtonData = { variant?: ButtonVariant } & PartialRecord<\n ButtonBarOrderKey,\n number\n>;\n\nfunction getPriorityForButton(\n item: OrderedButtonData,\n field: ButtonBarOrderKey,\n) {\n const variant = item?.variant \|\| \"primary\";\n return item?.[field] ?? DefaultButtonsOrderByVariant[variant][field];\n}\nconst createComparatorForField = (\n field: ButtonBarOrderKey,\n sort: ButtonBarSortOrder,\n alignLeft: boolean,\n childrenData: Array<OrderedButtonData>,\n) => {\n let equalityResult: number;\n if (field === \"order\" \|\| field === \"stackOrder\") {\n equalityResult = sort === \"asc\" ? 1 : 0;\n } else {\n equalityResult = alignLeft ? 1 : -1;\n }\n\n function createDescComparator(indexA: number, indexB: number) {\n const priorityA = getPriorityForButton(childrenData[indexA], field);\n const priorityB = getPriorityForButton(childrenData[indexB], field);\n if (priorityA == null && priorityB == null) {\n return 0;\n }\n if (priorityA == null) {\n return 1;\n }\n if (priorityB == null) {\n return -1;\n }\n if (priorityA === priorityB) {\n return equalityResult;\n }\n return priorityB - priorityA;\n }\n\n function createAscComparator(indexA: number, indexB: number) {\n return createDescComparator(indexA, indexB) * -1;\n }\n\n return sort === \"asc\" ? createAscComparator : createDescComparator;\n};\n\nfunction alignSecondaryChild(\n orderedChildrenData: Array<OrderedButtonData & { index: number }>,\n sortOrder: ButtonBarSortOrder,\n alignLeft: boolean,\n): { index?: number; align?: \"left\" \| \"right\" } {\n const noSecondaryChildren = { index: undefined, align: undefined };\n if (sortOrder === \"asc\" \|\| alignLeft) {\n const firstSecondaryChildIndex = orderedChildrenData.findIndex(\n (childData) => childData.variant === \"secondary\",\n );\n\n if (firstSecondaryChildIndex !== -1) {\n const originalChildIndex =\n orderedChildrenData[firstSecondaryChildIndex].index;\n return { index: originalChildIndex, align: \"right\" };\n }\n return noSecondaryChildren;\n }\n let index = orderedChildrenData.length;\n while (index--) {\n if (orderedChildrenData[index].variant === \"secondary\") {\n return { index: orderedChildrenData[index].index, align: \"left\" };\n }\n }\n return noSecondaryChildren;\n}\n\nexport interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {\n /*\n By default ButtonBar lays buttons from right to left horizontally ordering action buttons by order prop.\n * Use this prop to lay button from left to right instead.\n * Actions buttons will be ordered by alignLeftOrder prop.\n /\n alignLeft?: boolean;\n /\n A list of OrderButtons. Required to have some children.\n /\n children: ReactNode;\n /\n The className(s) of the component\n /\n className?: string;\n /\n By default ButtonBar aligns secondary buttons to the left while displayed horizontally\n * and to the right while aligned left or sorting ascending.\n * Use this prop to disable this behavior.\n /\n disableAutoAlignment?: boolean;\n /\n By default ButtonBar sorts buttons in descending order.\n * Use this prop to change that when the button bar is NOT stacked and aligned left.\n /\n sortAlignLeft?: ButtonBarSortOrder;\n /\n By default ButtonBar sorts buttons in descending order.\n * Use this prop to change that when the button bar is NOT stacked and NOT aligned left.\n /\n sortOrder?: ButtonBarSortOrder;\n /\n By default ButtonBar sorts buttons in descending order.\n * Use this prop to change that when the button bar is stacked.\n /\n sortStackOrder?: ButtonBarSortOrder;\n /\n When the viewport is equal to or smaller than the breakpoint the buttons will be stacked vertically.\n * Alternatively pass a screen width number in pixels.\n * Use `0` to disable this feature. Defaults to 'xs'.\n * Actions buttons will be ordered by stackOrder prop.\n */\n stackAtBreakpoint?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| number;\n}\n\nconst withBaseName = makePrefixer(\"saltButtonBar\");\n\nexport const ButtonBar = forwardRef<HTMLDivElement, ButtonBarProps>(\n function ButtonBar(\n {\n alignLeft = false,\n children: childrenProp,\n className,\n disableAutoAlignment,\n sortAlignLeft = \"desc\",\n sortOrder = \"desc\",\n sortStackOrder = \"desc\",\n stackAtBreakpoint = \"xs\",\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button-bar\",\n css: buttonBarCss,\n window: targetWindow,\n });\n\n const [childrenData, setChildrenData] = useDescendants<OrderedButtonData>();\n // TODO: we need a mechanism to work with breakpoints.\n const matches = false;\n\n const childrenArray = Children.toArray(childrenProp);\n const childrenIndexes = childrenArray.map((_, index) => index);\n const stackOrderComparator = createComparatorForField(\n \"stackOrder\",\n sortStackOrder,\n alignLeft,\n childrenData,\n );\n const orderComparator = createComparatorForField(\n \"order\",\n sortOrder,\n alignLeft,\n childrenData,\n );\n const alignLeftComparator = createComparatorForField(\n \"alignLeftOrder\",\n sortAlignLeft,\n alignLeft,\n childrenData,\n );\n\n let orderedChildrenIndexes: number[];\n\n if (childrenData.length !== childrenIndexes.length) {\n orderedChildrenIndexes = childrenIndexes;\n } else {\n orderedChildrenIndexes = matches\n ? childrenIndexes.sort(stackOrderComparator)\n : childrenIndexes.sort(\n alignLeft ? alignLeftComparator : orderComparator,\n );\n }\n\n let secondaryChildAlignment: { index?: number; align?: \"left\" \| \"right\" } =\n {\n index: undefined,\n align: undefined,\n };\n if (!disableAutoAlignment) {\n secondaryChildAlignment = alignSecondaryChild(\n orderedChildrenIndexes.map((index) => ({\n index,\n ...childrenData[index],\n })),\n sortOrder,\n alignLeft,\n );\n }\n\n const hasSecondaryButtons = childrenData.some(\n (buttonData) => buttonData.variant === \"secondary\",\n );\n\n const orderedChildren = orderedChildrenIndexes.map(\n (index) => childrenArray[index],\n );\n\n const buttonBarContextValue = useMemo(\n () => ({\n matches,\n alignedIndex: secondaryChildAlignment.index,\n align: secondaryChildAlignment.align,\n }),\n [matches, secondaryChildAlignment.align, secondaryChildAlignment.index],\n );\n\n return (\n <ButtonBarContext.Provider value={buttonBarContextValue}>\n <DescendantProvider items={childrenData} setItems={setChildrenData}>\n <div\n aria-label=\"button bar\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"stacked\")]: matches,\n [withBaseName(\"alignLeft\")]: alignLeft,\n [withBaseName(\"autoAligning\")]:\n hasSecondaryButtons && !disableAutoAlignment,\n },\n className,\n )}\n ref={ref}\n role=\"region\"\n {...rest}\n >\n {orderedChildren}\n </div>\n </DescendantProvider>\n </ButtonBarContext.Provider>\n );\n },\n);\n"],"names":["ButtonBar","buttonBarCss"],"mappings":"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"}

package/dist-es/button-bar/OrderedButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, useContext } from \"react\";\n\nimport {\n Button,\n type ButtonProps,\n capitalize,\n makePrefixer,\n} from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport orderedButtonCss from \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n /*\n Aligns the button (and any buttons before/after) it on the left/right\n * of the container\n /\n align?: \"left\" \| \"right\";\n /\n The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n * Buttons are ordered in descending order by default and then by their source order.\n * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n /\n alignLeftOrder?: number;\n /\n The className(s) of the component\n /\n className?: string;\n /\n The order the button will be rendered when NOT stacked. Buttons are ordered\n * in descending order by default and then by their source order.\n * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n /\n order?: number;\n /\n The order the button will be rendered when stacked. Buttons are ordered\n * in descending order by default and then by their source order.\n * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n */\n stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n function OrderedButton(\n {\n className,\n align: alignProp,\n order,\n alignLeftOrder,\n stackOrder,\n variant,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-ordered-button\",\n css: orderedButtonCss,\n window: targetWindow,\n });\n\n const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n const {\n matches,\n align: alignContext,\n alignedIndex,\n } = useContext(ButtonBarContext);\n\n const alignFromParent = index === alignedIndex ? alignContext : undefined;\n const align = alignProp \|\| alignFromParent;\n\n return (\n <Button\n className={clsx(\n withBasename(),\n {\n [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n align && !matches,\n [withBasename(\"stacked\")]: matches,\n },\n className,\n )}\n ref={ref}\n variant={variant}\n {...restProps}\n />\n );\n },\n);\n"],"names":["OrderedButton","orderedButtonCss"],"mappings":";;;;;;;;;;AA+CA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,QAAQ,aAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP;AAAA,KACF,GAAI,WAAW,gBAAgB,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,~~KAAA,CAAA~~;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA;AAE3B,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,CAAQ,KAAA,EAAA,KAAA,GAAQ,UAAW,CAAA,KAAK,CAAI,GAAA,EAAE,CAAE,CAAA,CAAC,GACrD,KAAA,IAAS,CAAC,OAAA;AAAA,YACZ,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, useContext } from \"react\";\n\nimport {\n Button,\n type ButtonProps,\n capitalize,\n makePrefixer,\n} from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport orderedButtonCss from \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n /*\n Aligns the button (and any buttons before/after) it on the left/right\n * of the container\n /\n align?: \"left\" \| \"right\";\n /\n The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n * Buttons are ordered in descending order by default and then by their source order.\n * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n /\n alignLeftOrder?: number;\n /\n The className(s) of the component\n /\n className?: string;\n /\n The order the button will be rendered when NOT stacked. Buttons are ordered\n * in descending order by default and then by their source order.\n * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n /\n order?: number;\n /\n The order the button will be rendered when stacked. Buttons are ordered\n * in descending order by default and then by their source order.\n * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n */\n stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n function OrderedButton(\n {\n className,\n align: alignProp,\n order,\n alignLeftOrder,\n stackOrder,\n variant,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-ordered-button\",\n css: orderedButtonCss,\n window: targetWindow,\n });\n\n const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n const {\n matches,\n align: alignContext,\n alignedIndex,\n } = useContext(ButtonBarContext);\n\n const alignFromParent = index === alignedIndex ? alignContext : undefined;\n const align = alignProp \|\| alignFromParent;\n\n return (\n <Button\n className={clsx(\n withBasename(),\n {\n [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n align && !matches,\n [withBasename(\"stacked\")]: matches,\n },\n className,\n )}\n ref={ref}\n variant={variant}\n {...restProps}\n />\n );\n },\n);\n"],"names":["OrderedButton","orderedButtonCss"],"mappings":";;;;;;;;;;AA+CA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,QAAQ,aAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP;AAAA,KACF,GAAI,WAAW,gBAAgB,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,MAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA;AAE3B,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,CAAQ,KAAA,EAAA,KAAA,GAAQ,UAAW,CAAA,KAAK,CAAI,GAAA,EAAE,CAAE,CAAA,CAAC,GACrD,KAAA,IAAS,CAAC,OAAA;AAAA,YACZ,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}

package/dist-es/button-bar/internal/useDescendant.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDescendant.js","sources":["../src/button-bar/internal/useDescendant.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useContext, useRef } from \"react\";\n\nimport { DescendantContext } from \"./DescendantContext\";\n\nexport function useDescendant(descendant: Record<string, any>): number {\n const { assigning, setItems } = useContext(DescendantContext);\n const index = useRef(-1);\n\n useIsomorphicLayoutEffect(() => {\n if (assigning?.current && setItems) {\n setItems((old) => {\n index.current = old.length;\n return old.concat(descendant);\n });\n }\n });\n\n // first render its wrong, after a forceUpdate in parent useIsomorphicLayoutEffect it's\n // right, and its all synchronous so we don't get any flashing\n return index.current;\n}\n"],"names":[],"mappings":";;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAI,WAAW,iBAAiB,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQ,OAAO,~~CAAE~~,CAAA~~,CAAA~~;AAEvB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAA,SAAA,IAAA,IAAA,GAAA,~~KAAA~~,~~CAAA,~~GAAA,SAAA,CAAW,YAAW,QAAU,EAAA;AAClC,MAAA,QAAA,CAAS,CAAC,GAAQ,KAAA;AAChB,QAAA,KAAA,CAAM,UAAU,GAAI,CAAA,MAAA;AACpB,QAAO,OAAA,GAAA,CAAI,OAAO,UAAU,CAAA;AAAA,OAC7B,CAAA;AAAA;AACH,GACD,CAAA;AAID,EAAA,OAAO,KAAM,CAAA,OAAA;AACf;;;;"}
1	+ {"version":3,"file":"useDescendant.js","sources":["../src/button-bar/internal/useDescendant.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useContext, useRef } from \"react\";\n\nimport { DescendantContext } from \"./DescendantContext\";\n\nexport function useDescendant(descendant: Record<string, any>): number {\n const { assigning, setItems } = useContext(DescendantContext);\n const index = useRef(-1);\n\n useIsomorphicLayoutEffect(() => {\n if (assigning?.current && setItems) {\n setItems((old) => {\n index.current = old.length;\n return old.concat(descendant);\n });\n }\n });\n\n // first render its wrong, after a forceUpdate in parent useIsomorphicLayoutEffect it's\n // right, and its all synchronous so we don't get any flashing\n return index.current;\n}\n"],"names":[],"mappings":";;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAI,WAAW,iBAAiB,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQ,OAAO,EAAE,CAAA;AAEvB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,YAAW,QAAU,EAAA;AAClC,MAAA,QAAA,CAAS,CAAC,GAAQ,KAAA;AAChB,QAAA,KAAA,CAAM,UAAU,GAAI,CAAA,MAAA;AACpB,QAAO,OAAA,GAAA,CAAI,OAAO,UAAU,CAAA;AAAA,OAC7B,CAAA;AAAA;AACH,GACD,CAAA;AAID,EAAA,OAAO,KAAM,CAAA,OAAA;AACf;;;;"}

package/dist-es/calendar/Calendar.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { CalendarContext } from './internal/CalendarContext.js';
 import { useCalendar } from './useCalendar.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -26,20 +26,34 @@ const Calendar = forwardRef(
       defaultSelectedDate,
       visibleMonth: visibleMonthProp,
       defaultVisibleMonth,
+      onFocusedDateChange,
       onSelectionChange,
       onVisibleMonthChange,
       hideOutOfRangeDates,
+      focusedDate,
+      focusedDateRef,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
-      locale,
       minDate,
       maxDate,
+      numberOfVisibleMonths = 1,
       selectionVariant,
       onHoveredDateChange,
       hoveredDate,
+      timezone: timezoneProp,
       ...propsRest
     } = props;
+    let timezone = "default";
+    if (timezoneProp) {
+      timezone = timezoneProp;
+    } else if (selectionVariant === "range") {
+      const defaultRangeTimezoneDate = (selectedDate == null ? void 0 : selectedDate.startDate) ?? (selectedDate == null ? void 0 : selectedDate.endDate) ?? (defaultSelectedDate == null ? void 0 : defaultSelectedDate.startDate) ?? (defaultSelectedDate == null ? void 0 : defaultSelectedDate.endDate);
+      timezone = defaultRangeTimezoneDate ? dateAdapter.getTimezone(defaultRangeTimezoneDate) : "default";
+    } else if (selectionVariant === "single") {
+      const defaultSingleTimezoneDate = selectedDate ?? defaultSelectedDate;
+      timezone = defaultSingleTimezoneDate ? dateAdapter.getTimezone(defaultSingleTimezoneDate) : "default";
+    }
     let startDateOffset;
     let endDateOffset;
     let rest;
@@ -48,6 +62,7 @@ const Calendar = forwardRef(
     } else {
       rest = propsRest;
     }
+    const defaultFocusedDateRef = useRef(null);
     const useCalendarProps = {
       selectedDate,
       defaultSelectedDate,
@@ -55,25 +70,25 @@ const Calendar = forwardRef(
       defaultVisibleMonth,
       onSelectionChange,
       onVisibleMonthChange,
+      focusedDate,
+      focusedDateRef: focusedDateRef !== void 0 ? focusedDateRef : defaultFocusedDateRef,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
-      locale,
       minDate,
       maxDate,
+      numberOfVisibleMonths,
       selectionVariant,
+      onFocusedDateChange,
       onHoveredDateChange,
       hideOutOfRangeDates,
       hoveredDate,
       startDateOffset,
-      endDateOffset
+      endDateOffset,
+      timezone
     };
     const { state, helpers } = useCalendar(useCalendarProps);
-    const calendarLabel = dateAdapter.format(
-      state.visibleMonth,
-      "MMMM YYYY",
-      locale
-    );
+    const calendarLabel = dateAdapter.format(state.visibleMonth, "MMMM YYYY");
     return /* @__PURE__ */ jsx(
       CalendarContext.Provider,
       {

package/dist-es/calendar/Calendar.js.map CHANGED Viewed

	@@ -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} 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 type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useLocalization } from \"../localization-provider\";\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 ~~Locale~~ ~~for~~ date ~~formatting~~\n /\n ~~locale~~?: ~~any~~;\n}\n\n/\n Props for the Calendar component with single date selection.\n /\nexport interface CalendarSingleProps<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarSingleProps<TDate> {\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<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarRangeProps<TDate> {\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<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarMultiSelectProps<TDate> {\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<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarOffsetProps<TDate> {\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<TDate extends DateFrameworkType> =\n \| CalendarSingleProps<TDate>\n \| CalendarRangeProps<TDate>\n \| CalendarMultiSelectProps<TDate>\n \| CalendarOffsetProps<TDate>;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps<~~any>>~~(\n <TDate extends DateFrameworkType>(\n props: CalendarProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const targetWindow = useWindow();\n const { dateAdapter } = useLocalization<TDate>();\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 defaultVisibleMonth,\n onSelectionChange,\n onVisibleMonthChange,\n hideOutOfRangeDates,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n ~~locale~~,\n ~~minDate~~,\n ~~maxDate~~,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n ...propsRest\n } = props;\n let startDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n let endDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n let rest: Partial<typeof props>;\n if (selectionVariant === \"offset\") {\n ({ startDateOffset, endDateOffset, ...rest } =\n propsRest as CalendarOffsetProps<TDate>);\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 defaultVisibleMonth,\n onSelectionChange,\n onVisibleMonthChange,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n ~~locale~~,\n ~~minDate~~,\n ~~maxDate~~,\n selectionVariant,\n onHoveredDateChange,\n hideOutOfRangeDates,\n hoveredDate,\n startDateOffset,\n endDateOffset,\n };\n const { state, helpers } = useCalendar<TDate>(useCalendarProps);\n const calendarLabel = dateAdapter.format(\n state.visibleMonth~~,\n~~ \"MMMM YYYY\"~~,\n locale,\n~~ );\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":["calendarCss"],"mappings":";;;;;;;;;;;~~AAkGA~~,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,~~EACtB~~,CACE,OACA,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAC/C,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,~~MAAA~~;AAAA,MACA,OAAA;AAAA,MACA,~~OAAA~~;AAAA,~~MACA~~,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;~~AACJ~~,IAAI,IAAA,eAAA;AACJ,IAAI,IAAA,aAAA;AACJ,IAAI,IAAA,IAAA;AACJ,IAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,MAAA,CAAC,EAAE,eAAA,EAAiB,aAAe,EAAA,GAAG,MACpC,GAAA,SAAA;AAAA,KACG,MAAA;AACL,MAAO,IAAA,GAAA,SAAA;AAAA;~~AAGT~~,IAAA,MAAM,gBAAwB,GAAA;AAAA,MAC5B,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,~~MAAA~~;AAAA,MACA,OAAA;AAAA,MACA,~~OAAA~~;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,YAAmB,gBAAgB,CAAA;AAC9D,IAAA,MAAM,~~gBAAgB~~,~~WAAY~~,~~CAAA~~,~~MAAA;AAAA~~,~~MAChC~~,~~KAAM,~~CAAA,~~YAAA;AAAA~~,~~MACN~~,~~WAAA;AAAA~~,~~MACA;AAAA~~,~~KACF~~;~~AAEA~~,IACE,uBAAA,GAAA;AAAA,MAAC,eAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,IAAK,EAAA,aAAA;AAAA,YACL,YAAY,EAAA,aAAA;AAAA,YACZ,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { type ResponsiveProp, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n useRef,\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 type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport { useLocalization } from \"../localization-provider\";\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 Ref to attach to the focused element,enabling focus to be controlled.\n /\n focusedDateRef?: React.MutableRefObject<HTMLElement \| null>;\n /\n Number of visible months, maximum 12, defaults to 1\n /\n numberOfVisibleMonths?: ResponsiveProp<\n 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12\n >;\n /\n Specifies the timezone behavior:\n * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n * - If set to \"default\", the default timezone of the date library will be used.\n * - If set to \"system\", the local system's timezone will be applied.\n * - If set to \"UTC\", the time will be returned in UTC.\n * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n /\n timezone?: Timezone;\n}\n\n/\n Props for the Calendar component with single date selection.\n * @template TDate - The type of the date object.\n /\nexport interface CalendarSingleProps<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarSingleProps<TDate> {\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 * @template TDate - The type of the date object.\n /\nexport interface CalendarRangeProps<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarRangeProps<TDate> {\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 * @template TDate - The type of the date object.\n /\nexport interface CalendarMultiSelectProps<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarMultiSelectProps<TDate> {\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 * @template TDate - The type of the date object.\n /\nexport interface CalendarOffsetProps<TDate extends DateFrameworkType>\n extends CalendarBaseProps,\n UseCalendarOffsetProps<TDate> {\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 * @template TDate - The type of the date object.\n */\nexport type CalendarProps<TDate extends DateFrameworkType> =\n \| CalendarSingleProps<TDate>\n \| CalendarRangeProps<TDate>\n \| CalendarMultiSelectProps<TDate>\n \| CalendarOffsetProps<TDate>;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<\n HTMLDivElement,\n CalendarProps<DateFrameworkType>\n>(\n <TDate extends DateFrameworkType>(\n props: CalendarProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const targetWindow = useWindow();\n const { dateAdapter } = useLocalization<TDate>();\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 defaultVisibleMonth,\n onFocusedDateChange,\n onSelectionChange,\n onVisibleMonthChange,\n hideOutOfRangeDates,\n focusedDate,\n focusedDateRef,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n minDate,\n maxDate,\n numberOfVisibleMonths = 1,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n timezone: timezoneProp,\n ...propsRest\n } = props;\n\n let timezone: Timezone = \"default\";\n if (timezoneProp) {\n timezone = timezoneProp;\n } else if (selectionVariant === \"range\") {\n const defaultRangeTimezoneDate =\n selectedDate?.startDate ??\n selectedDate?.endDate ??\n defaultSelectedDate?.startDate ??\n defaultSelectedDate?.endDate;\n timezone = defaultRangeTimezoneDate\n ? dateAdapter.getTimezone(defaultRangeTimezoneDate)\n : \"default\";\n } else if (selectionVariant === \"single\") {\n const defaultSingleTimezoneDate = selectedDate ?? defaultSelectedDate;\n timezone = defaultSingleTimezoneDate\n ? dateAdapter.getTimezone(defaultSingleTimezoneDate)\n : \"default\";\n }\n\n let startDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n let endDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n let rest: Partial<typeof props>;\n if (selectionVariant === \"offset\") {\n ({ startDateOffset, endDateOffset, ...rest } =\n propsRest as CalendarOffsetProps<TDate>);\n } else {\n rest = propsRest;\n }\n const defaultFocusedDateRef = useRef(null);\n\n // biome-ignore lint/suspicious/noExplicitAny: type guard\n const useCalendarProps: any = {\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n defaultVisibleMonth,\n onSelectionChange,\n onVisibleMonthChange,\n focusedDate,\n focusedDateRef:\n focusedDateRef !== undefined ? focusedDateRef : defaultFocusedDateRef,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n minDate,\n maxDate,\n numberOfVisibleMonths,\n selectionVariant,\n onFocusedDateChange,\n onHoveredDateChange,\n hideOutOfRangeDates,\n hoveredDate,\n startDateOffset,\n endDateOffset,\n timezone,\n };\n const { state, helpers } = useCalendar<TDate>(useCalendarProps);\n const calendarLabel = dateAdapter.format(state.visibleMonth, \"MMMM YYYY\");\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":["calendarCss"],"mappings":"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"}

package/dist-es/calendar/CalendarGrid.js CHANGED Viewed

@@ -1,101 +1,77 @@
-import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import { forwardRef, useRef, useCallback, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useForkRef, GridLayout, GridItem } from '@salt-ds/core';
+import { forwardRef, useRef } from 'react';
 import { useCalendarContext } from './internal/CalendarContext.js';
 import { CalendarMonth } from './internal/CalendarMonth.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
 import { useLocalization } from '../localization-provider/LocalizationProvider.js';
-import css_248z from './CalendarGrid.css.js';
-import { monthDiff } from './internal/utils.js';
+import { CalendarMonthHeader } from './CalendarMonthHeader.js';
+import { CalendarWeekHeader } from './CalendarWeekHeader.js';
-const withBaseName = makePrefixer("saltCalendarGrid");
 const CalendarGrid = forwardRef(
   (props, ref) => {
     const {
-      onFocus,
+      CalendarDayProps,
+      CalendarWeekHeaderProps,
+      CalendarMonthHeaderProps,
+      columns = 1,
       onBlur,
-      getCalendarMonthProps = () => void 0,
       ...rest
     } = props;
     const { dateAdapter } = useLocalization();
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-      testId: "salt-calendar-grid",
-      css: css_248z,
-      window: targetWindow
-    });
     const {
-      state: { visibleMonth, locale },
-      helpers: { setCalendarFocused }
+      helpers: { setFocusedDate, setHoveredDate },
+      state: { visibleMonth, numberOfVisibleMonths = 1 }
     } = useCalendarContext();
-    const containerRef = useRef(null);
-    const diffIndex = (a, b) => monthDiff(dateAdapter, a, b);
-    const { current: baseIndex } = useRef(visibleMonth);
-    useIsomorphicLayoutEffect(() => {
-      if (containerRef.current) {
-        containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
-      }
-    });
-    const getMonths = useCallback(
-      (month) => {
-        return [
-          dateAdapter.subtract(month, { months: 1 }),
-          month,
-          dateAdapter.add(month, { months: 1 })
-        ];
-      },
-      [dateAdapter.subtract]
-    );
-    const handleFocus = useCallback(
-      (event) => {
-        setCalendarFocused(true);
-        onFocus == null ? void 0 : onFocus(event);
-      },
-      [setCalendarFocused, onFocus]
-    );
-    const handleBlur = useCallback(
-      (event) => {
-        setCalendarFocused(false);
-        onBlur == null ? void 0 : onBlur(event);
-      },
-      [setCalendarFocused, onBlur]
-    );
-    const months = useMemo(() => {
-      return getMonths(visibleMonth);
-    }, [dateAdapter.format(visibleMonth)]);
+    const calendarGridRef = useRef(null);
+    const containerRef = useForkRef(ref, calendarGridRef);
+    const handleCalendarGridBlur = (event) => {
+      event.stopPropagation();
+      setTimeout(() => {
+        var _a;
+        if ((_a = calendarGridRef == null ? void 0 : calendarGridRef.current) == null ? void 0 : _a.contains(document.activeElement)) {
+          return;
+        }
+        setFocusedDate(event, null);
+        setHoveredDate(event, null);
+      }, 0);
+      onBlur == null ? void 0 : onBlur(event);
+    };
     return /* @__PURE__ */ jsx(
-      "div",
+      GridLayout,
       {
-        className: withBaseName(),
-        tabIndex: -1,
-        style: {
-          overflowX: "hidden",
-          position: "relative"
-        },
-        ref,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: withBaseName("grid"),
-            ref: containerRef,
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            ...rest,
-            children: months.map((date, index) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: withBaseName("slide"),
-                style: {
-                  transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
-                },
-                "aria-hidden": index !== 1 ? "true" : void 0,
-                children: /* @__PURE__ */ jsx(CalendarMonth, { ...getCalendarMonthProps(date), date })
-              },
-              dateAdapter.format(date, locale)
-            ))
-          }
-        )
+        columns,
+        gap: 1,
+        ref: containerRef,
+        onBlur: handleCalendarGridBlur,
+        ...rest,
+        children: Array.from({ length: numberOfVisibleMonths }, (_value, index) => {
+          const gridItemVisibleMonth = dateAdapter.add(visibleMonth, {
+            months: index
+          });
+          return /* @__PURE__ */ jsxs(
+            GridItem,
+            {
+              children: [
+                numberOfVisibleMonths > 1 ? /* @__PURE__ */ jsx(
+                  CalendarMonthHeader,
+                  {
+                    ...CalendarMonthHeaderProps,
+                    month: gridItemVisibleMonth
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(CalendarWeekHeader, { ...CalendarWeekHeaderProps }),
+                /* @__PURE__ */ jsx(
+                  CalendarMonth,
+                  {
+                    date: gridItemVisibleMonth,
+                    CalendarDayProps
+                  }
+                )
+              ]
+            },
+            `calendar-grid-item-${dateAdapter.format(gridItemVisibleMonth, "MMMM YYYY")}`
+          );
+        })
       }
     );
   }

package/dist-es/calendar/CalendarGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarGrid.js","sources":["../src/calendar/CalendarGrid.tsx"],"sourcesContent":["import { ~~makePrefixer, useIsomorphicLayoutEffect~~ } from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n ~~useCallback,\n useMemo,\n~~ useRef,\n} from \"react\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport ~~{\n CalendarMonth,\n~~ type ~~CalendarMonthProps,\n~~} from \"./internal/~~CalendarMonth~~\";\n\nimport ~~type~~ { ~~DateFrameworkType~~ } from \"~~@salt-ds~~/~~date-adapters~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles\";\nimport { useWindow } from \"@salt~~-~~ds/window~~\";\nimport { useLocalization } from \"../localization-provider\";\nimport ~~calendarGridCss~~ from \"./~~CalendarGrid.css~~\";\nimport { ~~monthDiff~~ } from \"./~~internal/utils~~\";\n\n/*\n Props for the CalendarGrid component.\n /\nexport interface CalendarGridProps<TDate extends DateFrameworkType>\n extends ComponentPropsWithoutRef<\"div\"> {\n /\n ~~Props~~ ~~getter~~ to ~~pass~~ to ~~each~~ ~~CalendarMonth~~ ~~element\~~n /\n ~~getCalendarMonthProps~~?: (\n ~~date:~~ ~~TDate,\~~n ) ~~=> Omit~~<~~CalendarMonthProps~~<TDate~~>, \"date\">;\~~n}\n~~\nconst~~ ~~withBaseName~~ = ~~makePrefixer(~~\~~"saltCalendarGrid\");\~~n\nexport const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps<~~any>>~~(\n <TDate extends DateFrameworkType>(\n props: CalendarGridProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const {\n ~~onFocus~~,\n ~~onBlur~~,\n ~~getCalendarMonthProps~~ = ~~() => undefined~~,\n ...rest\n } = props;\n\n const { dateAdapter } = useLocalization<TDate>();\n\n const ~~targetWindow = useWindow();\n useComponentCssInjection(~~{\n ~~testId~~: ~~\"salt-calendar-grid\",\n css:~~ ~~calendarGridCss,\n window:~~ ~~targetWindow~~,\n ~~});\n\n const {\n~~ state: { visibleMonth, ~~locale~~ ~~},\n helpers:~~ { ~~setCalendarFocused~~ },\n } = useCalendarContext<TDate>();\n const ~~containerRef~~ = useRef<HTMLDivElement>(null);\n const ~~diffIndex~~ = (~~a: TDate~~, ~~b: TDate~~) ~~=>\n monthDiff<TDate>(dateAdapter, 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 getMonths = useCallback(\n~~ (~~month: TDate~~) => {\n ~~return~~ ~~[\n dateAdapter.subtract~~(~~month, { months: 1 }),\n month,\n dateAdapter.add~~(~~month, { months: 1 }),\n ];\n },\n [dateAdapter~~.~~subtract],\n~~ )~~;\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 const months = useMemo(() => {\n~~ ~~return getMonths~~(~~visibleMonth~~);\n }~~, [dateAdapter.format(visibleMonth)])~~;\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={dateAdapter.format(~~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);\n"],"names":[~~"calendarGridCss"~~],"mappings":"~~;;;;;;;;;;;AAmCA~~,MAAM,~~YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,~~YAAe,GAAA,UAAA;AAAA,~~EAC1B~~,CACE,OACA,GACG,KAAA;AACH,IAAM,MAAA;AAAA,MACJ,~~OAAA~~;AAAA,MACA,~~MAAA~~;AAAA,MACA,~~wBAAwB~~,~~MAAM~~,~~KAAA~~,CAAA;AAAA,~~MAC9B~~,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAE/C,~~IAAA~~,~~MAAM,eAAe,SAAU,EAAA~~;~~AAC/B,IAAyB,wBAAA,CAAA;~~AAAA,~~MACvB~~,~~MAAQ~~,~~EAAA~~,~~oBAAA;AAAA~~,~~MACR~~,~~GAAK~~,~~EAAAA~~,~~QAAA~~;AAAA,~~MACL~~,~~MAAQ~~,EAAA~~;AAAA~~,~~KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,KAAA,EAAO,~~EAAE,~~YAAA~~,~~EAAc,MAAO,~~EAAA~~;AAAA~~,~~MAC9B~~,~~OAAA~~,~~EAAS,EAAE,kBAAmB~~;AAAA,~~QAC5B~~,kBAA0B,EAAA;AAC9B,IAAM,MAAA,~~YAAA~~,~~GAAe~~,OAAuB,IAAI,CAAA;~~AAChD~~,~~IAAA~~,~~MAAM~~,~~YAAY~~,~~CAAC~~,~~CAAA~~,~~EAAU,MAC3B,SAAiB,~~CAAA,~~WAAA~~,~~EAAa~~,~~GAAG~~,~~CAAC,~~CAAA;~~AAEpC~~,~~IAAA~~,~~MAAM~~,~~EAAE~~,~~OAAA~~,~~EAAS~~,~~SAAU~~,~~EAAA,GAAI,OAAO,YAAY,CAAA~~;~~AAElD~~,~~IAAA,yBAAA,CAA0B,MAAM;AAC9B,~~MAAA,~~IAAI~~,~~aAAa~~,~~OAAS~~,EAAA;~~AACxB~~,~~QAAa~~,~~YAAA~~,~~CAAA~~,~~OAAA,CAAQ,~~MAAM,~~SAAY~~,~~GAAA~~,~~CAAA~~,~~YAAA~~,~~EACrC~~,~~UAAU~~,~~SAAW~~,~~EAAA,YAAY,IAAI,CACvC,~~GAAA,~~CAAA~~,~~QAAA~~,~~CAAA;AAAA;AACF,KACD,CAAA;AAED,~~IAAA,~~MAAM~~,~~SAAY~~,GAAA,~~WAAA;AAAA~~,~~MAChB~~,~~CAAC,KAAiB,KAAA;AAChB,QAAO,~~OAAA~~;AAAA~~,~~UACL~~,~~YAAY~~,~~QAAS~~,~~CAAA,KAAA,EAAO,EAAE,~~MAAA,~~EAAQ~~,~~GAAG~~,CAAA~~;AAAA~~,~~UACzC~~,~~KAAA;AAAA~~,~~UACA~~,~~YAAY~~,~~GAAI,~~CAAA,~~KAAA,EAAO,EAAE,MAAA,EAAQ,GAAG~~;~~AAAA~~,~~SACtC~~;AAAA~~,OACF~~;~~AAAA~~,~~MACA~~,~~CAAC~~,~~YAAY~~,~~QAAQ;AAAA~~,~~KACvB~~;~~AAEA~~,~~IAAA~~,~~MAAM~~,~~WAAiD~~,~~GAAA~~,~~WAAA~~;AAAA,~~MACrD~~,CAAC,~~KAAU,KAAA;AACT,QAAA,kBAAA,CAAmB,IAAI,~~CAAA;~~AACvB~~,~~QAAU~~,~~OAAA~~,IAAA,IAAA,GAAA,~~KAAA~~,~~CAAA,~~GAAA,~~OAAA~~,CAAA,KAAA,CAAA;AAAA,~~OACZ~~;~~AAAA~~,~~MACA~~,~~CAAC~~,~~oBAAoB,OAAO~~;AAAA,~~KAC9B~~;~~AAEA~~,~~IAAA,MAAM,UAAgD,GAAA,WAAA~~;AAAA,~~MACpD~~,~~CAAC,KAAU,KAAA~~;~~AACT~~,~~QAAA~~,~~kBAAA~~,~~CAAmB~~,~~KAAK,~~CAAA;~~AACxB~~,~~QAAS~~,~~MAAA~~,~~IAAA~~,~~IAAA~~,~~GAAA~~,~~KAAA~~,~~CAAA~~,~~GAAA,MAAA,CAAA,KAAA,CAAA~~;AAAA,~~OACX;AAAA~~,~~MACA~~,~~CAAC,oBAAoB,MAAM~~;AAAA,~~KAC7B;AAEA~~,~~IAAM~~,~~MAAA~~,~~MAAA~~,~~GAAS~~,~~QAAQ~~,~~MAAM;AAC3B~~,MAAA,~~OAAO~~,~~UAAU~~,~~YAAY~~,~~CAAA;AAAA~~,~~OAC5B~~,~~CAAC~~,~~WAAA~~,~~CAAY~~,~~MAAO~~,~~CAAA~~,~~YAAY~~,~~CAAC~~,~~CAAC,~~CAAA~~;AAErC~~,~~IACE,uBAAA,~~GAAA~~;AAAA~~,~~MAAC~~,~~KAAA;AAAA~~,~~MAAA~~;AAAA,~~QACC~~,~~WAAW~~,~~YAAa,~~EAAA;AAAA,~~QACxB~~,~~QAAU,EAAA,~~CAAA~~,CAAA~~;~~AAAA~~,~~QACV~~,~~KAAO~~,~~EAAA~~;AAAA,~~UACL~~,~~SAAW,EAAA,~~QAAA;AAAA,~~UACX~~,~~QAAU~~,EAAA;AAAA,~~SACZ;AAAA~~,~~QACA~~,~~GAAA;AAAA~~,~~QAEA~~,~~QAAA~~,~~kBAAA,~~GAAA;AAAA,~~UAAC~~,~~KAAA~~;AAAA,~~UAAA~~;AAAA,~~YACC~~,~~SAAA~~,~~EAAW,aAAa,MAAM,CAAA~~;AAAA,~~YAC9B~~,~~GAAK~~,EAAA~~,YAAA~~;AAAA~~,YACL,MAAQ,EAAA,UAAA~~;AAAA,~~YACR~~,~~OAAS~~,~~EAAA,WAAA;AAAA,YACR,GAAG,~~IAAA;AAAA,~~YAEH~~,~~QAAO,EAAA,MAAA,CAAA,~~GAAA,~~CAAI,~~CAAC,~~IAAA~~,~~EAAM~~,~~KACjB~~,~~qBAAA~~,~~GAAA;AAAA~~,~~cAAC~~,~~KAAA~~;AAAA,~~cAAA~~;AAAA,~~gBAEC~~,~~SAAA,EAAW,aAAa,OAAO,CAAA~~;AAAA,~~gBAC/B,KAAO,EAAA~~;AAAA,~~kBACL~~,~~WAAW,CAAc,WAAA,EAAA,SAAA,CAAU,~~IAAM,EAAA,~~SAAS,IAAI,CAAI,GAAA,CAAA,EAAA~~;AAAA,~~iBAC5D~~;AAAA,~~gBACA,~~aAAA~~,EAAa,KAAU,KAAA,CAAA,GAAI,MAAS,GAAA,KAAA,CAAA~~;AAAA,~~gBAEpC~~,~~8BAAC~~,~~aAAe~~,EAAA,~~EAAA~~,~~GAAG~~,~~qBAAsB~~,CAAA,~~IAAI~~,~~GAAG~~,~~IAAY~~,~~EAAA;AAAA~~,~~eAAA~~;AAAA,~~cAPvD,WAAA,CAAY,MAAO,CAAA,IAAA,EAAM,MAAM~~;AAAA,~~aASvC~~;AAAA;AAAA~~;AACH;AAAA~~,~~KACF~~;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"CalendarGrid.js","sources":["../src/calendar/CalendarGrid.tsx"],"sourcesContent":["import {\n GridItem,\n GridLayout,\n type ResponsiveProp,\n useForkRef,\n} from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n useRef,\n} from \"react\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport type { CalendarDayProps } from \"./internal/CalendarDay\";\nimport { CalendarMonth } from \"./internal/CalendarMonth\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n CalendarMonthHeader,\n type CalendarMonthHeaderProps,\n} from \"./CalendarMonthHeader\";\nimport {\n CalendarWeekHeader,\n type CalendarWeekHeaderProps,\n} from \"./CalendarWeekHeader\";\n\n/*\n Props for the CalendarGrid component.\n * @template TDate - The type of the date object.\n /\nexport interface CalendarGridProps<TDate extends DateFrameworkType>\n extends ComponentPropsWithoutRef<\"div\"> {\n /\n Number of columns\n /\n columns?: ResponsiveProp<number \| string>;\n /\n Props for `CalendarWeekHeader`\n /\n CalendarWeekHeaderProps?: Partial<CalendarWeekHeaderProps>;\n /\n Props for `CalendarMonthHeader`\n /\n CalendarMonthHeaderProps?: Partial<CalendarMonthHeaderProps<TDate>>;\n /\n Props for `CalendarDay`\n */\n CalendarDayProps?: Partial<CalendarDayProps<TDate>>;\n}\n\nexport const CalendarGrid = forwardRef<\n HTMLDivElement,\n CalendarGridProps<DateFrameworkType>\n>(\n <TDate extends DateFrameworkType>(\n props: CalendarGridProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const {\n CalendarDayProps,\n CalendarWeekHeaderProps,\n CalendarMonthHeaderProps,\n columns = 1,\n onBlur,\n ...rest\n } = props;\n\n const { dateAdapter } = useLocalization<TDate>();\n\n const {\n helpers: { setFocusedDate, setHoveredDate },\n state: { visibleMonth, numberOfVisibleMonths = 1 },\n } = useCalendarContext<TDate>();\n const calendarGridRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, calendarGridRef);\n\n const handleCalendarGridBlur: FocusEventHandler<HTMLDivElement> = (\n event,\n ) => {\n event.stopPropagation();\n setTimeout(() => {\n if (calendarGridRef?.current?.contains(document.activeElement)) {\n return;\n }\n setFocusedDate(event, null);\n setHoveredDate(event, null);\n }, 0);\n onBlur?.(event);\n };\n\n return (\n <GridLayout\n columns={columns}\n gap={1}\n ref={containerRef}\n onBlur={handleCalendarGridBlur}\n {...rest}\n >\n {Array.from({ length: numberOfVisibleMonths }, (_value, index) => {\n const gridItemVisibleMonth: TDate = dateAdapter.add(visibleMonth, {\n months: index,\n });\n return (\n <GridItem\n key={`calendar-grid-item-${dateAdapter.format(gridItemVisibleMonth, \"MMMM YYYY\")}`}\n >\n {numberOfVisibleMonths > 1 ? (\n <CalendarMonthHeader\n {...CalendarMonthHeaderProps}\n month={gridItemVisibleMonth}\n />\n ) : null}\n <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n <CalendarMonth\n date={gridItemVisibleMonth}\n CalendarDayProps={CalendarDayProps}\n />\n </GridItem>\n );\n })}\n </GridLayout>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;AAmDO,MAAM,YAAe,GAAA,UAAA;AAAA,EAI1B,CACE,OACA,GACG,KAAA;AACH,IAAM,MAAA;AAAA,MACJ,gBAAA;AAAA,MACA,uBAAA;AAAA,MACA,wBAAA;AAAA,MACA,OAAU,GAAA,CAAA;AAAA,MACV,MAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAE/C,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAA,EAAgB,cAAe,EAAA;AAAA,MAC1C,KAAO,EAAA,EAAE,YAAc,EAAA,qBAAA,GAAwB,CAAE;AAAA,QAC/C,kBAA0B,EAAA;AAC9B,IAAM,MAAA,eAAA,GAAkB,OAAuB,IAAI,CAAA;AACnD,IAAM,MAAA,YAAA,GAAe,UAAW,CAAA,GAAA,EAAK,eAAe,CAAA;AAEpD,IAAM,MAAA,sBAAA,GAA4D,CAChE,KACG,KAAA;AACH,MAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,MAAA,UAAA,CAAW,MAAM;AAjFvB,QAAA,IAAA,EAAA;AAkFQ,QAAA,IAAA,CAAI,EAAiB,GAAA,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAA,OAAA,KAAjB,IAA0B,GAAA,MAAA,GAAA,EAAA,CAAA,QAAA,CAAS,SAAS,aAAgB,CAAA,EAAA;AAC9D,UAAA;AAAA;AAEF,QAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,QAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,SACzB,CAAC,CAAA;AACJ,MAAS,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,KACX;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,GAAK,EAAA,CAAA;AAAA,QACL,GAAK,EAAA,YAAA;AAAA,QACL,MAAQ,EAAA,sBAAA;AAAA,QACP,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,uBAAyB,EAAA,CAAC,QAAQ,KAAU,KAAA;AAChE,UAAM,MAAA,oBAAA,GAA8B,WAAY,CAAA,GAAA,CAAI,YAAc,EAAA;AAAA,YAChE,MAAQ,EAAA;AAAA,WACT,CAAA;AACD,UACE,uBAAA,IAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cAGE,QAAA,EAAA;AAAA,gBAAA,qBAAA,GAAwB,CACvB,mBAAA,GAAA;AAAA,kBAAC,mBAAA;AAAA,kBAAA;AAAA,oBACE,GAAG,wBAAA;AAAA,oBACJ,KAAO,EAAA;AAAA;AAAA,iBAEP,GAAA,IAAA;AAAA,gCACJ,GAAA,CAAC,kBAAoB,EAAA,EAAA,GAAG,uBAAyB,EAAA,CAAA;AAAA,gCACjD,GAAA;AAAA,kBAAC,aAAA;AAAA,kBAAA;AAAA,oBACC,IAAM,EAAA,oBAAA;AAAA,oBACN;AAAA;AAAA;AACF;AAAA,aAAA;AAAA,YAZK,CAAsB,mBAAA,EAAA,WAAA,CAAY,MAAO,CAAA,oBAAA,EAAsB,WAAW,CAAC,CAAA;AAAA,WAalF;AAAA,SAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/calendar/CalendarMonthHeader.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+var css_248z = ".saltCalendarMonthHeader {\n  width: 100%;\n  text-align: center;\n}\n";
+export { css_248z as default };
+//# sourceMappingURL=CalendarMonthHeader.css.js.map

package/dist-es/calendar/CalendarMonthHeader.css.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"CalendarMonthHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/calendar/CalendarMonthHeader.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import css_248z from './CalendarMonthHeader.css.js';
+const withBaseName = makePrefixer("saltCalendarMonthHeader");
+const CalendarMonthHeader = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      format: formatMonthProp = "MMMM",
+      month,
+      ...rest
+    } = props;
+    const { dateAdapter } = useLocalization();
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-calendar-month-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    const formatMonth = useCallback(
+      (date) => {
+        return dateAdapter.format(date, formatMonthProp);
+      },
+      [dateAdapter, formatMonthProp]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "CalendarMonthHeader",
+        className: clsx(withBaseName(), className),
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("small", { children: formatMonth(month) }) })
+      }
+    );
+  }
+);
+export { CalendarMonthHeader };
+//# sourceMappingURL=CalendarMonthHeader.js.map

package/dist-es/calendar/CalendarMonthHeader.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CalendarMonthHeader.js","sources":["../src/calendar/CalendarMonthHeader.tsx"],"sourcesContent":["import { Text, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef, useCallback } from \"react\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarMonthHeaderCss from \"./CalendarMonthHeader.css\";\n\n/**\n * Props for the CalendarMonthHeader component.\n * @template TDate - The type of the date object.\n */\nexport interface CalendarMonthHeaderProps<TDate extends DateFrameworkType>\n extends ComponentPropsWithRef<\"div\"> {\n /**\n * Month value\n */\n month: TDate;\n /**\n * Format the month value\n * @param date\n */\n format?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonthHeader\");\n\nexport const CalendarMonthHeader = forwardRef<\n HTMLDivElement,\n CalendarMonthHeaderProps<DateFrameworkType>\n>(\n <TDate extends DateFrameworkType>(\n props: CalendarMonthHeaderProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const {\n className,\n format: formatMonthProp = \"MMMM\",\n month,\n ...rest\n } = props;\n const { dateAdapter } = useLocalization<TDate>();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-month-header\",\n css: calendarMonthHeaderCss,\n window: targetWindow,\n });\n\n const formatMonth = useCallback(\n (date?: TDate) => {\n return dateAdapter.format(date, formatMonthProp);\n },\n [dateAdapter, formatMonthProp],\n );\n\n return (\n <div\n data-testid=\"CalendarMonthHeader\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n >\n <Text>\n <small>{formatMonth(month)}</small>\n </Text>\n </div>\n );\n },\n);\n"],"names":["calendarMonthHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAEpD,MAAM,mBAAsB,GAAA,UAAA;AAAA,EAIjC,CACE,OACA,GACG,KAAA;AACH,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,QAAQ,eAAkB,GAAA,MAAA;AAAA,MAC1B,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAE/C,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,4BAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,WAAA;AAAA,MAClB,CAAC,IAAiB,KAAA;AAChB,QAAO,OAAA,WAAA,CAAY,MAAO,CAAA,IAAA,EAAM,eAAe,CAAA;AAAA,OACjD;AAAA,MACA,CAAC,aAAa,eAAe;AAAA,KAC/B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,qBAAA;AAAA,QACZ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,8BAAC,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAO,QAAY,EAAA,WAAA,CAAA,KAAK,GAAE,CAC7B,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}