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

package/dist-cjs/button-bar/ButtonBar.js.map

@@ -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":["makePrefixer","forwardRef","ButtonBar","useWindow","useComponentCssInjection","buttonBarCss","useDescendants","Children","useMemo","jsx","ButtonBarContext","DescendantProvider","clsx"],"mappings":"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"}
+{"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":["makePrefixer","forwardRef","ButtonBar","useWindow","useComponentCssInjection","buttonBarCss","useDescendants","Children","useMemo","jsx","ButtonBarContext","DescendantProvider","clsx"],"mappings":"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"}

package/dist-cjs/button-bar/OrderedButton.js.map

@@ -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":["makePrefixer","forwardRef","OrderedButton","useWindow","useComponentCssInjection","orderedButtonCss","useDescendant","useContext","ButtonBarContext","jsx","Button","clsx","capitalize"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,QAAQC,2BAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP;AAAA,KACF,GAAIC,iBAAWC,iCAAgB,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,KAAA,CAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA;AAE3B,IACE,uBAAAC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,CAAQ,KAAA,EAAA,KAAA,GAAQC,eAAW,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;;;;"}
+{"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":["makePrefixer","forwardRef","OrderedButton","useWindow","useComponentCssInjection","orderedButtonCss","useDescendant","useContext","ButtonBarContext","jsx","Button","clsx","capitalize"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,QAAQC,2BAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP;AAAA,KACF,GAAIC,iBAAWC,iCAAgB,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,MAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA;AAE3B,IACE,uBAAAC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,CAAQ,KAAA,EAAA,KAAA,GAAQC,eAAW,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-cjs/button-bar/internal/useDescendant.js.map

@@ -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":["useContext","DescendantContext","useRef","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAIA,iBAAWC,mCAAiB,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQC,aAAO,CAAE,CAAA,CAAA;AAEvB,EAAAC,8BAAA,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;;;;"}
+{"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":["useContext","DescendantContext","useRef","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAIA,iBAAWC,mCAAiB,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQC,aAAO,EAAE,CAAA;AAEvB,EAAAC,8BAAA,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-cjs/calendar/Calendar.js

@@ -28,20 +28,34 @@ const Calendar = react.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;
@@ -50,6 +64,7 @@ const Calendar = react.forwardRef(
     } else {
       rest = propsRest;
     }
+    const defaultFocusedDateRef = react.useRef(null);
     const useCalendarProps = {
       selectedDate,
       defaultSelectedDate,
@@ -57,25 +72,25 @@ const Calendar = react.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.useCalendar(useCalendarProps);
-    const calendarLabel = dateAdapter.format(
-      state.visibleMonth,
-      "MMMM YYYY",
-      locale
-    );
+    const calendarLabel = dateAdapter.format(state.visibleMonth, "MMMM YYYY");
     return /* @__PURE__ */ jsxRuntime.jsx(
       CalendarContext.CalendarContext.Provider,
       {

package/dist-cjs/calendar/Calendar.js.map

@@ -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":["makePrefixer","forwardRef","useWindow","useLocalization","useComponentCssInjection","calendarCss","useCalendar","jsx","CalendarContext","clsx"],"mappings":";;;;;;;;;;;;;AAkGA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,CACE,OACA,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,oCAAuB,EAAA;AAC/C,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;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,GAAIC,wBAAmB,gBAAgB,CAAA;AAC9D,IAAA,MAAM,gBAAgB,WAAY,CAAA,MAAA;AAAA,MAChC,KAAM,CAAA,YAAA;AAAA,MACN,WAAA;AAAA,MACA;AAAA,KACF;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,+BAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAE,SAAA,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;;;;"}
+{"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":["makePrefixer","forwardRef","useWindow","useLocalization","useComponentCssInjection","calendarCss","useRef","useCalendar","jsx","CalendarContext","clsx"],"mappings":"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"}

package/dist-cjs/calendar/CalendarGrid.js

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

package/dist-cjs/calendar/CalendarGrid.js.map

@@ -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":["makePrefixer","forwardRef","useLocalization","useWindow","useComponentCssInjection","calendarGridCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useCallback","useMemo","jsx","CalendarMonth"],"mappings":";;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;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,GAAIC,oCAAuB,EAAA;AAE/C,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;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,QAC5BC,kCAA0B,EAAA;AAC9B,IAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,YAAY,CAAC,CAAA,EAAU,MAC3BC,eAAiB,CAAA,WAAA,EAAa,GAAG,CAAC,CAAA;AAEpC,IAAA,MAAM,EAAE,OAAA,EAAS,SAAU,EAAA,GAAID,aAAO,YAAY,CAAA;AAElD,IAAAE,8BAAA,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,GAAAC,iBAAA;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,GAAAA,iBAAA;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,GAAAA,iBAAA;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,GAASC,cAAQ,MAAM;AAC3B,MAAA,OAAO,UAAU,YAAY,CAAA;AAAA,OAC5B,CAAC,WAAA,CAAY,MAAO,CAAA,YAAY,CAAC,CAAC,CAAA;AAErC,IACE,uBAAAC,cAAA;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,kBAAAA,cAAA;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,qBAAAA,cAAA;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,yCAACC,2BAAe,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;;;;"}
+{"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":["forwardRef","useLocalization","useCalendarContext","useRef","useForkRef","jsx","GridLayout","jsxs","GridItem","CalendarMonthHeader","CalendarWeekHeader","CalendarMonth"],"mappings":";;;;;;;;;;;AAmDO,MAAM,YAAe,GAAAA,gBAAA;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,GAAIC,oCAAuB,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/CC,kCAA0B,EAAA;AAC9B,IAAM,MAAA,eAAA,GAAkBC,aAAuB,IAAI,CAAA;AACnD,IAAM,MAAA,YAAA,GAAeC,eAAW,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,uBAAAC,cAAA;AAAA,MAACC,eAAA;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,uBAAAC,eAAA;AAAA,YAACC,aAAA;AAAA,YAAA;AAAA,cAGE,QAAA,EAAA;AAAA,gBAAA,qBAAA,GAAwB,CACvB,mBAAAH,cAAA;AAAA,kBAACI,uCAAA;AAAA,kBAAA;AAAA,oBACE,GAAG,wBAAA;AAAA,oBACJ,KAAO,EAAA;AAAA;AAAA,iBAEP,GAAA,IAAA;AAAA,gCACJJ,cAAA,CAACK,qCAAoB,EAAA,EAAA,GAAG,uBAAyB,EAAA,CAAA;AAAA,gCACjDL,cAAA;AAAA,kBAACM,2BAAA;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-cjs/calendar/CalendarMonthHeader.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCalendarMonthHeader {\n  width: 100%;\n  text-align: center;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CalendarMonthHeader.css.js.map

package/dist-cjs/calendar/CalendarMonthHeader.css.js.map

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

package/dist-cjs/calendar/CalendarMonthHeader.js

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

package/dist-cjs/calendar/CalendarMonthHeader.js.map

@@ -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":["makePrefixer","forwardRef","useLocalization","useWindow","useComponentCssInjection","calendarMonthHeaderCss","useCallback","jsx","clsx","Text"],"mappings":";;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA;AAEpD,MAAM,mBAAsB,GAAAC,gBAAA;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,GAAIC,oCAAuB,EAAA;AAE/C,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,4BAAA;AAAA,MACR,GAAK,EAAAC,qBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAc,GAAAC,iBAAA;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,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,qBAAA;AAAA,QACZ,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,yCAACC,SACC,EAAA,EAAA,QAAA,kBAAAF,cAAA,CAAC,WAAO,QAAY,EAAA,WAAA,CAAA,KAAK,GAAE,CAC7B,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}