@yr3/ui 1.0.20 → 1.0.21

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 +24 -9
  2. package/dist/index.d.cts +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +24 -9
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1810,23 +1810,29 @@ 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
+ if (!disabled) return {};
1824
+ return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1825
+ }, [yearSelected, data, daysFormat, valueState, disabled]);
1823
1826
  React10.useEffect(() => {
1824
1827
  if (onNext) onNext(getData.prev);
1825
1828
  if (onLast) onLast(getData.last);
1826
1829
  }, [getData]);
1827
1830
  React10.useEffect(() => {
1828
- setValueState(value || defaultValue || null);
1829
- }, [value, defaultValue]);
1831
+ setValueState(value || null);
1832
+ }, [value]);
1833
+ React10.useEffect(() => {
1834
+ if (onChange && valueState && !disabled) onChange(valueState);
1835
+ }, [valueState, onChange, disabled]);
1830
1836
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
1831
1837
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1832
1838
  Input,
@@ -1846,7 +1852,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1846
1852
  {
1847
1853
  className: iconClasses,
1848
1854
  style: properties?.icon?.style,
1849
- onClick: () => setOpen((prev) => !prev),
1855
+ onClick: () => !disabled && setOpen((prev) => !prev),
1850
1856
  "data-testid": "yr3MonthSelector--icon",
1851
1857
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1852
1858
  IconCalendar,
@@ -1872,7 +1878,16 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1872
1878
  className: containerClasses,
1873
1879
  style: composeStyles(properties?.container?.ui, properties?.container?.style),
1874
1880
  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" }) }),
1881
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1882
+ "button",
1883
+ {
1884
+ disabled: disabled || yearSelected === 0,
1885
+ type: "button",
1886
+ className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1887
+ onClick: () => setYearSelected(yearSelected - 1),
1888
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1889
+ }
1890
+ ),
1876
1891
  /* @__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
1892
  data.years[yearSelected],
1878
1893
  " "
@@ -1880,7 +1895,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1880
1895
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1881
1896
  "button",
1882
1897
  {
1883
- disabled: yearSelected === data.years.length - 1,
1898
+ disabled: disabled || yearSelected === data.years.length - 1,
1884
1899
  type: "button",
1885
1900
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1886
1901
  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,29 @@ 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
+ if (!disabled) return {};
1700
+ return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
1701
+ }, [yearSelected, data, daysFormat, valueState, disabled]);
1699
1702
  React10.useEffect(() => {
1700
1703
  if (onNext) onNext(getData.prev);
1701
1704
  if (onLast) onLast(getData.last);
1702
1705
  }, [getData]);
1703
1706
  React10.useEffect(() => {
1704
- setValueState(value || defaultValue || null);
1705
- }, [value, defaultValue]);
1707
+ setValueState(value || null);
1708
+ }, [value]);
1709
+ React10.useEffect(() => {
1710
+ if (onChange && valueState && !disabled) onChange(valueState);
1711
+ }, [valueState, onChange, disabled]);
1706
1712
  return /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector", ref, children: [
1707
1713
  /* @__PURE__ */ jsx24(
1708
1714
  Input,
@@ -1722,7 +1728,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1722
1728
  {
1723
1729
  className: iconClasses,
1724
1730
  style: properties?.icon?.style,
1725
- onClick: () => setOpen((prev) => !prev),
1731
+ onClick: () => !disabled && setOpen((prev) => !prev),
1726
1732
  "data-testid": "yr3MonthSelector--icon",
1727
1733
  children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx24(
1728
1734
  IconCalendar,
@@ -1748,7 +1754,16 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1748
1754
  className: containerClasses,
1749
1755
  style: composeStyles(properties?.container?.ui, properties?.container?.style),
1750
1756
  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" }) }),
1757
+ /* @__PURE__ */ jsx24(
1758
+ "button",
1759
+ {
1760
+ disabled: disabled || yearSelected === 0,
1761
+ type: "button",
1762
+ className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
1763
+ onClick: () => setYearSelected(yearSelected - 1),
1764
+ children: /* @__PURE__ */ jsx24(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
1765
+ }
1766
+ ),
1752
1767
  /* @__PURE__ */ jsx24("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ jsxs6(Text, { variant: "body1", color: "primary", children: [
1753
1768
  data.years[yearSelected],
1754
1769
  " "
@@ -1756,7 +1771,7 @@ var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFor
1756
1771
  /* @__PURE__ */ jsx24(
1757
1772
  "button",
1758
1773
  {
1759
- disabled: yearSelected === data.years.length - 1,
1774
+ disabled: disabled || yearSelected === data.years.length - 1,
1760
1775
  type: "button",
1761
1776
  className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
1762
1777
  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.21",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",