@yr3/ui 1.0.21 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +21 -17
  2. package/dist/index.d.cts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +21 -17
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1820,19 +1820,24 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1820
1820
  const iconClasses = monthSelectorIconVariants({ color: properties?.icon?.color });
1821
1821
  const containerClasses = monthSelectorContainerVariants({ color: properties?.container?.color });
1822
1822
  const getData = React10.useMemo(() => {
1823
- if (!disabled) return {};
1824
1823
  return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1825
- }, [yearSelected, data, daysFormat, valueState, disabled]);
1826
- React10.useEffect(() => {
1827
- if (onNext) onNext(getData.prev);
1828
- if (onLast) onLast(getData.last);
1829
- }, [getData]);
1830
- React10.useEffect(() => {
1831
- setValueState(value || null);
1832
- }, [value]);
1833
- React10.useEffect(() => {
1834
- if (onChange && valueState && !disabled) onChange(valueState);
1835
- }, [valueState, onChange, disabled]);
1824
+ }, [yearSelected, data, daysFormat, valueState]);
1825
+ const handleYearChange = (newIndex) => {
1826
+ setYearSelected(newIndex);
1827
+ };
1828
+ const handleMonthChange = (month) => {
1829
+ const newValue = `${month}-${data.years[yearSelected]}`;
1830
+ setValueState(newValue);
1831
+ onChange(newValue);
1832
+ const nextData = getMonthCalendarProps({
1833
+ year: data.years[yearSelected],
1834
+ data,
1835
+ daysFormat,
1836
+ value: newValue
1837
+ });
1838
+ onNext?.(nextData.prev);
1839
+ onLast?.(nextData.last);
1840
+ };
1836
1841
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
1837
1842
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1838
1843
  Input,
@@ -1852,7 +1857,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1852
1857
  {
1853
1858
  className: iconClasses,
1854
1859
  style: properties?.icon?.style,
1855
- onClick: () => !disabled && setOpen((prev) => !prev),
1860
+ onClick: () => !disabled && setOpen(true),
1856
1861
  "data-testid": "yr3MonthSelector--icon",
1857
1862
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1858
1863
  IconCalendar,
@@ -1884,7 +1889,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1884
1889
  disabled: disabled || yearSelected === 0,
1885
1890
  type: "button",
1886
1891
  className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1887
- onClick: () => setYearSelected(yearSelected - 1),
1892
+ onClick: () => handleYearChange(yearSelected - 1),
1888
1893
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1889
1894
  }
1890
1895
  ),
@@ -1898,7 +1903,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1898
1903
  disabled: disabled || yearSelected === data.years.length - 1,
1899
1904
  type: "button",
1900
1905
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1901
- onClick: () => setYearSelected(yearSelected + 1),
1906
+ onClick: () => handleYearChange(yearSelected + 1),
1902
1907
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconRight, { width: 20, height: 30, stroke: "currentColor" })
1903
1908
  }
1904
1909
  )
@@ -1913,8 +1918,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1913
1918
  disabled: m.disabled,
1914
1919
  className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month--disabled" : ""} ${m.selected ? "yr3MonthSelector--month--selected" : ""}`,
1915
1920
  onClick: () => {
1916
- setValueState(`${m.value}-${data.years[yearSelected]}`);
1917
- setOpen(false);
1921
+ handleMonthChange(m.value);
1918
1922
  },
1919
1923
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
1920
1924
  },
package/dist/index.d.cts CHANGED
@@ -1437,7 +1437,7 @@ type MonthSelectorProps = {
1437
1437
  };
1438
1438
  onNext?: (value: string) => void;
1439
1439
  onLast?: (value: string) => void;
