@yr3/ui 1.0.20 → 1.0.22

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 +23 -9
  2. package/dist/index.d.cts +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +23 -9
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1810,23 +1810,28 @@ var initialPropsComponent3 = {
1810
1810
  style: {}
1811
1811
  }
1812
1812
  };
1813
- var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFormat, onNext, onLast }) => {
1813
+ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat, onNext, onLast, onChange }) => {
1814
1814
  const [open, setOpen] = React10.useState(false);
1815
- const [valueState, setValueState] = React10.useState(value || defaultValue || null);
1816
- const [yearSelected, setYearSelected] = React10.useState(data?.years.findIndex((y) => data.year) || 0);
1815
+ const [valueState, setValueState] = React10.useState(value || null);
1816
+ const [yearSelected, setYearSelected] = React10.useState(data?.years.findIndex((y) => y === data.year) || 0);
1817
1817
  const ref = React10.useRef(null);
1818
1818
  useClickAway(ref, () => setOpen(false));
1819
1819
  const properties = mergeDeep(initialPropsComponent3, propsComponent || {});
1820
1820
  const iconClasses = monthSelectorIconVariants({ color: properties?.icon?.color });
1821
1821
  const containerClasses = monthSelectorContainerVariants({ color: properties?.container?.color });
1822
- const getData = React10.useMemo(() => getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState }), [yearSelected, data, daysFormat, valueState]);
1822
+ const getData = React10.useMemo(() => {
1823
+ return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1824
+ }, [yearSelected, data, daysFormat, valueState]);
1823
1825
  React10.useEffect(() => {
1824
1826
  if (onNext) onNext(getData.prev);
1825
1827
  if (onLast) onLast(getData.last);
1826
1828
  }, [getData]);
1827
1829
  React10.useEffect(() => {
1828
- setValueState(value || defaultValue || null);
1829
- }, [value, defaultValue]);
1830
+ setValueState(value || null);
1831
+ }, [value]);
1832
+ React10.useEffect(() => {
1833
+ if (onChange && valueState) onChange(valueState);
1834
+ }, [valueState, onChange]);
1830
1835
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
1831
1836
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1832
1837
  Input,
