@clickhouse/click-ui 0.1.0-rc.69 → 0.1.0-rc.70

package/dist/cjs/components/ButtonGroup/ButtonGroup.cjs

@@ -3,23 +3,58 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
 const styledComponents = require('styled-components');
 
+const normalizeToSet = (value) => {
+  if (value === void 0) {
+    return /* @__PURE__ */ new Set();
+  }
+  if (value instanceof Set) {
+    return new Set(value);
+  }
+  return /* @__PURE__ */ new Set([value]);
+};
+const isValueSelected = (value, selection) => {
+  return selection.has(value);
+};
 const ButtonGroup = ({
   options,
   selected,
+  defaultSelected,
   fillWidth = false,
   onClick,
   type = "default",
+  multiple = false,
   ...props
 }) => {
+  const [internalSelection, setInternalSelection] = react.useState(() => normalizeToSet(defaultSelected));
+  const isControlled = selected !== void 0;
+  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;
+  const onButtonGroupClickCommonHandler = react.useCallback((value) => {
+    let newSelection;
+    if (multiple) {
+      newSelection = new Set(currentSelection);
+      if (newSelection.has(value)) {
+        newSelection.delete(value);
+      } else {
+        newSelection.add(value);
+      }
+    } else {
+      newSelection = /* @__PURE__ */ new Set([value]);
+    }
+    if (!isControlled) {
+      setInternalSelection(newSelection);
+    }
+    onClick?.(value, multiple ? newSelection : value);
+  }, [currentSelection, multiple, isControlled, onClick]);
   const buttons = options.map(({
     value,
     label,
-    ...props2
+    ...buttonProps
   }) => {
-    const isActive = value === selected;
-    return /* @__PURE__ */ jsxRuntime.jsx(Button, { $active: isActive, "aria-pressed": isActive, $fillWidth: fillWidth, $type: type, onClick: () => onClick?.(value), role: "button", ...props2, children: label }, value);
+    const isActive = isValueSelected(value, currentSelection);
+    return /* @__PURE__ */ jsxRuntime.jsx(Button, { $active: isActive, "aria-pressed": isActive, $fillWidth: fillWidth, $type: type, onClick: () => onButtonGroupClickCommonHandler(value), role: "button", ...buttonProps, children: label }, value);
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: buttons });
 };
