@yr3/ui 1.0.22 → 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 +20 -15
  2. package/dist/index.d.cts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +20 -15
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1822,16 +1822,22 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1822
1822
  const getData = React10.useMemo(() => {
1823
1823
  return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1824
1824
  }, [yearSelected, data, daysFormat, valueState]);
1825
- React10.useEffect(() => {
1826
- if (onNext) onNext(getData.prev);
1827
- if (onLast) onLast(getData.last);
1828
- }, [getData]);
1829
- React10.useEffect(() => {
1830
- setValueState(value || null);
1831
- }, [value]);
1832
- React10.useEffect(() => {
1833
- if (onChange && valueState) onChange(valueState);
1834
- }, [valueState, onChange]);
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
+ };
1835
1841
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
1836
1842
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1837
1843
  Input,
@@ -1851,7 +1857,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1851
1857
  {
1852
1858
  className: iconClasses,
1853
1859
  style: properties?.icon?.style,
1854
- onClick: () => !disabled && setOpen((prev) => !prev),
1860
+ onClick: () => !disabled && setOpen(true),
1855
1861
  "data-testid": "yr3MonthSelector--icon",
1856
1862
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1857
1863
  IconCalendar,
@@ -1883,7 +1889,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1883
1889
  disabled: disabled || yearSelected === 0,
1884
1890
  type: "button",
1885
1891
  className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1886
- onClick: () => setYearSelected(yearSelected - 1),
1892
+ onClick: () => handleYearChange(yearSelected - 1),
1887
1893
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1888
1894
  }
1889
1895
  ),
@@ -1897,7 +1903,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1897
1903
  disabled: disabled || yearSelected === data.years.length - 1,
1898
1904
  type: "button",
1899
1905
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1900
- onClick: () => setYearSelected(yearSelected + 1),
1906
+ onClick: () => handleYearChange(yearSelected + 1),
1901
1907
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconRight, { width: 20, height: 30, stroke: "currentColor" })
1902
1908
  }
1903
1909
  )
@@ -1912,8 +1918,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1912
1918
  disabled: m.disabled,
1913
1919
  className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month--disabled" : ""} ${m.selected ? "yr3MonthSelector--month--selected" : ""}`,
1914
1920
  onClick: () => {
1915
- setValueState(`${m.value}-${data.years[yearSelected]}`);
1916
- setOpen(false);
1921
+ handleMonthChange(m.value);
1917
1922
  },
1918
1923
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
1919
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
@@ -1698,16 +1698,22 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1698
1698
  const getData = React10.useMemo(() => {
1699
1699
  return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1700
1700
  }, [yearSelected, data, daysFormat, valueState]);
1701
- React10.useEffect(() => {
1702
- if (onNext) onNext(getData.prev);
1703
- if (onLast) onLast(getData.last);
1704
- }, [getData]);
1705
- React10.useEffect(() => {
1706
- setValueState(value || null);
1707
- }, [value]);
1708
- React10.useEffect(() => {
1709
- if (onChange && valueState) onChange(valueState);
1710
- }, [valueState, onChange]);
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
+ };
1711
1717
  return /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector", ref, children: [
1712
1718
  /* @__PURE__ */ jsx24(
1713
1719
  Input,
@@ -1727,7 +1733,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1727
1733
  {
1728
1734
  className: iconClasses,
1729
1735
  style: properties?.icon?.style,
1730
- onClick: () => !disabled && setOpen((prev) => !prev),
1736
+ onClick: () => !disabled && setOpen(true),
1731
1737
  "data-testid": "yr3MonthSelector--icon",
1732
1738
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx24(
1733
1739
  IconCalendar,
@@ -1759,7 +1765,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1759
1765
  disabled: disabled || yearSelected === 0,
1760
1766
  type: "button",
1761
1767
  className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1762
- onClick: () => setYearSelected(yearSelected - 1),
1768
+ onClick: () => handleYearChange(yearSelected - 1),
1763
1769
  children: /* @__PURE__ */ jsx24(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1764
1770
  }
1765
1771
  ),
@@ -1773,7 +1779,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1773
1779
  disabled: disabled || yearSelected === data.years.length - 1,
1774
1780
  type: "button",
1775
1781
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1776
- onClick: () => setYearSelected(yearSelected + 1),
1782
+ onClick: () => handleYearChange(yearSelected + 1),
1777
1783
  children: /* @__PURE__ */ jsx24(IconRight, { width: 20, height: 30, stroke: "currentColor" })
1778
1784
  }
1779
1785
  )
@@ -1788,8 +1794,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
1788
1794
  disabled: m.disabled,
1789
1795
  className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month--disabled" : ""} ${m.selected ? "yr3MonthSelector--month--selected" : ""}`,
1790
1796
  onClick: () => {
1791
- setValueState(`${m.value}-${data.years[yearSelected]}`);
1792
- setOpen(false);
1797
+ handleMonthChange(m.value);
1793
1798
  },
1794
1799
  children: /* @__PURE__ */ jsx24(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
1795
1800
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yr3/ui",
3
- "version": "1.0.22",
3
+ "version": "1.0.23",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",