@yr3/ui 1.0.18 → 1.0.19
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.
- package/dist/index.cjs +57 -19
- package/dist/index.d.cts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +57 -19
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1727,6 +1727,23 @@ var monthSelectorIconVariants = createVariants({
|
|
|
1727
1727
|
}
|
|
1728
1728
|
}
|
|
1729
1729
|
});
|
|
1730
|
+
var monthSelectorContainerVariants = createVariants({
|
|
1731
|
+
base: "yr3MonthSelector--year-options",
|
|
1732
|
+
variants: {
|
|
1733
|
+
color: {
|
|
1734
|
+
primary: "yr3MonthSelector--icon-color-primary",
|
|
1735
|
+
secondary: "yr3MonthSelector--icon-color-secondary",
|
|
1736
|
+
success: "yr3MonthSelector--icon-color-success",
|
|
1737
|
+
text: "yr3MonthSelector--icon-color-text",
|
|
1738
|
+
disabled: "yr3MonthSelector--icon-color-disabled",
|
|
1739
|
+
background: "yr3MonthSelector--icon-color-background",
|
|
1740
|
+
error: "yr3MonthSelector--icon-color-error",
|
|
1741
|
+
warning: "yr3MonthSelector--icon-color-warning",
|
|
1742
|
+
info: "yr3MonthSelector--icon-color-info",
|
|
1743
|
+
common: "yr3MonthSelector--icon-color-common"
|
|
1744
|
+
}
|
|
1745
|
+
}
|
|
1746
|
+
});
|
|
1730
1747
|
|
|
1731
1748
|
// src/Icons/IconRight.tsx
|
|
1732
1749
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
@@ -1770,16 +1787,29 @@ var initialPropsComponent3 = {
|
|
|
1770
1787
|
height: 20
|
|
1771
1788
|
},
|
|
1772
1789
|
component: void 0
|
|
1790
|
+
},
|
|
1791
|
+
text: {
|
|
1792
|
+
variant: "caption",
|
|
1793
|
+
color: "primary",
|
|
1794
|
+
ui: {},
|
|
1795
|
+
style: {},
|
|
1796
|
+
button: {}
|
|
1797
|
+
},
|
|
1798
|
+
container: {
|
|
1799
|
+
color: "primary",
|
|
1800
|
+
ui: {},
|
|
1801
|
+
style: {}
|
|
1773
1802
|
}
|
|
1774
1803
|
};
|
|
1775
1804
|
var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent, years, language, formatMonth = "MMM", monthsDisabled }) => {
|
|
1776
1805
|
const [open, setOpen] = React10.useState(false);
|
|
1777
1806
|
const [valueState, setValueState] = React10.useState(value || defaultValue || null);
|
|
1778
|
-
const [yearSelected, setYearSelected] = React10.useState(0);
|
|
1807
|
+
const [yearSelected, setYearSelected] = React10.useState(years.findIndex((y) => y === year) || 0);
|
|
1779
1808
|
const ref = React10.useRef(null);
|
|
1780
1809
|
useClickAway(ref, () => setOpen(false));
|
|
1781
1810
|
const properties = mergeDeep(initialPropsComponent3, propsComponent || {});
|
|
1782
1811
|
const iconClasses = monthSelectorIconVariants({ color: properties?.icon?.color });
|
|
1812
|
+
const containerClasses = monthSelectorContainerVariants({ color: properties?.container?.color });
|
|
1783
1813
|
const data = React10.useMemo(() => getMonthCalendarProps({ year, month, years, language, formatMonth, monthsDisabled }), [year, month, years, language, formatMonth, monthsDisabled]);
|
|
1784
1814
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
|
|
1785
1815
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
@@ -1820,34 +1850,42 @@ var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent,
|
|
|
1820
1850
|
style: composeStyles(properties?.wrapper?.ui, properties?.wrapper?.style),
|
|
1821
1851
|
"data-testid": "yr3MonthSelector--wrapper",
|
|
1822
1852
|
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector--component", children: [
|
|
1823
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1853
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1854
|
+
"div",
|
|
1855
|
+
{
|
|
1856
|
+
className: containerClasses,
|
|
1857
|
+
style: composeStyles(properties?.container?.ui, properties?.container?.style),
|
|
1858
|
+
children: [
|
|
1859
|
+
/* @__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" }) }),
|
|
1860
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Text, { variant: "body1", color: "primary", children: [
|
|
1861
|
+
years[yearSelected],
|
|
1862
|
+
" "
|
|
1863
|
+
] }) }),
|
|
1864
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1865
|
+
"button",
|
|
1866
|
+
{
|
|
1867
|
+
disabled: yearSelected === years.length - 1,
|
|
1868
|
+
type: "button",
|
|
1869
|
+
className: `yr3MonthSelector--year-button-next ${yearSelected === years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
|
|
1870
|
+
onClick: () => setYearSelected(yearSelected + 1),
|
|
1871
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconRight, { width: 20, height: 30, stroke: "currentColor" })
|
|
1872
|
+
}
|
|
1873
|
+
)
|
|
1874
|
+
]
|
|
1875
|
+
}
|
|
1876
|
+
),
|
|
1840
1877
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "yr3MonthSelector--months", children: data.months.map((m) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1841
1878
|
"button",
|
|
1842
1879
|
{
|
|
1843
1880
|
type: "button",
|
|
1881
|
+
style: properties?.text?.button,
|
|
1844
1882
|
disabled: m.disabled,
|
|
1845
1883
|
className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month-disabled" : ""}`,
|
|
1846
1884
|
onClick: () => {
|
|
1847
1885
|
setValueState(`${m.value}-${years[yearSelected]}`);
|
|
1848
1886
|
setOpen(false);
|
|
1849
1887
|
},
|
|
1850
|
-
children: m.label
|
|
1888
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
|
|
1851
1889
|
},
|
|
1852
1890
|
"month-" + m.value
|
|
1853
1891
|
)) })
|
package/dist/index.d.cts
CHANGED
|
@@ -1437,6 +1437,14 @@ type MonthSelectorProps = {
|
|
|
1437
1437
|
svg?: React$1.CSSProperties;
|
|
1438
1438
|
color?: keyof Theme['colors'];
|
|
1439
1439
|
};
|
|
1440
|
+
text?: Omit<TextProps, 'children'> & {
|
|
1441
|
+
button?: React$1.CSSProperties;
|
|
1442
|
+
};
|
|
1443
|
+
container?: {
|
|
1444
|
+
color?: keyof Theme['colors'];
|
|
1445
|
+
ui?: UIProps;
|
|
1446
|
+
style?: React$1.CSSProperties;
|
|
1447
|
+
};
|
|
1440
1448
|
};
|
|
1441
1449
|
};
|
|
1442
1450
|
declare const MonthSelector: React$1.FC<MonthSelectorProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1437,6 +1437,14 @@ type MonthSelectorProps = {
|
|
|
1437
1437
|
svg?: React$1.CSSProperties;
|
|
1438
1438
|
color?: keyof Theme['colors'];
|
|
1439
1439
|
};
|
|
1440
|
+
text?: Omit<TextProps, 'children'> & {
|
|
1441
|
+
button?: React$1.CSSProperties;
|
|
1442
|
+
};
|
|
1443
|
+
container?: {
|
|
1444
|
+
color?: keyof Theme['colors'];
|
|
1445
|
+
ui?: UIProps;
|
|
1446
|
+
style?: React$1.CSSProperties;
|
|
1447
|
+
};
|
|
1440
1448
|
};
|
|
1441
1449
|
};
|
|
1442
1450
|
declare const MonthSelector: React$1.FC<MonthSelectorProps>;
|
package/dist/index.js
CHANGED
|
@@ -1604,6 +1604,23 @@ var monthSelectorIconVariants = createVariants({
|
|
|
1604
1604
|
}
|
|
1605
1605
|
}
|
|
1606
1606
|
});
|
|
1607
|
+
var monthSelectorContainerVariants = createVariants({
|
|
1608
|
+
base: "yr3MonthSelector--year-options",
|
|
1609
|
+
variants: {
|
|
1610
|
+
color: {
|
|
1611
|
+
primary: "yr3MonthSelector--icon-color-primary",
|
|
1612
|
+
secondary: "yr3MonthSelector--icon-color-secondary",
|
|
1613
|
+
success: "yr3MonthSelector--icon-color-success",
|
|
1614
|
+
text: "yr3MonthSelector--icon-color-text",
|
|
1615
|
+
disabled: "yr3MonthSelector--icon-color-disabled",
|
|
1616
|
+
background: "yr3MonthSelector--icon-color-background",
|
|
1617
|
+
error: "yr3MonthSelector--icon-color-error",
|
|
1618
|
+
warning: "yr3MonthSelector--icon-color-warning",
|
|
1619
|
+
info: "yr3MonthSelector--icon-color-info",
|
|
1620
|
+
common: "yr3MonthSelector--icon-color-common"
|
|
1621
|
+
}
|
|
1622
|
+
}
|
|
1623
|
+
});
|
|
1607
1624
|
|
|
1608
1625
|
// src/Icons/IconRight.tsx
|
|
1609
1626
|
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
@@ -1647,16 +1664,29 @@ var initialPropsComponent3 = {
|
|
|
1647
1664
|
height: 20
|
|
1648
1665
|
},
|
|
1649
1666
|
component: void 0
|
|
1667
|
+
},
|
|
1668
|
+
text: {
|
|
1669
|
+
variant: "caption",
|
|
1670
|
+
color: "primary",
|
|
1671
|
+
ui: {},
|
|
1672
|
+
style: {},
|
|
1673
|
+
button: {}
|
|
1674
|
+
},
|
|
1675
|
+
container: {
|
|
1676
|
+
color: "primary",
|
|
1677
|
+
ui: {},
|
|
1678
|
+
style: {}
|
|
1650
1679
|
}
|
|
1651
1680
|
};
|
|
1652
1681
|
var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent, years, language, formatMonth = "MMM", monthsDisabled }) => {
|
|
1653
1682
|
const [open, setOpen] = React10.useState(false);
|
|
1654
1683
|
const [valueState, setValueState] = React10.useState(value || defaultValue || null);
|
|
1655
|
-
const [yearSelected, setYearSelected] = React10.useState(0);
|
|
1684
|
+
const [yearSelected, setYearSelected] = React10.useState(years.findIndex((y) => y === year) || 0);
|
|
1656
1685
|
const ref = React10.useRef(null);
|
|
1657
1686
|
useClickAway(ref, () => setOpen(false));
|
|
1658
1687
|
const properties = mergeDeep(initialPropsComponent3, propsComponent || {});
|
|
1659
1688
|
const iconClasses = monthSelectorIconVariants({ color: properties?.icon?.color });
|
|
1689
|
+
const containerClasses = monthSelectorContainerVariants({ color: properties?.container?.color });
|
|
1660
1690
|
const data = React10.useMemo(() => getMonthCalendarProps({ year, month, years, language, formatMonth, monthsDisabled }), [year, month, years, language, formatMonth, monthsDisabled]);
|
|
1661
1691
|
return /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector", ref, children: [
|
|
1662
1692
|
/* @__PURE__ */ jsx24(
|
|
@@ -1697,34 +1727,42 @@ var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent,
|
|
|
1697
1727
|
style: composeStyles(properties?.wrapper?.ui, properties?.wrapper?.style),
|
|
1698
1728
|
"data-testid": "yr3MonthSelector--wrapper",
|
|
1699
1729
|
children: /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector--component", children: [
|
|
1700
|
-
/* @__PURE__ */ jsxs6(
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1730
|
+
/* @__PURE__ */ jsxs6(
|
|
1731
|
+
"div",
|
|
1732
|
+
{
|
|
1733
|
+
className: containerClasses,
|
|
1734
|
+
style: composeStyles(properties?.container?.ui, properties?.container?.style),
|
|
1735
|
+
children: [
|
|
1736
|
+
/* @__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" }) }),
|
|
1737
|
+
/* @__PURE__ */ jsx24("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ jsxs6(Text, { variant: "body1", color: "primary", children: [
|
|
1738
|
+
years[yearSelected],
|
|
1739
|
+
" "
|
|
1740
|
+
] }) }),
|
|
1741
|
+
/* @__PURE__ */ jsx24(
|
|
1742
|
+
"button",
|
|
1743
|
+
{
|
|
1744
|
+
disabled: yearSelected === years.length - 1,
|
|
1745
|
+
type: "button",
|
|
1746
|
+
className: `yr3MonthSelector--year-button-next ${yearSelected === years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
|
|
1747
|
+
onClick: () => setYearSelected(yearSelected + 1),
|
|
1748
|
+
children: /* @__PURE__ */ jsx24(IconRight, { width: 20, height: 30, stroke: "currentColor" })
|
|
1749
|
+
}
|
|
1750
|
+
)
|
|
1751
|
+
]
|
|
1752
|
+
}
|
|
1753
|
+
),
|
|
1717
1754
|
/* @__PURE__ */ jsx24("div", { className: "yr3MonthSelector--months", children: data.months.map((m) => /* @__PURE__ */ jsx24(
|
|
1718
1755
|
"button",
|
|
1719
1756
|
{
|
|
1720
1757
|
type: "button",
|
|
1758
|
+
style: properties?.text?.button,
|
|
1721
1759
|
disabled: m.disabled,
|
|
1722
1760
|
className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month-disabled" : ""}`,
|
|
1723
1761
|
onClick: () => {
|
|
1724
1762
|
setValueState(`${m.value}-${years[yearSelected]}`);
|
|
1725
1763
|
setOpen(false);
|
|
1726
1764
|
},
|
|
1727
|
-
children: m.label
|
|
1765
|
+
children: /* @__PURE__ */ jsx24(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
|
|
1728
1766
|
},
|
|
1729
1767
|
"month-" + m.value
|
|
1730
1768
|
)) })
|