@@ -43,7 +78,7 @@ const ButtonGroupWrapper = styledComponents.styled.div.withConfig({
 }) => $fillWidth ? "100%" : "auto");
 const Button = styledComponents.styled.button.withConfig({
   componentId: "sc-ukgugp-1"
-})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&[aria-pressed='true']{background:", ";font:", ";color:", ";}&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ";&:active,&:focus,&[aria-pressed='true']{color:", ";}}&:active,&:focus,&[aria-pressed='true']{background:", ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
+})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&[aria-pressed='true']{background:", ";font:", ";color:", ";}&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ";&:active,&:focus,&[aria-pressed='true']{color:", ";}}&[aria-pressed='true']{background:", ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
   $active,
   theme
 }) => $active ? theme.click.button.group.color.background.active : theme.click.button.group.color.background.default, ({

package/dist/cjs/components/ButtonGroup/ButtonGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.cjs","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport { styled } from 'styled-components';\n\ntype ButtonGroupType = 'default' | 'borderless';\n\nexport interface ButtonGroupElementProps extends Omit<\n  HTMLAttributes<HTMLButtonElement>,\n  'children'\n> {\n  /** The unique value for this button */\n  value: string;\n  /** The label text to display */\n  label?: ReactNode;\n}\n\nexport interface ButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onClick'\n> {\n  /** Array of button options to display */\n  options: Array<ButtonGroupElementProps>;\n  /** The currently selected button value */\n  selected?: string;\n  /** Callback when a button is clicked */\n  onClick?: (value: string) => void;\n  /** Whether the button group should fill the full width */\n  fillWidth?: boolean;\n  /** The style type of the button group */\n  type?: ButtonGroupType;\n}\n\nexport const ButtonGroup = ({\n  options,\n  selected,\n  fillWidth = false,\n  onClick,\n  type = 'default',\n  ...props\n}: ButtonGroupProps) => {\n  const buttons = options.map(({ value, label, ...props }) => {\n    const isActive = value === selected;\n    return (\n      <Button\n        key={value}\n        $active={isActive}\n        aria-pressed={isActive}\n        $fillWidth={fillWidth}\n        $type={type}\n        onClick={() => onClick?.(value)}\n        role=\"button\"\n        {...props}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <ButtonGroupWrapper\n      $fillWidth={fillWidth}\n      $type={type}\n      {...props}\n    >\n      {buttons}\n    </ButtonGroupWrapper>\n  );\n};\n\nconst ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};\n  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};\n  border: ${({ theme, $type }) =>\n    $type === 'default'\n      ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`\n      : 'none'};\n  background: ${({ theme }) => theme.click.button.group.color.background.panel};\n  border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};\n  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};\n`;\n\nconst Button = styled.button<{\n  $active: boolean;\n  $fillWidth: boolean;\n  $type: ButtonGroupType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: ${({ $active, theme }) =>\n    $active\n      ? theme.click.button.group.color.background.active\n      : theme.click.button.group.color.background.default};\n  color: ${({ theme }) => theme.click.button.group.color.text.default};\n  font: ${({ theme }) => theme.click.button.group.typography.label.default};\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};\n  ${({ $fillWidth }) => ($fillWidth ? 'flex: 1;' : '')};\n  border-radius: ${({ theme, $type }) =>\n    theme.click.button.group.radii.button[$type].all};\n  cursor: pointer;\n  border: none;\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n  }\n\n  &:hover {\n    background: ${({ theme }) => theme.click.button.group.color.background.hover};\n    font: ${({ theme }) => theme.click.button.group.typography.label.hover};\n    color: ${({ theme }) => theme.click.button.group.color.text.hover};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    font: ${({ theme }) => theme.click.button.group.typography.label.disabled};\n    color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    background: ${({ theme, $active }) =>\n      theme.click.button.group.color.background[\n        $active ? 'disabled-active' : 'disabled'\n      ]};\n\n    &:active,\n    &:focus,\n    &[aria-pressed='true'] {\n      color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    }\n  }\n\n  &:active,\n  &:focus,\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n    &:disabled {\n      background: ${({ theme }) =>\n        theme.click.button.group.color.background['disabled-active']};\n    }\n  }\n`;\n"],"names":["ButtonGroup","options","selected","fillWidth","onClick","type","props","buttons","map","value","label","isActive","jsx","ButtonGroupWrapper","styled","div","withConfig","componentId","theme","$type","click","button","group","space","panel","x","y","gap","color","stroke","background","radii","all","$fillWidth","Button","$active","active","default","text","typography","hover","disabled"],"mappings":"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"}
+{"version":3,"file":"ButtonGroup.cjs","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useCallback, useState } from 'react';\nimport { styled } from 'styled-components';\n\ntype ButtonGroupType = 'default' | 'borderless';\nexport type SelectionValue = string | Set<string>;\n\nexport interface ButtonGroupElementProps extends Omit<\n  HTMLAttributes<HTMLButtonElement>,\n  'children'\n> {\n  value: string;\n  label?: ReactNode;\n}\n\nexport interface ButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onClick'\n> {\n  options: Array<ButtonGroupElementProps>;\n  selected?: SelectionValue;\n  defaultSelected?: SelectionValue;\n  onClick?: (value: string, selected: SelectionValue) => void;\n  fillWidth?: boolean;\n  type?: ButtonGroupType;\n  multiple?: boolean;\n}\n\nconst normalizeToSet = (value: SelectionValue | undefined): Set<string> => {\n  if (value === undefined) {\n    return new Set();\n  }\n  if (value instanceof Set) {\n    return new Set(value);\n  }\n  return new Set([value]);\n};\n\nconst isValueSelected = (value: string, selection: Set<string>): boolean => {\n  return selection.has(value);\n};\n\nexport const ButtonGroup = ({\n  options,\n  selected,\n  defaultSelected,\n  fillWidth = false,\n  onClick,\n  type = 'default',\n  multiple = false,\n  ...props\n}: ButtonGroupProps) => {\n  const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>\n    normalizeToSet(defaultSelected)\n  );\n\n  // Use `selected` if the parent needs to own\n  // or sync the selection state management (controlled\n  // by consumer app)\n  // Use `defaultSelected` if the component can manage\n  // its own state independently (uncontrolled)\n  const isControlled = selected !== undefined;\n  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;\n\n  const onButtonGroupClickCommonHandler = useCallback(\n    (value: string) => {\n      let newSelection: Set<string>;\n\n      if (multiple) {\n        newSelection = new Set(currentSelection);\n        if (newSelection.has(value)) {\n          newSelection.delete(value);\n        } else {\n          newSelection.add(value);\n        }\n      } else {\n        newSelection = new Set([value]);\n      }\n\n      if (!isControlled) {\n        setInternalSelection(newSelection);\n      }\n\n      // WARN: Single mode returns string\n      // while multiple mode returns Set (DS)\n      onClick?.(value, multiple ? newSelection : value);\n    },\n    [currentSelection, multiple, isControlled, onClick]\n  );\n\n  const buttons = options.map(({ value, label, ...buttonProps }) => {\n    const isActive = isValueSelected(value, currentSelection);\n\n    return (\n      <Button\n        key={value}\n        $active={isActive}\n        aria-pressed={isActive}\n        $fillWidth={fillWidth}\n        $type={type}\n        onClick={() => onButtonGroupClickCommonHandler(value)}\n        role=\"button\"\n        {...buttonProps}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <ButtonGroupWrapper\n      $fillWidth={fillWidth}\n      $type={type}\n      {...props}\n    >\n      {buttons}\n    </ButtonGroupWrapper>\n  );\n};\n\nconst ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};\n  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};\n  border: ${({ theme, $type }) =>\n    $type === 'default'\n      ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`\n      : 'none'};\n  background: ${({ theme }) => theme.click.button.group.color.background.panel};\n  border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};\n  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};\n`;\n\nconst Button = styled.button<{\n  $active: boolean;\n  $fillWidth: boolean;\n  $type: ButtonGroupType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: ${({ $active, theme }) =>\n    $active\n      ? theme.click.button.group.color.background.active\n      : theme.click.button.group.color.background.default};\n  color: ${({ theme }) => theme.click.button.group.color.text.default};\n  font: ${({ theme }) => theme.click.button.group.typography.label.default};\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};\n  ${({ $fillWidth }) => ($fillWidth ? 'flex: 1;' : '')};\n  border-radius: ${({ theme, $type }) =>\n    theme.click.button.group.radii.button[$type].all};\n  cursor: pointer;\n  border: none;\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n  }\n\n  &:hover {\n    background: ${({ theme }) => theme.click.button.group.color.background.hover};\n    font: ${({ theme }) => theme.click.button.group.typography.label.hover};\n    color: ${({ theme }) => theme.click.button.group.color.text.hover};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    font: ${({ theme }) => theme.click.button.group.typography.label.disabled};\n    color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    background: ${({ theme, $active }) =>\n      theme.click.button.group.color.background[\n        $active ? 'disabled-active' : 'disabled'\n      ]};\n\n    &:active,\n    &:focus,\n    &[aria-pressed='true'] {\n      color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    }\n  }\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n    &:disabled {\n      background: ${({ theme }) =>\n        theme.click.button.group.color.background['disabled-active']};\n    }\n  }\n`;\n"],"names":["normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","options","selected","defaultSelected","fillWidth","onClick","type","multiple","props","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","buttonProps","isActive","jsx","ButtonGroupWrapper","styled","div","withConfig","componentId","theme","$type","click","button","group","space","panel","x","y","gap","color","stroke","background","radii","all","$fillWidth","Button","$active","active","default","text","typography","hover","disabled"],"mappings":"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"}

package/dist/cjs/components/DatePicker/Common.cjs

@@ -12,8 +12,21 @@ const calendar = require('@h6s/calendar');
 const IconButton = require('../IconButton/IconButton.cjs');
 const Text = require('../Typography/Text/Text.cjs');
 const utils = require('./utils.cjs');
+const date = require('../../utils/date.cjs');
 
 const explicitWidth = "250px";
+const TXT_ON_MONTH_SELECT = "Month";
+const TXT_ON_YEAR_SELECT = "Year";
+const VIEW_GRID_MONTHS = {
+  columns: 4,
+  rows: 3
+};
+const VIEW_GRID_YEARS = {
+  columns: 3,
+  rows: 3
+};
+const VIEW_TOTAL_YEARS = VIEW_GRID_YEARS.columns * VIEW_GRID_YEARS.rows;
+const VIEW_NAVIGATION_OFFSET_YEARS = Math.floor(VIEW_TOTAL_YEARS / 2);
 const HighlightedInputWrapper = styledComponents.styled(InputWrapper.InputWrapper).withConfig({
   componentId: "sc-1m6g9rm-0"
 })(["", " width:", ";}"], ({
@@ -22,15 +35,30 @@ const HighlightedInputWrapper = styledComponents.styled(InputWrapper.InputWrappe
 }) => {
   return `border: ${theme.click.datePicker.dateOption.stroke} solid ${$isActive ? theme.click.datePicker.dateOption.color.stroke.active : theme.click.field.color.stroke.default};`;
 }, explicitWidth);
+const formatPartialDate = (selectedDate, partialYear, partialMonth) => {
+  if (typeof partialYear === "number" && typeof partialMonth === "number") {
+    const date = new Date(partialYear, partialMonth, 1);
+    return utils.headerDateFormatter.format(date);
+  }
+  if (typeof partialYear === "number") {
+    return String(partialYear);
+  }
+  if (selectedDate instanceof Date) {
+    return utils.selectedDateFormatter.format(selectedDate);
+  }
+  return "";
+};
 const DatePickerInput = ({
   isActive,
   disabled,
   id,
+  partialMonth,
+  partialYear,
   placeholder,
   selectedDate
 }) => {
   const defaultId = react.useId();
-  const formattedSelectedDate = selectedDate instanceof Date ? utils.selectedDateFormatter.format(selectedDate) : "";
+  const formattedSelectedDate = formatPartialDate(selectedDate, partialYear, partialMonth);
   return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
     /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "calendar" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
@@ -72,23 +100,72 @@ const DatePickerContainer = styledComponents.styled(Container.Container).withCon
 })(["background:", ";"], ({
   theme
 }) => theme.click.datePicker.dateOption.color.background.default);
-const UnselectableTitle = styledComponents.styled.h2.withConfig({
+const ClickableTitle = styledComponents.styled.button.withConfig({
   componentId: "sc-1m6g9rm-2"
-})(["", " user-select:none;"], ({
+})(["", " background:transparent;border:none;cursor:pointer;user-select:none;padding:0.25rem 0.5rem;border-radius:", ";&:hover{background:", ";}"], ({
+  theme
+}) => `
+    color: ${theme.click.datePicker.color.title.default};
+    font: ${theme.click.datePicker.typography.title.default};
+  `, ({
+  theme
+}) => theme.click.datePicker.dateOption.radii.default, ({
+  theme
+}) => theme.click.datePicker.dateOption.color.background.hover);
+const UnselectableTitle = styledComponents.styled.h2.withConfig({
+  componentId: "sc-1m6g9rm-3"
+})(["", " margin:0;padding:0;user-select:none;"], ({
   theme
 }) => `
     color: ${theme.click.datePicker.color.title.default};
     font: ${theme.click.datePicker.typography.title.default};
   `);
+const GridContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-1m6g9rm-4"
+})(["display:grid;padding:0.25rem 0 0;", ""], ({
+  theme
+}) => `
+    gap: calc(${theme.click.datePicker.space.gap} * 2);
+  `);
+const MonthsGrid = styledComponents.styled(GridContainer).withConfig({
+  componentId: "sc-1m6g9rm-5"
+})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], VIEW_GRID_MONTHS.columns, VIEW_GRID_MONTHS.rows);
+const YearsGrid = styledComponents.styled(GridContainer).withConfig({
+  componentId: "sc-1m6g9rm-6"
+})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], VIEW_GRID_YEARS.columns, VIEW_GRID_YEARS.rows);
+const GridCell = styledComponents.styled.div.withConfig({
+  componentId: "sc-1m6g9rm-7"
+})(["", " ", " ", " display:flex;align-items:center;justify-content:center;padding:8px 4px;cursor:pointer;text-align:center;min-height:26px;&:hover{", ",}"], ({
+  theme
+}) => `
+    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};
+    border-radius: ${theme.click.datePicker.dateOption.radii.default};
+    font: ${theme.click.datePicker.dateOption.typography.label.default};
+    color: ${theme.click.datePicker.dateOption.color.label.default};
+  `, ({
+  $isActive,
+  theme
+}) => $isActive && `
+    background: ${theme.click.datePicker.dateOption.color.background.active};
+    color: ${theme.click.datePicker.dateOption.color.label.active};
+  `, ({
+  $isActive,
+  $isPresent,
+  theme
+}) => $isPresent && !$isActive && `background: ${theme.click.datePicker.dateOption.color.background.range};`, ({
+  theme
+}) => `
+      border-color: ${theme.click.datePicker.dateOption.color.stroke.hover};
+    `);
 const DateTable = styledComponents.styled.table.withConfig({
-  componentId: "sc-1m6g9rm-3"
+  componentId: "sc-1m6g9rm-8"
 })(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
   theme
 }) => theme.typography.styles.product.text.normal.md, explicitWidth, ({
   theme
 }) => theme.click.datePicker.dateOption.size.height);
 const DateTableHeader = styledComponents.styled.th.withConfig({
-  componentId: "sc-1m6g9rm-4"
+  componentId: "sc-1m6g9rm-9"
 })(["", " width:14%;"], ({
   theme
 }) => `
@@ -96,8 +173,8 @@ const DateTableHeader = styledComponents.styled.th.withConfig({
     font: ${theme.click.datePicker.typography.daytitle.default};
   `);
 const DateTableCell = styledComponents.styled.td.withConfig({
-  componentId: "sc-1m6g9rm-5"
-})(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
+  componentId: "sc-1m6g9rm-10"
+})(["", " ", " ", " ", " text-align:center;&:hover{", ";}"], ({
   theme
 }) => `
     border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};
@@ -117,18 +194,39 @@ const DateTableCell = styledComponents.styled.td.withConfig({
       background: ${theme.click.datePicker.dateOption.color.background.active};
       color: ${theme.click.datePicker.dateOption.color.label.active};
     `, ({
-  $isToday,
+  $isSelected,
+  $isPresent,
   theme
-}) => $isToday && `font: ${theme.click.datePicker.dateOption.typography.label.active};`, ({
+}) => $isPresent && !$isSelected && `background: ${theme.click.datePicker.dateOption.color.background.range};`, ({
   $isDisabled,
+  $isPresent,
   theme
 }) => `border: ${theme.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme.click.datePicker.dateOption.color.stroke.disabled : theme.click.datePicker.dateOption.color.stroke.hover};
-
-
-    border-radius: ${theme.click.datePicker.dateOption.radii.default};`);
+      background: ${$isPresent ? theme.click.datePicker.dateOption.color.background.range : ""};
+      border-radius: ${theme.click.datePicker.dateOption.radii.default};`);
+const monthAbbreviations = date.getMonthNames("short");
+const EmptyDateSelectNav = styledComponents.styled(IconButton.IconButton).withConfig({
+  componentId: "sc-1m6g9rm-11"
+})(["visibility:hidden;pointer-events:none;"]);
+const DateSelectNav = ({
+  id,
+  icon,
+  onClick,
+  view,
+  size = "sm"
+}) => {
+  if (view === date.MONTHS) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyDateSelectNav, { icon, size, type: "ghost" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { "data-testid": id, icon, onClick, size, type: "ghost" });
+};
 const CalendarRenderer = ({
   calendarOptions = {},
   children,
+  allowYearMonthSelection = true,
+  onYearSelect,
+  onMonthSelect,
+  selectedDate,
   ...props
 }) => {
   const {
@@ -141,22 +239,81 @@ const CalendarRenderer = ({
     defaultWeekStart: 1,
     ...calendarOptions
   });
-  const handleNextClick = react.useCallback(() => {
-    navigation.toNext();
-  }, [navigation]);
-  const handlePreviousClick = react.useCallback(() => {
+  const [view, setView] = react.useState(date.DAYS);
+  const [selectedYear, setSelectedYear] = react.useState(null);
+  const [yearOffset, setYearOffset] = react.useState(0);
+  const onNextClick = react.useCallback(() => {
+    if (view === date.YEARS) {
+      setYearOffset((prev) => prev + VIEW_TOTAL_YEARS);
+    } else {
+      navigation.toNext();
+    }
+  }, [navigation, view]);
+  const onPreviousClick = react.useCallback(() => {
+    if (view === date.YEARS) {
+      setYearOffset((prev) => prev - VIEW_TOTAL_YEARS);
+      return;
+    }
     navigation.toPrev();
-  }, [navigation]);
+  }, [navigation, view]);
+  const onTitleClick = react.useCallback(() => {
+    if (view !== date.DAYS) {
+      return;
+    }
+    setView(date.YEARS);
+  }, [view]);
+  const onYearSelection = react.useCallback((yearValue) => {
+    setSelectedYear(yearValue);
+    setView(date.MONTHS);
+    onYearSelect?.(yearValue);
+  }, [onYearSelect]);
+  const onMonthSelection = react.useCallback((monthIndex) => {
+    const finalYear = typeof selectedYear === "number" ? selectedYear : year;
+    const newDate = new Date(finalYear, monthIndex, 1);
+    navigation.setDate(newDate);
+    onMonthSelect?.(finalYear, monthIndex);
+    setView(date.DAYS);
+    setSelectedYear(null);
+    setYearOffset(0);
+  }, [selectedYear, year, navigation, onMonthSelect]);
   const headerDate = /* @__PURE__ */ new Date();
   headerDate.setMonth(month);
   headerDate.setFullYear(year);
-  return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { "data-testid": "calendar-previous-month", icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
-      /* @__PURE__ */ jsxRuntime.jsx(UnselectableTitle, { children: utils.headerDateFormatter.format(headerDate) }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { "data-testid": "calendar-next-month", icon: "chevron-right", onClick: handleNextClick, size: "sm", type: "ghost" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DateTable, { children: [
+  const getHeaderTitle = (view2) => {
+    if (view2 === date.MONTHS) {
+      return TXT_ON_MONTH_SELECT;
+    }
+    if (view2 === date.YEARS) {
+      return TXT_ON_YEAR_SELECT;
+    }
+    return utils.headerDateFormatter.format(headerDate);
+  };
+  const renderMonthsGrid = () => {
+    const today = /* @__PURE__ */ new Date();
+    const todayMonth = today.getMonth();
+    const todayYear = today.getFullYear();
+    const selectedMonth = selectedDate?.getMonth();
+    const selectedYear2 = selectedDate?.getFullYear();
+    return /* @__PURE__ */ jsxRuntime.jsx(MonthsGrid, { "data-testid": "months-grid", children: monthAbbreviations.map((abbr, index) => /* @__PURE__ */ jsxRuntime.jsx(GridCell, { $isActive: selectedDate && index === selectedMonth && year === selectedYear2, $isPresent: index === todayMonth && year === todayYear, onClick: () => onMonthSelection(index), "data-testid": `month-cell-${index}`, children: abbr }, abbr)) });
+  };
+  const renderYearsGrid = () => {
+    const years = [];
+    const baseYear = year + yearOffset;
+    const todayYear = (/* @__PURE__ */ new Date()).getFullYear();
+    const selectedYear2 = selectedDate?.getFullYear();
+    for (let i = -VIEW_NAVIGATION_OFFSET_YEARS; i <= VIEW_NAVIGATION_OFFSET_YEARS; i++) {
+      years.push(baseYear + i);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(YearsGrid, { "data-testid": "years-grid", children: years.map((currYear) => /* @__PURE__ */ jsxRuntime.jsx(GridCell, { $isActive: selectedDate && currYear === selectedYear2, $isPresent: currYear === todayYear, onClick: () => onYearSelection(currYear), "data-testid": `year-cell-${currYear}`, children: currYear }, currYear)) });
+  };
+  const renderTableContent = () => {
+    if (view === date.MONTHS) {
+      return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: date.DAYS_IN_WEEK, children: renderMonthsGrid() }) }) });
+    }
+    if (view === date.YEARS) {
+      return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: date.DAYS_IN_WEEK, children: renderYearsGrid() }) }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.weekDays.map(({
         key,
         value: date
@@ -164,7 +321,15 @@ const CalendarRenderer = ({
         return /* @__PURE__ */ jsxRuntime.jsx(DateTableHeader, { children: utils.weekdayFormatter.format(date) }, key);
       }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: children(body) })
-    ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DateSelectNav, { id: "calendar-previous-month", icon: "chevron-left", onClick: onPreviousClick, view }),
+      view === date.DAYS && allowYearMonthSelection ? /* @__PURE__ */ jsxRuntime.jsx(ClickableTitle, { onClick: onTitleClick, "data-testid": "calendar-title", children: getHeaderTitle(view) }) : /* @__PURE__ */ jsxRuntime.jsx(UnselectableTitle, { children: getHeaderTitle(view) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DateSelectNav, { id: "calendar-next-month", icon: "chevron-right", onClick: onNextClick, view })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DateTable, { children: renderTableContent() })
   ] });
 };
 

package/dist/cjs/components/DatePicker/Common.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Common.cjs","sources":["../../../../src/components/DatePicker/Common.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { InputElement, InputStartContent, InputWrapper } from '../Input/InputWrapper';\nimport { ReactNode, useCallback, useId } from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { Container } from '../Container/Container';\nimport { useCalendar, UseCalendarOptions } from '@h6s/calendar';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Text } from '../Typography/Text/Text';\nimport { headerDateFormatter, selectedDateFormatter, weekdayFormatter } from './utils';\n\nconst explicitWidth = '250px';\n\nconst HighlightedInputWrapper = styled(InputWrapper)<{ $isActive: boolean }>`\n  ${({ $isActive, theme }) => {\n    return `border: ${theme.click.datePicker.dateOption.stroke} solid ${\n      $isActive\n        ? theme.click.datePicker.dateOption.color.stroke.active\n        : theme.click.field.color.stroke.default\n    };`;\n  }}\n\n  width: ${explicitWidth};\n}`;\n\ninterface DatePickerInputProps {\n  isActive: boolean;\n  disabled: boolean;\n  id?: string;\n  placeholder?: string;\n  selectedDate?: Date;\n}\n\nexport const DatePickerInput = ({\n  isActive,\n  disabled,\n  id,\n  placeholder,\n  selectedDate,\n}: DatePickerInputProps) => {\n  const defaultId = useId();\n  const formattedSelectedDate =\n    selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : '';\n\n  return (\n    <HighlightedInputWrapper\n      $isActive={isActive}\n      disabled={disabled}\n      id={id ?? defaultId}\n    >\n      <InputStartContent>\n        <Icon name=\"calendar\" />\n      </InputStartContent>\n      <InputElement\n        $hasStartContent\n        data-testid=\"datepicker-input\"\n        placeholder={placeholder}\n        readOnly\n        value={formattedSelectedDate}\n      />\n    </HighlightedInputWrapper>\n  );\n};\n\ninterface DateRangePickerInputProps {\n  isActive: boolean;\n  disabled: boolean;\n  id?: string;\n  placeholder?: string;\n  selectedEndDate?: Date;\n  selectedStartDate?: Date;\n}\n\nexport const DateRangePickerInput = ({\n  isActive,\n  disabled,\n  id,\n  placeholder,\n  selectedEndDate,\n  selectedStartDate,\n}: DateRangePickerInputProps) => {\n  const defaultId = useId();\n\n  let formattedValue = (\n    <Text\n      color=\"muted\"\n      component=\"span\"\n    >\n      {placeholder ?? ''}\n    </Text>\n  );\n  if (selectedStartDate) {\n    if (selectedEndDate) {\n      formattedValue = (\n        <span>\n          {selectedDateFormatter.format(selectedStartDate)} –{' '}\n          {selectedDateFormatter.format(selectedEndDate)}\n        </span>\n      );\n    } else {\n      formattedValue = (\n        <span>\n          {selectedDateFormatter.format(selectedStartDate)}{' '}\n          <Text\n            color=\"muted\"\n            component=\"span\"\n          >\n            – end date\n          </Text>\n        </span>\n      );\n    }\n  }\n\n  return (\n    <HighlightedInputWrapper\n      $isActive={isActive}\n      disabled={disabled}\n      id={id ?? defaultId}\n    >\n      <InputStartContent>\n        <Icon name=\"calendar\" />\n      </InputStartContent>\n      <InputElement\n        $hasStartContent\n        as=\"div\"\n        data-testid=\"daterangepicker-input\"\n      >\n        {formattedValue}\n      </InputElement>\n    </HighlightedInputWrapper>\n  );\n};\n\nconst DatePickerContainer = styled(Container)`\n  background: ${({ theme }) =>\n    theme.click.datePicker.dateOption.color.background.default};\n`;\n\nconst UnselectableTitle = styled.h2`\n  ${({ theme }) => `\n    color: ${theme.click.datePicker.color.title.default};\n    font: ${theme.click.datePicker.typography.title.default};\n  `}\n\n  user-select: none;\n`;\n\nconst DateTable = styled.table`\n  border-collapse: separate;\n  border-spacing: 0;\n  font: ${({ theme }) => theme.typography.styles.product.text.normal.md};\n  table-layout: fixed;\n  user-select: none;\n  width: ${explicitWidth};\n\n  thead tr {\n    height: ${({ theme }) => theme.click.datePicker.dateOption.size.height};\n  }\n\n  tbody {\n    cursor: pointer;\n  }\n\n  td,\n  th {\n    padding: 4px;\n  }\n`;\n\nconst DateTableHeader = styled.th`\n  ${({ theme }) => `\n    color: ${theme.click.datePicker.color.daytitle.default};\n    font: ${theme.click.datePicker.typography.daytitle.default};\n  `}\n\n  width: 14%;\n`;\n\nexport const DateTableCell = styled.td<{\n  $isCurrentMonth?: boolean;\n  $isDisabled?: boolean;\n  $isSelected?: boolean;\n  $isToday?: boolean;\n}>`\n  ${({ theme }) => `\n    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};\n    border-radius: ${theme.click.datePicker.dateOption.radii.default};\n    font: ${theme.click.datePicker.dateOption.typography.label.default};\n  `}\n\n  ${({ $isCurrentMonth, $isDisabled, theme }) =>\n    (!$isCurrentMonth || $isDisabled) &&\n    `\n    color: ${theme.click.datePicker.dateOption.color.label.disabled};\n    font: ${theme.click.datePicker.dateOption.typography.label.disabled};\n  `}\n\n  ${({ $isSelected, theme }) =>\n    $isSelected &&\n    `\n      background: ${theme.click.datePicker.dateOption.color.background.active};\n      color: ${theme.click.datePicker.dateOption.color.label.active};\n    `}\n\n\n  text-align: center;\n\n  ${({ $isToday, theme }) =>\n    $isToday && `font: ${theme.click.datePicker.dateOption.typography.label.active};`}\n\n  &:hover {\n    ${({ $isDisabled, theme }) =>\n      `border: ${theme.click.datePicker.dateOption.stroke} solid ${\n        $isDisabled\n          ? theme.click.datePicker.dateOption.color.stroke.disabled\n          : theme.click.datePicker.dateOption.color.stroke.hover\n      };\n\n\n    border-radius: ${theme.click.datePicker.dateOption.radii.default};`};\n  }\n`;\n\nexport type Body = ReturnType<typeof useCalendar>['body'];\n\ninterface CalendarRendererProps {\n  calendarOptions?: UseCalendarOptions;\n  children: (body: Body) => ReactNode;\n}\n\nexport const CalendarRenderer = ({\n  calendarOptions = {},\n  children,\n  ...props\n}: CalendarRendererProps) => {\n  const { body, headers, month, navigation, year } = useCalendar({\n    defaultWeekStart: 1,\n    ...calendarOptions,\n  });\n\n  const handleNextClick = useCallback((): void => {\n    navigation.toNext();\n  }, [navigation]);\n\n  const handlePreviousClick = useCallback((): void => {\n    navigation.toPrev();\n  }, [navigation]);\n\n  const headerDate = new Date();\n  headerDate.setMonth(month);\n  headerDate.setFullYear(year);\n\n  return (\n    <DatePickerContainer\n      data-testid=\"datepicker-calendar-container\"\n      isResponsive={false}\n      fillWidth={false}\n      orientation=\"vertical\"\n      padding=\"sm\"\n      {...props}\n    >\n      <Container\n        isResponsive={false}\n        justifyContent=\"space-between\"\n        orientation=\"horizontal\"\n      >\n        <IconButton\n          data-testid=\"calendar-previous-month\"\n          icon=\"chevron-left\"\n          onClick={handlePreviousClick}\n          size=\"sm\"\n          type=\"ghost\"\n        />\n        <UnselectableTitle>{headerDateFormatter.format(headerDate)}</UnselectableTitle>\n        <IconButton\n          data-testid=\"calendar-next-month\"\n          icon=\"chevron-right\"\n          onClick={handleNextClick}\n          size=\"sm\"\n          type=\"ghost\"\n        />\n      </Container>\n      <DateTable>\n        <thead>\n          <tr>\n            {headers.weekDays.map(({ key, value: date }) => {\n              return (\n                <DateTableHeader key={key}>\n                  {weekdayFormatter.format(date)}\n                </DateTableHeader>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>{children(body)}</tbody>\n      </DateTable>\n    </DatePickerContainer>\n  );\n};\n"],"names":["explicitWidth","HighlightedInputWrapper","styled","InputWrapper","withConfig","componentId","$isActive","theme","click","datePicker","dateOption","stroke","color","active","field","default","DatePickerInput","isActive","disabled","id","placeholder","selectedDate","defaultId","useId","formattedSelectedDate","Date","selectedDateFormatter","format","jsx","InputStartContent","Icon","InputElement","DateRangePickerInput","selectedEndDate","selectedStartDate","formattedValue","Text","DatePickerContainer","Container","background","UnselectableTitle","h2","title","typography","DateTable","table","styles","product","text","normal","md","size","height","DateTableHeader","th","daytitle","DateTableCell","td","radii","label","$isCurrentMonth","$isDisabled","$isSelected","$isToday","hover","CalendarRenderer","calendarOptions","children","props","body","headers","month","navigation","year","useCalendar","defaultWeekStart","handleNextClick","useCallback","toNext","handlePreviousClick","toPrev","headerDate","setMonth","setFullYear","jsxs","IconButton","headerDateFormatter","weekDays","map","key","value","date","weekdayFormatter"],"mappings":"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"}
+{"version":3,"file":"Common.cjs","sources":["../../../../src/components/DatePicker/Common.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { InputElement, InputStartContent, InputWrapper } from '../Input/InputWrapper';\nimport { ReactNode, useCallback, useId, useState } from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { Container } from '../Container/Container';\nimport { useCalendar, UseCalendarOptions } from '@h6s/calendar';\nimport { IconButton, IconButtonSize } from '../IconButton/IconButton';\nimport { Text } from '../Typography/Text/Text';\nimport { headerDateFormatter, selectedDateFormatter, weekdayFormatter } from './utils';\nimport { getMonthNames, DAYS, MONTHS, YEARS, DAYS_IN_WEEK } from '@/utils/date';\nimport { IconName } from '@/components/Icon/types';\n\nconst explicitWidth = '250px';\nconst TXT_ON_MONTH_SELECT = 'Month';\nconst TXT_ON_YEAR_SELECT = 'Year';\n\nconst VIEW_GRID_MONTHS = {\n  columns: 4,\n  rows: 3,\n} as const;\n\nconst VIEW_GRID_YEARS = {\n  columns: 3,\n  rows: 3,\n} as const;\n\nconst VIEW_TOTAL_YEARS = VIEW_GRID_YEARS.columns * VIEW_GRID_YEARS.rows;\nconst VIEW_NAVIGATION_OFFSET_YEARS = Math.floor(VIEW_TOTAL_YEARS / 2);\n\nconst HighlightedInputWrapper = styled(InputWrapper)<{ $isActive: boolean }>`\n  ${({ $isActive, theme }) => {\n    return `border: ${theme.click.datePicker.dateOption.stroke} solid ${\n      $isActive\n        ? theme.click.datePicker.dateOption.color.stroke.active\n        : theme.click.field.color.stroke.default\n    };`;\n  }}\n\n  width: ${explicitWidth};\n}`;\n\ninterface DatePickerInputProps {\n  isActive: boolean;\n  disabled: boolean;\n  id?: string;\n  partialMonth?: number;\n  partialYear?: number;\n  placeholder?: string;\n  selectedDate?: Date;\n}\n\nconst formatPartialDate = (\n  selectedDate?: Date,\n  partialYear?: number,\n  partialMonth?: number\n): string => {\n  if (typeof partialYear === 'number' && typeof partialMonth === 'number') {\n    const date = new Date(partialYear, partialMonth, 1);\n    return headerDateFormatter.format(date);\n  }\n  if (typeof partialYear === 'number') {\n    return String(partialYear);\n  }\n  if (selectedDate instanceof Date) {\n    return selectedDateFormatter.format(selectedDate);\n  }\n  return '';\n};\n\nexport const DatePickerInput = ({\n  isActive,\n  disabled,\n  id,\n  partialMonth,\n  partialYear,\n  placeholder,\n  selectedDate,\n}: DatePickerInputProps) => {\n  const defaultId = useId();\n  const formattedSelectedDate = formatPartialDate(\n    selectedDate,\n    partialYear,\n    partialMonth\n  );\n\n  return (\n    <HighlightedInputWrapper\n      $isActive={isActive}\n      disabled={disabled}\n      id={id ?? defaultId}\n    >\n      <InputStartContent>\n        <Icon name=\"calendar\" />\n      </InputStartContent>\n      <InputElement\n        $hasStartContent\n        data-testid=\"datepicker-input\"\n        placeholder={placeholder}\n        readOnly\n        value={formattedSelectedDate}\n      />\n    </HighlightedInputWrapper>\n  );\n};\n\ninterface DateRangePickerInputProps {\n  isActive: boolean;\n  disabled: boolean;\n  id?: string;\n  placeholder?: string;\n  selectedEndDate?: Date;\n  selectedStartDate?: Date;\n}\n\nexport const DateRangePickerInput = ({\n  isActive,\n  disabled,\n  id,\n  placeholder,\n  selectedEndDate,\n  selectedStartDate,\n}: DateRangePickerInputProps) => {\n  const defaultId = useId();\n\n  let formattedValue = (\n    <Text\n      color=\"muted\"\n      component=\"span\"\n    >\n      {placeholder ?? ''}\n    </Text>\n  );\n  if (selectedStartDate) {\n    if (selectedEndDate) {\n      formattedValue = (\n        <span>\n          {selectedDateFormatter.format(selectedStartDate)} –{' '}\n          {selectedDateFormatter.format(selectedEndDate)}\n        </span>\n      );\n    } else {\n      formattedValue = (\n        <span>\n          {selectedDateFormatter.format(selectedStartDate)}{' '}\n          <Text\n            color=\"muted\"\n            component=\"span\"\n          >\n            – end date\n          </Text>\n        </span>\n      );\n    }\n  }\n\n  return (\n    <HighlightedInputWrapper\n      $isActive={isActive}\n      disabled={disabled}\n      id={id ?? defaultId}\n    >\n      <InputStartContent>\n        <Icon name=\"calendar\" />\n      </InputStartContent>\n      <InputElement\n        $hasStartContent\n        as=\"div\"\n        data-testid=\"daterangepicker-input\"\n      >\n        {formattedValue}\n      </InputElement>\n    </HighlightedInputWrapper>\n  );\n};\n\nconst DatePickerContainer = styled(Container)`\n  background: ${({ theme }) =>\n    theme.click.datePicker.dateOption.color.background.default};\n`;\n\nconst ClickableTitle = styled.button`\n  ${({ theme }) => `\n    color: ${theme.click.datePicker.color.title.default};\n    font: ${theme.click.datePicker.typography.title.default};\n  `}\n\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  padding: 0.25rem 0.5rem;\n  border-radius: ${({ theme }) => theme.click.datePicker.dateOption.radii.default};\n\n  &:hover {\n    background: ${({ theme }) =>\n      theme.click.datePicker.dateOption.color.background.hover};\n  }\n`;\n\nconst UnselectableTitle = styled.h2`\n  ${({ theme }) => `\n    color: ${theme.click.datePicker.color.title.default};\n    font: ${theme.click.datePicker.typography.title.default};\n  `}\n\n  margin: 0;\n  padding: 0;\n  user-select: none;\n`;\n\nconst GridContainer = styled.div`\n  display: grid;\n  padding: 0.25rem 0 0;\n\n  ${({ theme }) => `\n    gap: calc(${theme.click.datePicker.space.gap} * 2);\n  `}\n`;\n\nconst MonthsGrid = styled(GridContainer)`\n  grid-template-columns: repeat(${VIEW_GRID_MONTHS.columns}, 1fr);\n  grid-template-rows: repeat(${VIEW_GRID_MONTHS.rows}, 1fr);\n`;\n\nconst YearsGrid = styled(GridContainer)`\n  grid-template-columns: repeat(${VIEW_GRID_YEARS.columns}, 1fr);\n  grid-template-rows: repeat(${VIEW_GRID_YEARS.rows}, 1fr);\n`;\n\nconst GridCell = styled.div<{ $isActive?: boolean; $isPresent?: boolean }>`\n  ${({ theme }) => `\n    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};\n    border-radius: ${theme.click.datePicker.dateOption.radii.default};\n    font: ${theme.click.datePicker.dateOption.typography.label.default};\n    color: ${theme.click.datePicker.dateOption.color.label.default};\n  `}\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n    background: ${theme.click.datePicker.dateOption.color.background.active};\n    color: ${theme.click.datePicker.dateOption.color.label.active};\n  `}\n\n  ${({ $isActive, $isPresent, theme }) =>\n    $isPresent &&\n    !$isActive &&\n    `background: ${theme.click.datePicker.dateOption.color.background.range};`}\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 4px;\n  cursor: pointer;\n  text-align: center;\n  min-height: 26px;\n\n  &:hover {\n    ${({ theme }) => `\n      border-color: ${theme.click.datePicker.dateOption.color.stroke.hover};\n    `},\n  }\n`;\n\nconst DateTable = styled.table`\n  border-collapse: separate;\n  border-spacing: 0;\n  font: ${({ theme }) => theme.typography.styles.product.text.normal.md};\n  table-layout: fixed;\n  user-select: none;\n  width: ${explicitWidth};\n\n  thead tr {\n    height: ${({ theme }) => theme.click.datePicker.dateOption.size.height};\n  }\n\n  tbody {\n    cursor: pointer;\n  }\n\n  td,\n  th {\n    padding: 4px;\n  }\n`;\n\nconst DateTableHeader = styled.th`\n  ${({ theme }) => `\n    color: ${theme.click.datePicker.color.daytitle.default};\n    font: ${theme.click.datePicker.typography.daytitle.default};\n  `}\n\n  width: 14%;\n`;\n\nexport const DateTableCell = styled.td<{\n  $isCurrentMonth?: boolean;\n  $isDisabled?: boolean;\n  $isSelected?: boolean;\n  $isPresent?: boolean;\n}>`\n  ${({ theme }) => `\n    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};\n    border-radius: ${theme.click.datePicker.dateOption.radii.default};\n    font: ${theme.click.datePicker.dateOption.typography.label.default};\n  `}\n\n  ${({ $isCurrentMonth, $isDisabled, theme }) =>\n    (!$isCurrentMonth || $isDisabled) &&\n    `\n    color: ${theme.click.datePicker.dateOption.color.label.disabled};\n    font: ${theme.click.datePicker.dateOption.typography.label.disabled};\n  `}\n\n  ${({ $isSelected, theme }) =>\n    $isSelected &&\n    `\n      background: ${theme.click.datePicker.dateOption.color.background.active};\n      color: ${theme.click.datePicker.dateOption.color.label.active};\n    `}\n\n  ${({ $isSelected, $isPresent, theme }) =>\n    $isPresent &&\n    !$isSelected &&\n    `background: ${theme.click.datePicker.dateOption.color.background.range};`}\n\n  text-align: center;\n\n  &:hover {\n    ${({ $isDisabled, $isPresent, theme }) =>\n      `border: ${theme.click.datePicker.dateOption.stroke} solid ${\n        $isDisabled\n          ? theme.click.datePicker.dateOption.color.stroke.disabled\n          : theme.click.datePicker.dateOption.color.stroke.hover\n      };\n      background: ${$isPresent ? theme.click.datePicker.dateOption.color.background.range : ''};\n      border-radius: ${theme.click.datePicker.dateOption.radii.default};`};\n  }\n`;\n\nexport type Body = ReturnType<typeof useCalendar>['body'];\n\ninterface CalendarRendererProps {\n  calendarOptions?: UseCalendarOptions;\n  children: (body: Body) => ReactNode;\n  allowYearMonthSelection?: boolean;\n  onYearSelect?: (year: number) => void;\n  onMonthSelect?: (year: number, month: number) => void;\n  selectedDate?: Date;\n}\n\nconst monthAbbreviations = getMonthNames('short');\n\ntype DateViewOption = 'days' | 'months' | 'years';\n\nconst EmptyDateSelectNav = styled(IconButton)`\n  visibility: hidden;\n  pointer-events: none;\n`;\n\nconst DateSelectNav = ({\n  id,\n  icon,\n  onClick,\n  view,\n  size = 'sm',\n}: {\n  id: string;\n  icon: Extract<IconName, 'chevron-left' | 'chevron-right'>;\n  onClick: () => void;\n  view: DateViewOption;\n  size?: IconButtonSize;\n}) => {\n  if (view === MONTHS) {\n    return (\n      <EmptyDateSelectNav\n        icon={icon}\n        size={size}\n        type=\"ghost\"\n      />\n    );\n  }\n  return (\n    <IconButton\n      data-testid={id}\n      icon={icon}\n      onClick={onClick}\n      size={size}\n      type=\"ghost\"\n    />\n  );\n};\n\nexport const CalendarRenderer = ({\n  calendarOptions = {},\n  children,\n  allowYearMonthSelection = true,\n  onYearSelect,\n  onMonthSelect,\n  selectedDate,\n  ...props\n}: CalendarRendererProps) => {\n  const { body, headers, month, navigation, year } = useCalendar({\n    defaultWeekStart: 1,\n    ...calendarOptions,\n  });\n\n  const [view, setView] = useState<DateViewOption>(DAYS);\n  const [selectedYear, setSelectedYear] = useState<number | null>(null);\n  const [yearOffset, setYearOffset] = useState(0);\n\n  const onNextClick = useCallback(() => {\n    if (view === YEARS) {\n      setYearOffset(prev => prev + VIEW_TOTAL_YEARS);\n    } else {\n      navigation.toNext();\n    }\n  }, [navigation, view]);\n\n  const onPreviousClick = useCallback(() => {\n    if (view === YEARS) {\n      setYearOffset(prev => prev - VIEW_TOTAL_YEARS);\n      return;\n    }\n\n    navigation.toPrev();\n  }, [navigation, view]);\n\n  const onTitleClick = useCallback(() => {\n    if (view !== DAYS) {\n      return;\n    }\n\n    setView(YEARS);\n  }, [view]);\n\n  const onYearSelection = useCallback(\n    (yearValue: number) => {\n      setSelectedYear(yearValue);\n      setView(MONTHS);\n      onYearSelect?.(yearValue);\n    },\n    [onYearSelect]\n  );\n\n  const onMonthSelection = useCallback(\n    (monthIndex: number) => {\n      const finalYear = typeof selectedYear === 'number' ? selectedYear : year;\n      const newDate = new Date(finalYear, monthIndex, 1);\n\n      navigation.setDate(newDate);\n      onMonthSelect?.(finalYear, monthIndex);\n\n      setView(DAYS);\n      setSelectedYear(null);\n      setYearOffset(0);\n    },\n    [selectedYear, year, navigation, onMonthSelect]\n  );\n\n  const headerDate = new Date();\n  headerDate.setMonth(month);\n  headerDate.setFullYear(year);\n\n  const getHeaderTitle = (view: DateViewOption) => {\n    if (view === MONTHS) {\n      return TXT_ON_MONTH_SELECT;\n    }\n\n    if (view === YEARS) {\n      return TXT_ON_YEAR_SELECT;\n    }\n\n    return headerDateFormatter.format(headerDate);\n  };\n\n  const renderMonthsGrid = () => {\n    const today = new Date();\n    const todayMonth = today.getMonth();\n    const todayYear = today.getFullYear();\n    const selectedMonth = selectedDate?.getMonth();\n    const selectedYear = selectedDate?.getFullYear();\n\n    return (\n      <MonthsGrid data-testid=\"months-grid\">\n        {monthAbbreviations.map((abbr, index) => (\n          <GridCell\n            key={abbr}\n            $isActive={selectedDate && index === selectedMonth && year === selectedYear}\n            $isPresent={index === todayMonth && year === todayYear}\n            onClick={() => onMonthSelection(index)}\n            data-testid={`month-cell-${index}`}\n          >\n            {abbr}\n          </GridCell>\n        ))}\n      </MonthsGrid>\n    );\n  };\n\n  const renderYearsGrid = () => {\n    const years = [];\n    const baseYear = year + yearOffset;\n    const todayYear = new Date().getFullYear();\n    const selectedYear = selectedDate?.getFullYear();\n\n    // Note: Try to keep the current year in the middle\n    for (let i = -VIEW_NAVIGATION_OFFSET_YEARS; i <= VIEW_NAVIGATION_OFFSET_YEARS; i++) {\n      years.push(baseYear + i);\n    }\n\n    return (\n      <YearsGrid data-testid=\"years-grid\">\n        {years.map(currYear => (\n          <GridCell\n            key={currYear}\n            $isActive={selectedDate && currYear === selectedYear}\n            $isPresent={currYear === todayYear}\n            onClick={() => onYearSelection(currYear)}\n            data-testid={`year-cell-${currYear}`}\n          >\n            {currYear}\n          </GridCell>\n        ))}\n      </YearsGrid>\n    );\n  };\n\n  const renderTableContent = () => {\n    if (view === MONTHS) {\n      return (\n        <tbody>\n          <tr>\n            <td colSpan={DAYS_IN_WEEK}>{renderMonthsGrid()}</td>\n          </tr>\n        </tbody>\n      );\n    }\n\n    if (view === YEARS) {\n      return (\n        <tbody>\n          <tr>\n            <td colSpan={DAYS_IN_WEEK}>{renderYearsGrid()}</td>\n          </tr>\n        </tbody>\n      );\n    }\n\n    return (\n      <>\n        <thead>\n          <tr>\n            {headers.weekDays.map(({ key, value: date }) => {\n              return (\n                <DateTableHeader key={key}>\n                  {weekdayFormatter.format(date)}\n                </DateTableHeader>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>{children(body)}</tbody>\n      </>\n    );\n  };\n\n  return (\n    <DatePickerContainer\n      data-testid=\"datepicker-calendar-container\"\n      isResponsive={false}\n      fillWidth={false}\n      orientation=\"vertical\"\n      padding=\"sm\"\n      {...props}\n    >\n      <Container\n        isResponsive={false}\n        justifyContent=\"space-between\"\n        orientation=\"horizontal\"\n      >\n        <DateSelectNav\n          id=\"calendar-previous-month\"\n          icon=\"chevron-left\"\n          onClick={onPreviousClick}\n          view={view}\n        />\n        {view === DAYS && allowYearMonthSelection ? (\n          <ClickableTitle\n            onClick={onTitleClick}\n            data-testid=\"calendar-title\"\n          >\n            {getHeaderTitle(view)}\n          </ClickableTitle>\n        ) : (\n          <UnselectableTitle>{getHeaderTitle(view)}</UnselectableTitle>\n        )}\n        <DateSelectNav\n          id=\"calendar-next-month\"\n          icon=\"chevron-right\"\n          onClick={onNextClick}\n          view={view}\n        />\n      </Container>\n      <DateTable>{renderTableContent()}</DateTable>\n    </DatePickerContainer>\n  );\n};\n"],"names":["explicitWidth","TXT_ON_MONTH_SELECT","TXT_ON_YEAR_SELECT","VIEW_GRID_MONTHS","columns","rows","VIEW_GRID_YEARS","VIEW_TOTAL_YEARS","VIEW_NAVIGATION_OFFSET_YEARS","Math","floor","HighlightedInputWrapper","styled","InputWrapper","withConfig","componentId","$isActive","theme","click","datePicker","dateOption","stroke","color","active","field","default","formatPartialDate","selectedDate","partialYear","partialMonth","date","Date","headerDateFormatter","format","String","selectedDateFormatter","DatePickerInput","isActive","disabled","id","placeholder","defaultId","useId","formattedSelectedDate","jsx","InputStartContent","Icon","InputElement","DateRangePickerInput","selectedEndDate","selectedStartDate","formattedValue","Text","DatePickerContainer","Container","background","ClickableTitle","button","title","typography","radii","hover","UnselectableTitle","h2","GridContainer","div","space","gap","MonthsGrid","YearsGrid","GridCell","label","$isPresent","range","DateTable","table","styles","product","text","normal","md","size","height","DateTableHeader","th","daytitle","DateTableCell","td","$isCurrentMonth","$isDisabled","$isSelected","monthAbbreviations","getMonthNames","EmptyDateSelectNav","IconButton","DateSelectNav","icon","onClick","view","MONTHS","CalendarRenderer","calendarOptions","children","allowYearMonthSelection","onYearSelect","onMonthSelect","props","body","headers","month","navigation","year","useCalendar","defaultWeekStart","setView","useState","DAYS","selectedYear","setSelectedYear","yearOffset","setYearOffset","onNextClick","useCallback","YEARS","prev","toNext","onPreviousClick","toPrev","onTitleClick","onYearSelection","yearValue","onMonthSelection","monthIndex","finalYear","newDate","setDate","headerDate","setMonth","setFullYear","getHeaderTitle","renderMonthsGrid","today","todayMonth","getMonth","todayYear","getFullYear","selectedMonth","map","abbr","index","renderYearsGrid","years","baseYear","i","push","currYear","renderTableContent","DAYS_IN_WEEK","jsxs","Fragment","weekDays","key","value","weekdayFormatter"],"mappings":"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"}

package/dist/cjs/components/DatePicker/DatePicker.cjs

@@ -25,9 +25,9 @@ const Calendar = ({
       key: dayKey,
       value: fullDate
     }) => {
-      const isSelected = selectedDate ? calendar.isSameDate(selectedDate, fullDate) : false;
       const today = /* @__PURE__ */ new Date();
-      const isCurrentDate = calendar.isSameDate(today, fullDate);
+      const isSelected = selectedDate && calendar.isSameDate(selectedDate, fullDate);
+      const isPresent = calendar.isSameDate(today, fullDate);
       const isDisabled = futureDatesDisabled ? fullDate > today : false;
       const handleClick = () => {
         if (isDisabled) {
@@ -36,7 +36,7 @@ const Calendar = ({
         setSelectedDate(fullDate);
         closeDatepicker();
       };
-      return /* @__PURE__ */ jsxRuntime.jsx(Common.DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+      return /* @__PURE__ */ jsxRuntime.jsx(Common.DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isPresent: isPresent, onClick: handleClick, children: date }, dayKey);
     }) }, weekKey);
   });
 };
