@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/YearMonthPicker/YearMonthPicker.js

@@ -0,0 +1,210 @@
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../SelectItem/SelectItem.js";
+import n from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import r from "../../internal/getNatureFromMessages/getNatureFromMessages.js";
+import { Button as i, CalendarIcon as a, ListBox as o, Popover as s } from "./YearMonthPicker.styled.js";
+import { useResizeObserver as c } from "../../internal/useResizeObserver/useResizeObserver.js";
+import l from "../../internal/generateYearsArray/generateYearsArray.js";
+import u, { useCallback as d, useId as f, useRef as p, useState as m } from "react";
+import { DialogTrigger as h } from "react-aria-components";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region packages/components/YearMonthPicker/YearMonthPicker.tsx
+var v = u.forwardRef((u, v) => {
+	let x = f(), S = u.id || x, C = u["aria-label"] ?? String(u.label), [w, T] = m(!1), [E, D] = m(!1), O = r({
+		nature: u.nature,
+		successHelperText: u.successHelperText,
+		errorHelperText: u.errorHelperText,
+		warningHelperText: u.warningHelperText
+	}), k = e(y), A = b.find(({ id: e }) => e === u.value?.month)?.text, j = A ? k[A] : "", M = p(null), [N, P] = m(null), F = d(() => {
+		M.current && P(M.current.offsetWidth + "px");
+	}, [M]);
+	c({
+		ref: M,
+		onResize: F
+	});
+	let I = l({
+		startYear: u.firstYear ?? 2e3,
+		endYear: u.lastYear ?? 2050,
+		sortYears: u.sortYears
+	});
+	return /* @__PURE__ */ g(n, {
+		...u.wrapperProps,
+		htmlForId: S,
+		label: u.label,
+		labelIconRight: u.labelIconRight,
+		labelIconRightTooltip: u.labelIconRightTooltip,
+		helperTextIcon: u.helperTextIcon,
+		helperText: u.helperText,
+		errorHelperText: u.errorHelperText,
+		errorHelperTextIcon: u.errorHelperTextIcon,
+		successHelperText: u.successHelperText,
+		successHelperTextIcon: u.successHelperTextIcon,
+		warningHelperText: u.warningHelperText,
+		warningHelperTextIcon: u.warningHelperTextIcon,
+		required: u.required,
+		orientation: u.orientation,
+		ref: v,
+		children: /* @__PURE__ */ _(h, { children: [
+			/* @__PURE__ */ _(i, {
+				...u.buttonProps,
+				type: "button",
+				ref: M,
+				id: S,
+				"aria-label": `${k.open} ${C}`,
+				"data-nature": O,
+				"data-fullwidth": u.fullWidth,
+				isDisabled: u.disabled,
+				onPress: () => {
+					u.mode === "month" && T(!0), u.mode === "year" && D(!0), u.mode === "month-year" && T(!0);
+				},
+				children: [
+					j && j,
+					j && u.value?.year && " ",
+					u.value?.year && u.value.year,
+					/* @__PURE__ */ g(a, {
+						name: u.inputIcon ?? "calendar_today",
+						"data-disabled": u.disabled
+					})
+				]
+			}),
+			(u.mode === "month" || u.mode === "month-year") && /* @__PURE__ */ g(s, {
+				offset: 4,
+				placement: "bottom",
+				isOpen: w,
+				onOpenChange: T,
+				children: /* @__PURE__ */ g(o, {
+					"aria-label": `${k.monthSelectionFor} ${C}`,
+					selectionMode: "single",
+					selectedKeys: u.value?.month ? [u.value.month] : [],
+					onSelectionChange: (e) => {
+						if (e === "all") return;
+						if (e.size === 0) return u.mode === "month-year" && D(!0), T(!1);
+						let [t] = e;
+						u.mode === "month" && u.onChange({ month: t?.toString() }), u.mode === "month-year" && (u.onChange({
+							month: t?.toString(),
+							year: u.value?.year
+						}), D(!0)), T(!1);
+					},
+					style: { "--trigger-width": N },
+					"data-tall": u.tallDropdown || void 0,
+					children: b.map(({ id: e, text: n }) => /* @__PURE__ */ g(t, {
+						text: k[n],
+						id: e
+					}, e))
+				})
+			}),
+			(u.mode === "year" || u.mode === "month-year") && /* @__PURE__ */ g(s, {
+				offset: 4,
+				placement: "bottom",
+				isOpen: E,
+				onOpenChange: D,
+				children: /* @__PURE__ */ g(o, {
+					"aria-label": `${k.yearSelectionFor} ${C}`,
+					selectionMode: "single",
+					selectedKeys: u.value?.year ? [u.value.year] : [],
+					onSelectionChange: (e) => {
+						if (e === "all") return;
+						if (e.size === 0) return D(!1);
+						let [t] = e;
+						u.mode === "year" && u.onChange({ year: t?.toString() }), u.mode === "month-year" && u.onChange({
+							month: u.value?.month,
+							year: t?.toString()
+						}), D(!1);
+					},
+					style: { "--trigger-width": N },
+					"data-tall": u.tallDropdown || void 0,
+					children: I.map((e) => /* @__PURE__ */ g(t, {
+						text: e,
+						id: e
+					}, e))
+				})
+			})
+		] })
+	});
+}), y = {
+	en: {
+		open: "Open:",
+		january: "January",
+		february: "February",
+		march: "March",
+		april: "April",
+		may: "May",
+		june: "June",
+		july: "July",
+		august: "August",
+		september: "September",
+		october: "October",
+		november: "November",
+		december: "December",
+		monthSelectionFor: "Month selection for",
+		yearSelectionFor: "Year selection for"
+	},
+	fr: {
+		open: "Ouvrir:",
+		january: "Janvier",
+		february: "Février",
+		march: "Mars",
+		april: "Avril",
+		may: "Mai",
+		june: "Juin",
+		july: "Juillet",
+		august: "Août",
+		september: "Septembre",
+		october: "Octobre",
+		november: "Novembre",
+		december: "Décembre",
+		monthSelectionFor: "Sélection du mois pour",
+		yearSelectionFor: "Sélection de l'année pour"
+	}
+}, b = [
+	{
+		id: "01",
+		text: "january"
+	},
+	{
+		id: "02",
+		text: "february"
+	},
+	{
+		id: "03",
+		text: "march"
+	},
+	{
+		id: "04",
+		text: "april"
+	},
+	{
+		id: "05",
+		text: "may"
+	},
+	{
+		id: "06",
+		text: "june"
+	},
+	{
+		id: "07",
+		text: "july"
+	},
+	{
+		id: "08",
+		text: "august"
+	},
+	{
+		id: "09",
+		text: "september"
+	},
+	{
+		id: "10",
+		text: "october"
+	},
+	{
+		id: "11",
+		text: "november"
+	},
+	{
+		id: "12",
+		text: "december"
+	}
+];
+//#endregion
+export { v as default };

