@simplybusiness/mobius-datepicker 3.11.0
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/CHANGELOG.md +12 -0
- package/dist/cjs/components/DatePicker/Calendar.d.ts +5 -0
- package/dist/cjs/components/DatePicker/Calendar.js +21 -0
- package/dist/cjs/components/DatePicker/Calendar.js.map +1 -0
- package/dist/cjs/components/DatePicker/CalendarButton.d.ts +13 -0
- package/dist/cjs/components/DatePicker/CalendarButton.js +29 -0
- package/dist/cjs/components/DatePicker/CalendarButton.js.map +1 -0
- package/dist/cjs/components/DatePicker/CalendarCell.d.ts +6 -0
- package/dist/cjs/components/DatePicker/CalendarCell.js +27 -0
- package/dist/cjs/components/DatePicker/CalendarCell.js.map +1 -0
- package/dist/cjs/components/DatePicker/CalendarGrid.d.ts +7 -0
- package/dist/cjs/components/DatePicker/CalendarGrid.js +35 -0
- package/dist/cjs/components/DatePicker/CalendarGrid.js.map +1 -0
- package/dist/cjs/components/DatePicker/DateField.d.ts +6 -0
- package/dist/cjs/components/DatePicker/DateField.js +38 -0
- package/dist/cjs/components/DatePicker/DateField.js.map +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.d.ts +7 -0
- package/dist/cjs/components/DatePicker/DatePicker.js +51 -0
- package/dist/cjs/components/DatePicker/DatePicker.js.map +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.stories.d.ts +16 -0
- package/dist/cjs/components/DatePicker/DatePicker.stories.js +28 -0
- package/dist/cjs/components/DatePicker/DatePicker.stories.js.map +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.test.d.ts +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.test.js +14 -0
- package/dist/cjs/components/DatePicker/DatePicker.test.js.map +1 -0
- package/dist/cjs/components/DatePicker/DateSegment.d.ts +6 -0
- package/dist/cjs/components/DatePicker/DateSegment.js +25 -0
- package/dist/cjs/components/DatePicker/DateSegment.js.map +1 -0
- package/dist/cjs/components/DatePicker/Popover.d.ts +8 -0
- package/dist/cjs/components/DatePicker/Popover.js +49 -0
- package/dist/cjs/components/DatePicker/Popover.js.map +1 -0
- package/dist/cjs/components/DatePicker/index.d.ts +2 -0
- package/dist/cjs/components/DatePicker/index.js +21 -0
- package/dist/cjs/components/DatePicker/index.js.map +1 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +18 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/tsconfig.tsbuildinfo +1 -0
- package/dist/esm/components/DatePicker/Calendar.js +17 -0
- package/dist/esm/components/DatePicker/Calendar.js.map +1 -0
- package/dist/esm/components/DatePicker/CalendarButton.js +23 -0
- package/dist/esm/components/DatePicker/CalendarButton.js.map +1 -0
- package/dist/esm/components/DatePicker/CalendarCell.js +20 -0
- package/dist/esm/components/DatePicker/CalendarCell.js.map +1 -0
- package/dist/esm/components/DatePicker/CalendarGrid.js +31 -0
- package/dist/esm/components/DatePicker/CalendarGrid.js.map +1 -0
- package/dist/esm/components/DatePicker/DateField.js +34 -0
- package/dist/esm/components/DatePicker/DateField.js.map +1 -0
- package/dist/esm/components/DatePicker/DatePicker.js +44 -0
- package/dist/esm/components/DatePicker/DatePicker.js.map +1 -0
- package/dist/esm/components/DatePicker/DateSegment.js +18 -0
- package/dist/esm/components/DatePicker/DateSegment.js.map +1 -0
- package/dist/esm/components/DatePicker/Popover.js +45 -0
- package/dist/esm/components/DatePicker/Popover.js.map +1 -0
- package/dist/esm/components/DatePicker/index.js +3 -0
- package/dist/esm/components/DatePicker/index.js.map +1 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -0
- package/package.json +100 -0
- package/src/components/DatePicker/Calendar.tsx +48 -0
- package/src/components/DatePicker/CalendarButton.tsx +58 -0
- package/src/components/DatePicker/CalendarCell.tsx +48 -0
- package/src/components/DatePicker/CalendarGrid.tsx +60 -0
- package/src/components/DatePicker/DateField.tsx +45 -0
- package/src/components/DatePicker/DatePicker.mdx +508 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +32 -0
- package/src/components/DatePicker/DatePicker.test.tsx +16 -0
- package/src/components/DatePicker/DatePicker.tsx +101 -0
- package/src/components/DatePicker/DateSegment.tsx +34 -0
- package/src/components/DatePicker/Popover.tsx +61 -0
- package/src/components/DatePicker/index.tsx +2 -0
- package/src/index.tsx +1 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file, or link in [archives](#archived).
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## Unreleased
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
|
|
12
|
+
- Move DatePicker component under `@simplybusiness/mobius-datepicker`
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { CalendarProps as AriaCalendarProps } from "@react-aria/calendar";
|
|
2
|
+
import { DateValue } from "@internationalized/date";
|
|
3
|
+
export interface CalendarProps extends AriaCalendarProps<DateValue> {
|
|
4
|
+
}
|
|
5
|
+
export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Calendar = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const calendar_1 = require("@react-stately/calendar");
|
|
7
|
+
const calendar_2 = require("@react-aria/calendar");
|
|
8
|
+
const i18n_1 = require("@react-aria/i18n");
|
|
9
|
+
const date_1 = require("@internationalized/date");
|
|
10
|
+
const visually_hidden_1 = require("@react-aria/visually-hidden");
|
|
11
|
+
const CalendarGrid_1 = require("./CalendarGrid");
|
|
12
|
+
const CalendarButton_1 = require("./CalendarButton");
|
|
13
|
+
function Calendar(props) {
|
|
14
|
+
const { locale } = (0, i18n_1.useLocale)();
|
|
15
|
+
const state = (0, calendar_1.useCalendarState)(Object.assign(Object.assign({}, props), { locale,
|
|
16
|
+
createCalendar: date_1.createCalendar }));
|
|
17
|
+
const { calendarProps, prevButtonProps, nextButtonProps, title } = (0, calendar_2.useCalendar)(props, state);
|
|
18
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, calendarProps, { className: "mobius/Calendar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mobius/CalendarHeader", children: [(0, jsx_runtime_1.jsx)(CalendarButton_1.CalendarButton, Object.assign({ className: "mobius/CalendarPreviousButton" }, prevButtonProps, { children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: "<" }) })), (0, jsx_runtime_1.jsx)("h2", { className: "mobius/CalendarTitle", children: title }), (0, jsx_runtime_1.jsx)(CalendarButton_1.CalendarButton, Object.assign({ className: "mobius/CalendarNextButton" }, nextButtonProps, { children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: ">" }) }))] }), (0, jsx_runtime_1.jsx)(CalendarGrid_1.CalendarGrid, { state: state })] })));
|
|
19
|
+
}
|
|
20
|
+
exports.Calendar = Calendar;
|
|
21
|
+
//# sourceMappingURL=Calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/Calendar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,sDAA2D;AAC3D,mDAG8B;AAC9B,2CAA6C;AAC7C,kDAAoE;AACpE,iEAA6D;AAE7D,iDAA8C;AAC9C,qDAAkD;AAIlD,SAAgB,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,gBAAS,GAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,IAAA,2BAAgB,kCACzB,KAAK,KACR,MAAM;QACN,cAAc,EAAd,qBAAc,IACd,CAAC;IAEH,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,GAC9D,IAAA,sBAAW,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE5B,OAAO,CACL,iDAAS,aAAa,IAAE,SAAS,EAAC,iBAAiB,aACjD,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,+BAAc,kBACb,SAAS,EAAC,+BAA+B,IACrC,eAAe,cAEnB,uBAAC,gCAAc,oBAAsB,IACtB,EACjB,+BAAI,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAM,EACjD,uBAAC,+BAAc,kBACb,SAAS,EAAC,2BAA2B,IACjC,eAAe,cAEnB,uBAAC,gCAAc,oBAAsB,IACtB,IACb,EACN,uBAAC,2BAAY,IAAC,KAAK,EAAE,KAAK,GAAI,KAC1B,CACP,CAAC;AACJ,CAAC;AA/BD,4BA+BC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Ref, RefAttributes, ReactNode } from "react";
|
|
2
|
+
import { HoverProps } from "@react-aria/interactions";
|
|
3
|
+
import type { AriaButtonProps } from "@react-types/button";
|
|
4
|
+
import { DOMProps } from "@react-types/shared";
|
|
5
|
+
import { ForwardedRefComponent } from "@simplybusiness/mobius";
|
|
6
|
+
export type ButtonElementType = HTMLButtonElement;
|
|
7
|
+
export interface ButtonProps extends AriaButtonProps<"button" | "a" | "span">, DOMProps, HoverProps, RefAttributes<ButtonElementType> {
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export type ButtonRef = Ref<ButtonElementType>;
|
|
12
|
+
declare const CalendarButton: ForwardedRefComponent<ButtonProps, ButtonElementType>;
|
|
13
|
+
export { CalendarButton };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.CalendarButton = void 0;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const react_1 = require("react");
|
|
10
|
+
const button_1 = require("@react-aria/button");
|
|
11
|
+
const interactions_1 = require("@react-aria/interactions");
|
|
12
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
13
|
+
const focus_1 = require("@react-aria/focus");
|
|
14
|
+
const CalendarButton = (0, react_1.forwardRef)((props, ref) => {
|
|
15
|
+
const refObj = (0, react_1.useRef)(null);
|
|
16
|
+
const { hoverProps, isHovered } = (0, interactions_1.useHover)(props);
|
|
17
|
+
const { buttonProps } = (0, button_1.useButton)(props, refObj);
|
|
18
|
+
const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)(props);
|
|
19
|
+
// Reshape class name and apply to outer element
|
|
20
|
+
const classes = (0, clsx_1.default)("mobius", "mobius/CalendarButton", {
|
|
21
|
+
"--is-disabled": props.isDisabled,
|
|
22
|
+
"--is-hovered": isHovered,
|
|
23
|
+
"--is-focused": isFocusVisible,
|
|
24
|
+
}, props.className);
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", ref: ref }, buttonProps, hoverProps, focusProps, { className: classes, children: props.children })));
|
|
26
|
+
});
|
|
27
|
+
exports.CalendarButton = CalendarButton;
|
|
28
|
+
CalendarButton.displayName = "CalendarButton";
|
|
29
|
+
//# sourceMappingURL=CalendarButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarButton.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/CalendarButton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;AAEb,iCAA0E;AAC1E,+CAA+C;AAC/C,2DAAgE;AAGhE,gDAAwB;AACxB,6CAAiD;AAgBjD,MAAM,cAAc,GAClB,IAAA,kBAAU,EAAC,CAAC,KAAkB,EAAE,GAAc,EAAE,EAAE;IAChD,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,uBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAS,EAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC;IAE3D,gDAAgD;IAChD,MAAM,OAAO,GAAG,IAAA,cAAI,EAClB,QAAQ,EACR,uBAAuB,EACvB;QACE,eAAe,EAAE,KAAK,CAAC,UAAU;QACjC,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,cAAc;KAC/B,EACD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,iDACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,IACJ,WAAW,EACX,UAAU,EACV,UAAU,IACd,SAAS,EAAE,OAAO,YAEjB,KAAK,CAAC,QAAQ,IACR,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAGI,wCAAc;AADvB,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { AriaCalendarCellProps } from "@react-aria/calendar";
|
|
2
|
+
import { CalendarState } from "@react-stately/calendar";
|
|
3
|
+
export interface CalendarCellProps extends AriaCalendarCellProps {
|
|
4
|
+
state: CalendarState;
|
|
5
|
+
}
|
|
6
|
+
export declare function CalendarCell({ state, date }: CalendarCellProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.CalendarCell = void 0;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const calendar_1 = require("@react-aria/calendar");
|
|
10
|
+
const focus_1 = require("@react-aria/focus");
|
|
11
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
12
|
+
const react_1 = require("react");
|
|
13
|
+
function CalendarCell({ state, date }) {
|
|
14
|
+
const ref = (0, react_1.useRef)(null);
|
|
15
|
+
const { cellProps, buttonProps, isSelected, isOutsideVisibleRange, isDisabled, isUnavailable, formattedDate, } = (0, calendar_1.useCalendarCell)({ date }, state, ref);
|
|
16
|
+
const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)();
|
|
17
|
+
const classes = (0, clsx_1.default)("mobius/CalendarCell", {
|
|
18
|
+
"--is-selected": isSelected,
|
|
19
|
+
"--is-outside-visible-range": isOutsideVisibleRange,
|
|
20
|
+
"--is-disabled": isDisabled,
|
|
21
|
+
"--is-unavailable": isUnavailable,
|
|
22
|
+
"--is-focused": isFocusVisible,
|
|
23
|
+
});
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)("td", Object.assign({ className: classes }, cellProps, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, buttonProps, { ref: ref, hidden: isOutsideVisibleRange, className: "mobius/CalendarCellInner" }, focusProps, { children: formattedDate })) })));
|
|
25
|
+
}
|
|
26
|
+
exports.CalendarCell = CalendarCell;
|
|
27
|
+
//# sourceMappingURL=CalendarCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarCell.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/CalendarCell.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;AAEb,mDAA8E;AAC9E,6CAAiD;AAEjD,gDAAwB;AACxB,iCAA+B;AAM/B,SAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAqB;IAC7D,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EACJ,SAAS,EACT,WAAW,EACX,UAAU,EACV,qBAAqB,EACrB,UAAU,EACV,aAAa,EACb,aAAa,GACd,GAAG,IAAA,0BAAe,EAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAE1C,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,qBAAqB,EAAE;QAC1C,eAAe,EAAE,UAAU;QAC3B,4BAA4B,EAAE,qBAAqB;QACnD,eAAe,EAAE,UAAU;QAC3B,kBAAkB,EAAE,aAAa;QACjC,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,OAAO,CACL,6CAAI,SAAS,EAAE,OAAO,IAAM,SAAS,cACnC,gDACM,WAAW,IACf,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAC,0BAA0B,IAChC,UAAU,cAEb,aAAa,IACV,IACH,CACN,CAAC;AACJ,CAAC;AAnCD,oCAmCC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { AriaCalendarGridProps, CalendarProps } from "@react-aria/calendar";
|
|
2
|
+
import { CalendarDate } from "@internationalized/date";
|
|
3
|
+
import { CalendarState } from "@react-stately/calendar";
|
|
4
|
+
export interface CalendarGridProps extends AriaCalendarGridProps, CalendarProps<CalendarDate> {
|
|
5
|
+
state: CalendarState;
|
|
6
|
+
}
|
|
7
|
+
export declare function CalendarGrid({ state, ...props }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
8
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
10
|
+
t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.CalendarGrid = void 0;
|
|
16
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
|
+
const calendar_1 = require("@react-aria/calendar");
|
|
18
|
+
const date_1 = require("@internationalized/date");
|
|
19
|
+
const i18n_1 = require("@react-aria/i18n");
|
|
20
|
+
const CalendarCell_1 = require("./CalendarCell");
|
|
21
|
+
function CalendarGrid(_a) {
|
|
22
|
+
var { state } = _a, props = __rest(_a, ["state"]);
|
|
23
|
+
const { locale } = (0, i18n_1.useLocale)();
|
|
24
|
+
const { gridProps, headerProps, weekDays } = (0, calendar_1.useCalendarGrid)(props, state);
|
|
25
|
+
// Find the start date of the grid, which is the beginning
|
|
26
|
+
// of the week the month starts in. Also get the number of
|
|
27
|
+
// weeks in the month so we can render the proper number of rows.
|
|
28
|
+
const monthStart = (0, date_1.startOfWeek)(state.visibleRange.start, locale);
|
|
29
|
+
const weeksInMonth = (0, date_1.getWeeksInMonth)(state.visibleRange.start, locale);
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "mobius/CalendarGrid" }, gridProps, { children: [(0, jsx_runtime_1.jsx)("thead", Object.assign({}, headerProps, { className: "mobius/CalendarGridHead", children: (0, jsx_runtime_1.jsx)("tr", { children: weekDays.map((day, index) => (
|
|
31
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
32
|
+
(0, jsx_runtime_1.jsx)("th", { className: "mobius/CalendarGridHeadCell", children: day }, index))) }) })), (0, jsx_runtime_1.jsx)("tbody", { className: "mobius/CalendarGridBody", children: [...new Array(weeksInMonth).keys()].map(weekIndex => ((0, jsx_runtime_1.jsx)("tr", { children: [...new Array(7).keys()].map(dayIndex => ((0, jsx_runtime_1.jsx)(CalendarCell_1.CalendarCell, { state: state, date: monthStart.add({ weeks: weekIndex, days: dayIndex }) }, dayIndex))) }, weekIndex))) })] })));
|
|
33
|
+
}
|
|
34
|
+
exports.CalendarGrid = CalendarGrid;
|
|
35
|
+
//# sourceMappingURL=CalendarGrid.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarGrid.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/CalendarGrid.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,mDAI8B;AAC9B,kDAIiC;AACjC,2CAA6C;AAE7C,iDAA8C;AAQ9C,SAAgB,YAAY,CAAC,EAAsC;QAAtC,EAAE,KAAK,OAA+B,EAA1B,KAAK,cAAjB,SAAmB,CAAF;IAC5C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,gBAAS,GAAE,CAAC;IAC/B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAA,0BAAe,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE3E,0DAA0D;IAC1D,0DAA0D;IAC1D,iEAAiE;IACjE,MAAM,UAAU,GAAG,IAAA,kBAAW,EAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,IAAA,sBAAe,EAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAEvE,OAAO,CACL,iDAAO,SAAS,EAAC,qBAAqB,IAAK,SAAS,eAClD,kDAAW,WAAW,IAAE,SAAS,EAAC,yBAAyB,YACzD,yCACG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC;oBAC5B,oDAAoD;oBACpD,+BAAI,SAAS,EAAC,6BAA6B,YACxC,GAAG,IAD2C,KAAK,CAEjD,CACN,CAAC,GACC,IACC,EACR,kCAAO,SAAS,EAAC,yBAAyB,YACvC,CAAC,GAAG,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,CACpD,yCACG,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CACxC,uBAAC,2BAAY,IAEX,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,IAFrD,QAAQ,CAGb,CACH,CAAC,IAPK,SAAS,CAQb,CACN,CAAC,GACI,KACF,CACT,CAAC;AACJ,CAAC;AArCD,oCAqCC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { AriaDateFieldProps } from "@react-aria/datepicker";
|
|
2
|
+
import { DateValue } from "@internationalized/date";
|
|
3
|
+
export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
|
|
4
|
+
className: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function DateField(props: DateFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
8
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
10
|
+
t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.DateField = void 0;
|
|
16
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
|
+
const i18n_1 = require("@react-aria/i18n");
|
|
18
|
+
const datepicker_1 = require("@react-stately/datepicker");
|
|
19
|
+
const datepicker_2 = require("@react-aria/datepicker");
|
|
20
|
+
const date_1 = require("@internationalized/date");
|
|
21
|
+
const react_1 = require("react");
|
|
22
|
+
const DateSegment_1 = require("./DateSegment");
|
|
23
|
+
function DateField(props) {
|
|
24
|
+
const { label, className } = props;
|
|
25
|
+
const { locale } = (0, i18n_1.useLocale)();
|
|
26
|
+
const state = (0, datepicker_1.useDateFieldState)(Object.assign(Object.assign({}, props), { locale,
|
|
27
|
+
createCalendar: date_1.createCalendar }));
|
|
28
|
+
const ref = (0, react_1.useRef)(null);
|
|
29
|
+
const { labelProps, fieldProps } = (0, datepicker_2.useDateField)(props, state, ref);
|
|
30
|
+
// ID is duplicated with DateFieldGroup - Spectrum bug?
|
|
31
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
32
|
+
const { id } = fieldProps, filteredFieldProps = __rest(fieldProps, ["id"]);
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("span", Object.assign({}, labelProps, { children: label })), (0, jsx_runtime_1.jsx)("div", Object.assign({}, filteredFieldProps, { ref: ref, className: "mobius/DateSegments", children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DateSegment_1.DateSegment
|
|
34
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
35
|
+
, { segment: segment, state: state }, i))) }))] }));
|
|
36
|
+
}
|
|
37
|
+
exports.DateField = DateField;
|
|
38
|
+
//# sourceMappingURL=DateField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DateField.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,2CAA6C;AAC7C,0DAA8D;AAC9D,uDAA0E;AAC1E,kDAAoE;AACpE,iCAA+B;AAC/B,+CAA4C;AAM5C,SAAgB,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACnC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,gBAAS,GAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,IAAA,8BAAiB,kCAC1B,KAAK,KACR,MAAM;QACN,cAAc,EAAd,qBAAc,IACd,CAAC;IAEH,MAAM,GAAG,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAA,yBAAY,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAEnE,uDAAuD;IACvD,6DAA6D;IAC7D,MAAM,EAAE,EAAE,KAA4B,UAAU,EAAjC,kBAAkB,UAAK,UAAU,EAA1C,MAA6B,CAAa,CAAC;IAEjD,OAAO,CACL,iCAAK,SAAS,EAAE,SAAS,aACvB,iDAAU,UAAU,cAAG,KAAK,IAAQ,EACpC,gDAAS,kBAAkB,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,qBAAqB,YACnE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAClC,uBAAC,yBAAW;gBACV,oDAAoD;oBAEpD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,IAFP,CAAC,CAGN,CACH,CAAC,IACE,IACF,CACP,CAAC;AACJ,CAAC;AA/BD,8BA+BC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { DatePickerStateOptions } from "@react-stately/datepicker";
|
|
2
|
+
import { AriaDatePickerProps } from "@react-aria/datepicker";
|
|
3
|
+
import { DateValue } from "@internationalized/date";
|
|
4
|
+
export interface DatePickerProps extends AriaDatePickerProps<DateValue>, DatePickerStateOptions<DateValue> {
|
|
5
|
+
label: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function DatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.DatePicker = void 0;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const datepicker_1 = require("@react-stately/datepicker");
|
|
10
|
+
const datepicker_2 = require("@react-aria/datepicker");
|
|
11
|
+
const react_1 = require("react");
|
|
12
|
+
const overlays_1 = require("@react-aria/overlays");
|
|
13
|
+
const interactions_1 = require("@react-aria/interactions");
|
|
14
|
+
const focus_1 = require("@react-aria/focus");
|
|
15
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
16
|
+
const visually_hidden_1 = require("@react-aria/visually-hidden");
|
|
17
|
+
const mobius_1 = require("@simplybusiness/mobius");
|
|
18
|
+
const DateField_1 = require("./DateField");
|
|
19
|
+
const Popover_1 = require("./Popover");
|
|
20
|
+
const Calendar_1 = require("./Calendar");
|
|
21
|
+
function DatePicker(props) {
|
|
22
|
+
const { label, isRequired } = props;
|
|
23
|
+
const state = (0, datepicker_1.useDatePickerState)(props);
|
|
24
|
+
const ref = (0, react_1.useRef)(null);
|
|
25
|
+
const { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = (0, datepicker_2.useDatePicker)(props, state, ref);
|
|
26
|
+
const classes = (0, clsx_1.default)("mobius/DatePicker", {
|
|
27
|
+
"--is-valid": state.validationState === "valid",
|
|
28
|
+
"--is-invalid": state.validationState === "invalid",
|
|
29
|
+
"--is-required": typeof isRequired === "boolean" && isRequired,
|
|
30
|
+
"--is-optional": typeof isRequired === "boolean" && !isRequired,
|
|
31
|
+
});
|
|
32
|
+
const { hoverProps, isHovered } = (0, interactions_1.useHover)(Object.assign({}, props));
|
|
33
|
+
const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)(props);
|
|
34
|
+
const dateFieldGroupClasses = (0, clsx_1.default)("mobius/DateFieldGroup", {
|
|
35
|
+
"--is-hovered": isHovered,
|
|
36
|
+
"--is-focused": isFocusVisible,
|
|
37
|
+
});
|
|
38
|
+
const dateFieldClasses = (0, clsx_1.default)("mobius/DateField", {
|
|
39
|
+
"--is-hovered": isHovered,
|
|
40
|
+
"--is-focused": isFocusVisible,
|
|
41
|
+
});
|
|
42
|
+
const buttonClasses = (0, clsx_1.default)("mobius/DateFieldButton", {
|
|
43
|
+
"--is-hovered": isHovered,
|
|
44
|
+
"--is-focused": isFocusVisible,
|
|
45
|
+
});
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)(overlays_1.ModalProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: classes, style: { position: "relative" }, children: [(0, jsx_runtime_1.jsx)(mobius_1.Label, Object.assign({}, labelProps, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, hoverProps, focusProps, { ref: ref, className: dateFieldGroupClasses, children: [(0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, fieldProps, { className: dateFieldClasses })), (0, jsx_runtime_1.jsx)(mobius_1.Button, Object.assign({ variant: "secondary" }, buttonProps, { className: buttonClasses, children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: "Pick date" }) }))] })), state.isOpen && (
|
|
47
|
+
/* @ts-expect-error */
|
|
48
|
+
(0, jsx_runtime_1.jsx)(Popover_1.Popover, Object.assign({}, dialogProps, { isOpen: state.isOpen, onClose: () => state.setOpen(false), children: (0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)) })))] }) }));
|
|
49
|
+
}
|
|
50
|
+
exports.DatePicker = DatePicker;
|
|
51
|
+
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;AAEb,0DAGmC;AACnC,uDAA4E;AAC5E,iCAA+B;AAC/B,mDAAqD;AAErD,2DAAoD;AACpD,6CAAiD;AACjD,gDAAwB;AACxB,iEAA6D;AAC7D,mDAAuD;AACvD,2CAAwC;AACxC,uCAAoC;AACpC,yCAAsC;AAQtC,SAAgB,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,KAAK,GAAG,IAAA,+BAAkB,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,GACd,GAAG,IAAA,0BAAa,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAErC,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,mBAAmB,EAAE;QACxC,YAAY,EAAE,KAAK,CAAC,eAAe,KAAK,OAAO;QAC/C,cAAc,EAAE,KAAK,CAAC,eAAe,KAAK,SAAS;QACnD,eAAe,EAAE,OAAO,UAAU,KAAK,SAAS,IAAI,UAAU;QAC9D,eAAe,EAAE,OAAO,UAAU,KAAK,SAAS,IAAI,CAAC,UAAU;KAChE,CAAC,CAAC;IAEH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,uBAAQ,oBACrC,KAAK,EACR,CAAC;IAEH,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC;IAE3D,MAAM,qBAAqB,GAAG,IAAA,cAAI,EAAC,uBAAuB,EAAE;QAC1D,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,IAAA,cAAI,EAAC,kBAAkB,EAAE;QAChD,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAA,cAAI,EAAC,wBAAwB,EAAE;QACnD,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,wBAAa,cACZ,iCAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aACtD,uBAAC,cAAK,oBAAK,UAAU,cAAG,KAAK,IAAS,EACtC,iDACM,UAAU,EACV,UAAU,EACV,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,qBAAqB,aAEhC,uBAAC,qBAAS,oBAAK,UAAU,IAAE,SAAS,EAAE,gBAAgB,IAAI,EAE1D,uBAAC,eAAM,kBACL,OAAO,EAAC,WAAW,IACf,WAAW,IACf,SAAS,EAAE,aAAa,YAExB,uBAAC,gCAAc,4BAA2B,IACnC,KACL,EACL,KAAK,CAAC,MAAM,IAAI;gBACf,sBAAsB;gBACtB,uBAAC,iBAAO,oBACF,WAAW,IACf,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,YAEnC,uBAAC,mBAAQ,oBAAK,aAAa,EAAI,IACvB,CACX,IACG,GACQ,CACjB,CAAC;AACJ,CAAC;AA3ED,gCA2EC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Meta } from "@storybook/react";
|
|
2
|
+
import { DatePicker } from "./DatePicker";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof DatePicker;
|
|
6
|
+
argTypes: {
|
|
7
|
+
locale: {
|
|
8
|
+
control: {
|
|
9
|
+
type: string;
|
|
10
|
+
};
|
|
11
|
+
options: string[];
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|
|
16
|
+
export declare const Normal: Meta<typeof DatePicker>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Normal = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const date_1 = require("@internationalized/date");
|
|
6
|
+
const i18n_1 = require("@react-aria/i18n");
|
|
7
|
+
const DatePicker_1 = require("./DatePicker");
|
|
8
|
+
exports.default = {
|
|
9
|
+
title: "Forms/DatePicker",
|
|
10
|
+
component: DatePicker_1.DatePicker,
|
|
11
|
+
argTypes: {
|
|
12
|
+
locale: {
|
|
13
|
+
control: { type: "select" },
|
|
14
|
+
options: ["", "en-GB", "en-US"],
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
exports.Normal = {
|
|
19
|
+
render: (args) => ((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({ minValue: (0, date_1.parseDate)("2022-05-05") }, args))),
|
|
20
|
+
args: {
|
|
21
|
+
label: "Start date",
|
|
22
|
+
isRequired: false,
|
|
23
|
+
},
|
|
24
|
+
decorators: [
|
|
25
|
+
(Story, context) => ((0, jsx_runtime_1.jsx)(i18n_1.I18nProvider, { locale: context.allArgs.locale, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
|
|
26
|
+
],
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=DatePicker.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,kDAAoD;AACpD,2CAAgD;AAChD,6CAA2D;AAE3D,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,uBAAU;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;SAChC;KACF;CACF,CAAC;AAEW,QAAA,MAAM,GAA4B;IAC7C,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,CACjC,uBAAC,uBAAU,kBAAC,QAAQ,EAAE,IAAA,gBAAS,EAAC,YAAY,CAAC,IAAM,IAAI,EAAI,CAC5D;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,KAAK;KAClB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAClB,uBAAC,mBAAY,IAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,YAC1C,uBAAC,KAAK,KAAG,GACI,CAChB;KACF;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const react_1 = require("@testing-library/react");
|
|
5
|
+
const i18n_1 = require("@react-aria/i18n");
|
|
6
|
+
const date_1 = require("@internationalized/date");
|
|
7
|
+
const _1 = require(".");
|
|
8
|
+
describe("DatePicker", () => {
|
|
9
|
+
it("should render without errors", () => {
|
|
10
|
+
const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(i18n_1.I18nProvider, { locale: "en-GB", children: (0, jsx_runtime_1.jsx)(_1.DatePicker, { minValue: (0, date_1.parseDate)("2022-05-05"), label: "Start date" }) }));
|
|
11
|
+
expect(component).toBeTruthy();
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
//# sourceMappingURL=DatePicker.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.test.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.test.tsx"],"names":[],"mappings":";;;AACA,kDAAgD;AAChD,2CAAgD;AAChD,kDAAoD;AACpD,wBAA+B;AAE/B,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,SAAS,GAAG,IAAA,cAAM,EACtB,uBAAC,mBAAY,IAAC,MAAM,EAAC,OAAO,YAC1B,uBAAC,aAAU,IAAC,QAAQ,EAAE,IAAA,gBAAS,EAAC,YAAY,CAAC,EAAE,KAAK,EAAC,YAAY,GAAG,GACvD,CAChB,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { DateFieldState, DateSegment as DateSegmentType } from "@react-stately/datepicker";
|
|
2
|
+
export interface DateSegmentProps {
|
|
3
|
+
segment: DateSegmentType;
|
|
4
|
+
state: DateFieldState;
|
|
5
|
+
}
|
|
6
|
+
export declare function DateSegment({ segment, state }: DateSegmentProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.DateSegment = void 0;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const datepicker_1 = require("@react-aria/datepicker");
|
|
10
|
+
const focus_1 = require("@react-aria/focus");
|
|
11
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
12
|
+
const react_1 = require("react");
|
|
13
|
+
function DateSegment({ segment, state }) {
|
|
14
|
+
const ref = (0, react_1.useRef)(null);
|
|
15
|
+
const { segmentProps } = (0, datepicker_1.useDateSegment)(segment, state, ref);
|
|
16
|
+
const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)();
|
|
17
|
+
const classes = (0, clsx_1.default)("mobius/DateSegment", {
|
|
18
|
+
"--is-literal": segment.type === "literal",
|
|
19
|
+
"--is-placeholder": segment.isPlaceholder,
|
|
20
|
+
"--is-focused": isFocusVisible,
|
|
21
|
+
});
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, segmentProps, focusProps, { ref: ref, className: classes, children: segment.text })));
|
|
23
|
+
}
|
|
24
|
+
exports.DateSegment = DateSegment;
|
|
25
|
+
//# sourceMappingURL=DateSegment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateSegment.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DateSegment.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;AAEb,uDAAwD;AACxD,6CAAiD;AAKjD,gDAAwB;AACxB,iCAA+B;AAO/B,SAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAoB;IAC9D,MAAM,GAAG,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,2BAAc,EAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAE7D,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,oBAAoB,EAAE;QACzC,cAAc,EAAE,OAAO,CAAC,IAAI,KAAK,SAAS;QAC1C,kBAAkB,EAAE,OAAO,CAAC,aAAa;QACzC,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,OAAO,CACL,gDAAS,YAAY,EAAM,UAAU,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,YAChE,OAAO,CAAC,IAAI,IACT,CACP,CAAC;AACJ,CAAC;AAjBD,kCAiBC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { AriaOverlayProps } from "@react-aria/overlays";
|
|
2
|
+
import { AriaDialogProps } from "@react-types/dialog";
|
|
3
|
+
import { ReactNode, Ref } from "react";
|
|
4
|
+
export interface PopoverProps extends AriaDialogProps, AriaOverlayProps {
|
|
5
|
+
popoverRef: Ref<HTMLElement>;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
8
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
10
|
+
t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.Popover = void 0;
|
|
16
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
|
+
const focus_1 = require("@react-aria/focus");
|
|
18
|
+
const dialog_1 = require("@react-aria/dialog");
|
|
19
|
+
const overlays_1 = require("@react-aria/overlays");
|
|
20
|
+
const utils_1 = require("@react-aria/utils");
|
|
21
|
+
const react_1 = require("react");
|
|
22
|
+
function Popover(props) {
|
|
23
|
+
const ref = (0, react_1.useRef)();
|
|
24
|
+
const { popoverRef = ref, isOpen, onClose, children } = props, otherProps = __rest(props, ["popoverRef", "isOpen", "onClose", "children"]);
|
|
25
|
+
// Handle events that should cause the popup to close,
|
|
26
|
+
// e.g. blur, clicking outside, or pressing the escape key.
|
|
27
|
+
const { overlayProps } = (0, overlays_1.useOverlay)({
|
|
28
|
+
isOpen,
|
|
29
|
+
onClose,
|
|
30
|
+
shouldCloseOnBlur: true,
|
|
31
|
+
isDismissable: true,
|
|
32
|
+
},
|
|
33
|
+
/* @ts-expect-error */
|
|
34
|
+
popoverRef);
|
|
35
|
+
const { modalProps } = (0, overlays_1.useModal)();
|
|
36
|
+
/* @ts-expect-error */
|
|
37
|
+
const { dialogProps } = (0, dialog_1.useDialog)(otherProps, popoverRef);
|
|
38
|
+
// Add a hidden <DismissButton> component at the end of the popover
|
|
39
|
+
// to allow screen reader users to dismiss the popup easily.
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)(focus_1.FocusScope, { contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "mobius/DatePickerPopover" }, (0, utils_1.mergeProps)(overlayProps, modalProps, dialogProps), {
|
|
41
|
+
/* @ts-expect-error */
|
|
42
|
+
ref: popoverRef, style: {
|
|
43
|
+
position: "absolute",
|
|
44
|
+
marginTop: 4,
|
|
45
|
+
zIndex: 1,
|
|
46
|
+
}, children: [children, (0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: onClose })] })) }));
|
|
47
|
+
}
|
|
48
|
+
exports.Popover = Popover;
|
|
49
|
+
//# sourceMappingURL=Popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/Popover.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,6CAA+C;AAC/C,+CAA+C;AAC/C,mDAK8B;AAE9B,6CAA+C;AAC/C,iCAA+C;AAO/C,SAAgB,OAAO,CAAC,KAAmB;IACzC,MAAM,GAAG,GAAG,IAAA,cAAM,GAAE,CAAC;IACrB,MAAM,EAAE,UAAU,GAAG,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,KAAoB,KAAK,EAApB,UAAU,UAAK,KAAK,EAAtE,+CAA8D,CAAQ,CAAC;IAE7E,sDAAsD;IACtD,2DAA2D;IAC3D,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,qBAAU,EACjC;QACE,MAAM;QACN,OAAO;QACP,iBAAiB,EAAE,IAAI;QACvB,aAAa,EAAE,IAAI;KACpB;IACD,sBAAsB;IACtB,UAAU,CACX,CAAC;IAEF,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAClC,sBAAsB;IACtB,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAS,EAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAE1D,mEAAmE;IACnE,4DAA4D;IAC5D,OAAO,CACL,uBAAC,kBAAU,IAAC,OAAO,QAAC,YAAY,kBAC9B,+CACE,SAAS,EAAC,0BAA0B,IAChC,IAAA,kBAAU,EAAC,YAAY,EAAE,UAAU,EAAE,WAAW,CAAC;YACrD,sBAAsB;YACtB,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,SAAS,EAAE,CAAC;gBACZ,MAAM,EAAE,CAAC;aACV,aAEA,QAAQ,EACT,uBAAC,wBAAa,IAAC,SAAS,EAAE,OAAO,GAAI,KACjC,GACK,CACd,CAAC;AACJ,CAAC;AAzCD,0BAyCC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.parseDate = void 0;
|
|
18
|
+
__exportStar(require("./DatePicker"), exports);
|
|
19
|
+
var date_1 = require("@internationalized/date");
|
|
20
|
+
Object.defineProperty(exports, "parseDate", { enumerable: true, get: function () { return date_1.parseDate; } });
|
|
21
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+CAA6B;AAC7B,gDAAoD;AAA3C,iGAAA,SAAS,OAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./components/DatePicker";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./components/DatePicker"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0DAAwC"}
|