@@ -1846,7 +1851,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1846
1851
  {
1847
1852
  className: iconClasses,
1848
1853
  style: properties?.icon?.style,
1849
- onClick: () => setOpen((prev) => !prev),
1854
+ onClick: () => !disabled && setOpen((prev) => !prev),
1850
1855
  "data-testid": "yr3MonthSelector--icon",
1851
1856
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1852
1857
  IconCalendar,
@@ -1872,7 +1877,16 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1872
1877
  className: containerClasses,
1873
1878
  style: composeStyles(properties?.container?.ui, properties?.container?.style),
1874
1879
  children: [
1875
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { disabled: yearSelected === 0, type: "button", className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `, onClick: () => setYearSelected(yearSelected - 1), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" }) }),
1880
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1881
+ "button",
1882
+ {
1883
+ disabled: disabled || yearSelected === 0,
1884
+ type: "button",
1885
+ className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1886
+ onClick: () => setYearSelected(yearSelected - 1),
1887
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1888
+ }
1889
+ ),
1876
1890
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Text, { variant: "body1", color: "primary", children: [
1877
1891
  data.years[yearSelected],
1878
1892
  " "
@@ -1880,7 +1894,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1880
1894
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1881
1895
  "button",
1882
1896
  {
1883
- disabled: yearSelected === data.years.length - 1,
1897
+ disabled: disabled || yearSelected === data.years.length - 1,
1884
1898
  type: "button",
1885
1899
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1886
1900
  onClick: () => setYearSelected(yearSelected + 1),
package/dist/index.d.cts CHANGED
@@ -1420,7 +1420,7 @@ type MonthSelectorProps = {
1420
1420
  label?: string;
1421
1421
  name?: string;
1422
1422
  value?: string;
1423
- defaultValue?: string;
1423
+ disabled?: boolean;
1424
1424
  data: {
1425
1425
  years: number[];
1426
1426
  year: number;
@@ -1437,7 +1437,7 @@ type MonthSelectorProps = {
1437
1437
  };
1438
1438
  onNext?: (value: string) => void;
1439
1439
  onLast?: (value: string) => void;
1440
- onChange?: (e: any, 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
@@ -1420,7 +1420,7 @@ type MonthSelectorProps = {
1420
1420
  label?: string;
1421
1421
  name?: string;
1422
1422
  value?: string;
1423
- defaultValue?: string;
1423
+ disabled?: boolean;
1424
1424
  data: {
1425
1425
  years: number[];
1426
1426
  year: number;
@@ -1437,7 +1437,7 @@ type MonthSelectorProps = {
1437
1437
  };
1438
1438
  onNext?: (value: string) => void;
1439
1439
  onLast?: (value: string) => void;
1440
- onChange?: (e: any, 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
@@ -1686,23 +1686,28 @@ var initialPropsComponent3 = {
1686
1686
  style: {}
1687
1687
  }
1688
1688
  };
1689
- var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFormat, onNext, onLast }) => {
1689
+ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat, onNext, onLast, onChange }) => {
1690
1690
  const [open, setOpen] = React10.useState(false);
1691
- const [valueState, setValueState] = React10.useState(value || defaultValue || null);
1692
- const [yearSelected, setYearSelected] = React10.useState(data?.years.findIndex((y) => data.year) || 0);
1691
+ const [valueState, setValueState] = React10.useState(value || null);
1692
+ const [yearSelected, setYearSelected] = React10.useState(data?.years.findIndex((y) => y === data.year) || 0);
1693
1693
  const ref = React10.useRef(null);
1694
1694
  useClickAway(ref, () => setOpen(false));
1695
1695
  const properties = mergeDeep(initialPropsComponent3, propsComponent || {});
1696
1696
  const iconClasses = monthSelectorIconVariants({ color: properties?.icon?.color });
1697
1697
  const containerClasses = monthSelectorContainerVariants({ color: properties?.container?.color });
1698
- const getData = React10.useMemo(() => getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState }), [yearSelected, data, daysFormat, valueState]);
1698
+ const getData = React10.useMemo(() => {
1699
+ return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1700
+ }, [yearSelected, data, daysFormat, valueState]);
1699
1701
  React10.useEffect(() => {
1700
1702
  if (onNext) onNext(getData.prev);
1701
1703
  if (onLast) onLast(getData.last);
1702
1704
  }, [getData]);
1703
1705
  React10.useEffect(() => {
1704
- setValueState(value || defaultValue || null);
1705
- }, [value, defaultValue]);
1706
+ setValueState(value || null);
1707
+ }, [value]);
1708
+ React10.useEffect(() => {
1709
+ if (onChange && valueState) onChange(valueState);
1710
+ }, [valueState, onChange]);
1706
1711
  return /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector", ref, children: [
1707
1712
  /* @__PURE__ */ jsx24(
1708
1713
  Input,
@@ -1722,7 +1727,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1722
1727
  {
1723
1728
  className: iconClasses,
1724
1729
  style: properties?.icon?.style,
1725
- onClick: () => setOpen((prev) => !prev),
1730
+ onClick: () => !disabled && setOpen((prev) => !prev),
1726
1731
  "data-testid": "yr3MonthSelector--icon",
1727
1732
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx24(
1728
1733
  IconCalendar,
@@ -1748,7 +1753,16 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1748
1753
  className: containerClasses,
1749
1754
  style: composeStyles(properties?.container?.ui, properties?.container?.style),
1750
1755
  children: [
1751
- /* @__PURE__ */ jsx24("button", { disabled: yearSelected === 0, type: "button", className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `, onClick: () => setYearSelected(yearSelected - 1), children: /* @__PURE__ */ jsx24(IconLeft, { width: 20, height: 20, stroke: "currentColor" }) }),
1756
+ /* @__PURE__ */ jsx24(
1757
+ "button",
1758
+ {
1759
+ disabled: disabled || yearSelected === 0,
1760
+ type: "button",
1761
+ className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1762
+ onClick: () => setYearSelected(yearSelected - 1),
1763
+ children: /* @__PURE__ */ jsx24(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1764
+ }
1765
+ ),
1752
1766
  /* @__PURE__ */ jsx24("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ jsxs6(Text, { variant: "body1", color: "primary", children: [
1753
1767
  data.years[yearSelected],
1754
1768
  " "
@@ -1756,7 +1770,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1756
1770
  /* @__PURE__ */ jsx24(
1757
1771
  "button",
1758
1772
  {
1759
- disabled: yearSelected === data.years.length - 1,
1773
+ disabled: disabled || yearSelected === data.years.length - 1,
1760
1774
  type: "button",
1761
1775
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1762
1776
  onClick: () => setYearSelected(yearSelected + 1),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yr3/ui",
3
- "version": "1.0.20",
3
+ "version": "1.0.22",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",