1440
- onChange?: (value: string) => void;
1440
+ onChange: (value: string) => void;
1441
1441
  propsComponent?: {
1442
1442
  control?: Omit<React$1.ComponentProps<typeof Input>, 'value' | 'onChange'>;
1443
1443
  wrapper?: {
package/dist/index.d.ts CHANGED
@@ -1437,7 +1437,7 @@ type MonthSelectorProps = {
1437
1437
  };
1438
1438
  onNext?: (value: string) => void;
1439
1439
  onLast?: (value: string) => void;
1440
- onChange?: (value: string) => void;
1440
+ onChange: (value: string) => void;
1441
1441
  propsComponent?: {
1442
1442
  control?: Omit<React$1.ComponentProps<typeof Input>, 'value' | 'onChange'>;
1443
1443
  wrapper?: {
package/dist/index.js CHANGED
@@ -1696,19 +1696,24 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1696
1696
  const iconClasses = monthSelectorIconVariants({ color: properties?.icon?.color });
1697
1697
  const containerClasses = monthSelectorContainerVariants({ color: properties?.container?.color });
1698
1698
  const getData = React10.useMemo(() => {
1699
- if (!disabled) return {};
1700
1699
  return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1701
- }, [yearSelected, data, daysFormat, valueState, disabled]);
1702
- React10.useEffect(() => {
1703
- if (onNext) onNext(getData.prev);
1704
- if (onLast) onLast(getData.last);
1705
- }, [getData]);
1706
- React10.useEffect(() => {
1707
- setValueState(value || null);
1708
- }, [value]);
1709
- React10.useEffect(() => {
1710
- if (onChange && valueState && !disabled) onChange(valueState);
1711
- }, [valueState, onChange, disabled]);
1700
+ }, [yearSelected, data, daysFormat, valueState]);
1701
+ const handleYearChange = (newIndex) => {
1702
+ setYearSelected(newIndex);
1703
+ };
1704
+ const handleMonthChange = (month) => {
1705
+ const newValue = `${month}-${data.years[yearSelected]}`;
1706
+ setValueState(newValue);
1707
+ onChange(newValue);
1708
+ const nextData = getMonthCalendarProps({
1709
+ year: data.years[yearSelected],
1710
+ data,
1711
+ daysFormat,
1712
+ value: newValue
1713
+ });
1714
+ onNext?.(nextData.prev);
1715
+ onLast?.(nextData.last);
1716
+ };
1712
1717
  return /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector", ref, children: [
1713
1718
  /* @__PURE__ */ jsx24(
1714
1719
  Input,
@@ -1728,7 +1733,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1728
1733
  {
1729
1734
  className: iconClasses,
1730
1735
  style: properties?.icon?.style,
1731
- onClick: () => !disabled && setOpen((prev) => !prev),
1736
+ onClick: () => !disabled && setOpen(true),
1732
1737
  "data-testid": "yr3MonthSelector--icon",
1733
1738
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx24(
1734
1739
  IconCalendar,
@@ -1760,7 +1765,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1760
1765
  disabled: disabled || yearSelected === 0,
1761
1766
  type: "button",
1762
1767
  className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1763
- onClick: () => setYearSelected(yearSelected - 1),
1768
+ onClick: () => handleYearChange(yearSelected - 1),
1764
1769
  children: /* @__PURE__ */ jsx24(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1765
1770
  }
1766
1771
  ),
@@ -1774,7 +1779,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1774
1779
  disabled: disabled || yearSelected === data.years.length - 1,
1775
1780
  type: "button",
1776
1781
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1777
- onClick: () => setYearSelected(yearSelected + 1),
1782
+ onClick: () => handleYearChange(yearSelected + 1),
1778
1783
  children: /* @__PURE__ */ jsx24(IconRight, { width: 20, height: 30, stroke: "currentColor" })
1779
1784
  }
1780
1785
  )
@@ -1789,8 +1794,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1789
1794
  disabled: m.disabled,
1790
1795
  className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month--disabled" : ""} ${m.selected ? "yr3MonthSelector--month--selected" : ""}`,
1791
1796
  onClick: () => {
1792
- setValueState(`${m.value}-${data.years[yearSelected]}`);
1793
- setOpen(false);
1797
+ handleMonthChange(m.value);
1794
1798
  },
1795
1799
  children: /* @__PURE__ */ jsx24(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
1796
1800
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yr3/ui",
3
- "version": "1.0.21",
3
+ "version": "1.0.23",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",