package/dist/components/YearMonthPicker/YearMonthPicker.styled.js

@@ -0,0 +1,91 @@
+import e from "../Icon/Icon.js";
+import { baseDropdownStyles as t } from "../Dropdown/Dropdown.styled.js";
+import { styled as n } from "styled-components";
+import { Button as r, ListBox as i, Popover as a } from "react-aria-components";
+//#region packages/components/YearMonthPicker/YearMonthPicker.styled.ts
+var o = n(r)`
+  position: relative;
+  display: inline-flex;
+  justify-content: space-between;
+  min-width: 170px;
+  align-items: center;
+  column-gap: var(--spacing-xs);
+  border: none;
+  background-color: var(--color-content-neutral-primary-reversed);
+  outline: 1px solid var(--color-content-neutral-stroke);
+  outline-offset: -1px;
+  border-radius: var(--radius-rounded);
+  padding: var(--spacing-xs);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  color: var(--color-content-neutral-primary);
+  cursor: pointer;
+  appearance: none;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+    min-width: auto;
+  }
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-content-neutral-stroke);
+  }
+
+  &[data-state="open"]::before,
+  &:focus::before,
+  &[data-force-focus]::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    bottom: -2px;
+    left: -2px;
+    outline: 2px solid var(--color-background-highlight-focus);
+    border-radius: var(--radius-rounded);
+  }
+
+  &[data-placeholder] {
+    color: var(--color-content-neutral-tertiary);
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    background: var(--color-content-neutral-tertiary);
+    color: var(--color-content-neutral-secondary);
+    cursor: not-allowed;
+  }
+
+  &[data-nature="negative"] {
+    outline-color: var(--color-content-message-negative);
+  }
+
+  &[data-nature="positive"] {
+    outline-color: var(--color-content-message-positive-darker);
+  }
+
+  &[data-nature="warning"] {
+    outline-color: var(--color-content-message-warning-darker);
+  }
+`, s = n(e)`
+  flex: none;
+  font-size: var(--text-font-size-xl);
+  color: var(--color-content-neutral-tertiary);
+  margin-left: auto;
+
+  &[data-disabled="true"] {
+    color: var(--color-content-neutral-secondary);
+  }
+`, c = a, l = n(i)`
+  ${t};
+  z-index: var(--z-index-dropdown);
+  outline: none;
+  width: var(--trigger-width);
+`;
+//#endregion
+export { o as Button, s as CalendarIcon, l as ListBox, c as Popover };