@@ -45,10 +45,13 @@ const DatePicker = ({
   disabled = false,
   futureDatesDisabled = false,
   onSelectDate,
-  placeholder
+  placeholder,
+  responsivePositioning = true
 }) => {
   const [isOpen, setIsOpen] = react.useState(false);
   const [selectedDate, setSelectedDate] = react.useState();
+  const [partialYear, setPartialYear] = react.useState();
+  const [partialMonth, setPartialMonth] = react.useState();
   const calendarOptions = {};
   if (selectedDate) {
     calendarOptions.defaultDate = selectedDate;
@@ -58,16 +61,36 @@ const DatePicker = ({
       setSelectedDate(date);
     }
   }, [date]);
-  const closeDatePicker = () => {
+  const resetPartialState = react.useCallback(() => {
+    setPartialYear(void 0);
+    setPartialMonth(void 0);
+  }, []);
+  const onOpenChange = react.useCallback((open) => {
+    setIsOpen(open);
+    if (!open) {
+      resetPartialState();
+    }
+  }, [resetPartialState]);
+  const onCloseDatePicker = react.useCallback(() => {
     setIsOpen(false);
-  };
-  const handleSelectDate = (selectedDate2) => {
-    setSelectedDate(selectedDate2);
-    onSelectDate(selectedDate2);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(Common.DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(Common.CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
+    resetPartialState();
+  }, [resetPartialState]);
+  const onDateSelect = react.useCallback((date2) => {
+    setSelectedDate(date2);
+    onSelectDate(date2);
+    resetPartialState();
+  }, [onSelectDate, resetPartialState]);
+  const onYearSelect = react.useCallback((year) => {
+    setPartialYear(year);
+    setPartialMonth(void 0);
+  }, []);
+  const onMonthSelect = react.useCallback((year, month) => {
+    setPartialYear(year);
+    setPartialMonth(month);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.Dropdown, { onOpenChange, open: isOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(Common.DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, partialMonth, partialYear, placeholder, selectedDate }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Content, { align: "start", responsivePositioning, children: /* @__PURE__ */ jsxRuntime.jsx(Common.CalendarRenderer, { calendarOptions, onYearSelect, onMonthSelect, selectedDate, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: onCloseDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: onDateSelect }) }) })
   ] });
 };