@namroodinc/liquid-editorial 0.1.6 → 0.1.7
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/AGENTS.md +2 -0
- package/README.md +42 -0
- package/UPGRADING.md +68 -11
- package/dist/components/AppShell/index.cjs +2 -0
- package/dist/components/AppShell/index.cjs.map +1 -0
- package/dist/components/AppShell/index.d.cts +15 -0
- package/dist/components/AppShell/index.d.cts.map +1 -0
- package/dist/components/AppShell/index.d.ts +15 -0
- package/dist/components/AppShell/index.d.ts.map +1 -0
- package/dist/components/AppShell/index.js +93 -0
- package/dist/components/AppShell/index.js.map +1 -0
- package/dist/components/AppShell/style.css +79 -0
- package/dist/components/AssetGrid/index.cjs +1 -1
- package/dist/components/AssetGrid/index.cjs.map +1 -1
- package/dist/components/AssetGrid/index.d.cts.map +1 -1
- package/dist/components/AssetGrid/index.d.ts.map +1 -1
- package/dist/components/AssetGrid/index.js +57 -59
- package/dist/components/AssetGrid/index.js.map +1 -1
- package/dist/components/AssetGrid/style.css +8 -16
- package/dist/components/Board/index.cjs +1 -1
- package/dist/components/Board/index.cjs.map +1 -1
- package/dist/components/Board/index.d.cts.map +1 -1
- package/dist/components/Board/index.d.ts.map +1 -1
- package/dist/components/Board/index.js +88 -84
- package/dist/components/Board/index.js.map +1 -1
- package/dist/components/Board/style.css +17 -28
- package/dist/components/Button/index.cjs +1 -1
- package/dist/components/Button/index.cjs.map +1 -1
- package/dist/components/Button/index.d.cts +3 -2
- package/dist/components/Button/index.d.cts.map +1 -1
- package/dist/components/Button/index.d.ts +3 -2
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Button/style.css +21 -15
- package/dist/components/DatePicker/index.cjs +1 -1
- package/dist/components/DatePicker/index.cjs.map +1 -1
- package/dist/components/DatePicker/index.d.cts.map +1 -1
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +46 -45
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/DatePicker/style.css +4 -61
- package/dist/components/Drawer/index.cjs +1 -1
- package/dist/components/Drawer/index.cjs.map +1 -1
- package/dist/components/Drawer/index.d.cts +10 -1
- package/dist/components/Drawer/index.d.cts.map +1 -1
- package/dist/components/Drawer/index.d.ts +10 -1
- package/dist/components/Drawer/index.d.ts.map +1 -1
- package/dist/components/Drawer/index.js +69 -47
- package/dist/components/Drawer/index.js.map +1 -1
- package/dist/components/Drawer/style.css +106 -0
- package/dist/components/EntryPicker/index.cjs +1 -1
- package/dist/components/EntryPicker/index.cjs.map +1 -1
- package/dist/components/EntryPicker/index.d.cts.map +1 -1
- package/dist/components/EntryPicker/index.d.ts.map +1 -1
- package/dist/components/EntryPicker/index.js +12 -11
- package/dist/components/EntryPicker/index.js.map +1 -1
- package/dist/components/EntryPicker/style.css +3 -30
- package/dist/components/Field/style.css +11 -3
- package/dist/components/Menu/index.cjs +1 -1
- package/dist/components/Menu/index.cjs.map +1 -1
- package/dist/components/Menu/index.d.cts.map +1 -1
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +11 -16
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Menu/style.css +7 -41
- package/dist/components/Modal/index.cjs +1 -1
- package/dist/components/Modal/index.cjs.map +1 -1
- package/dist/components/Modal/index.d.cts.map +1 -1
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +12 -12
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/NumberField/index.cjs +1 -1
- package/dist/components/NumberField/index.cjs.map +1 -1
- package/dist/components/NumberField/index.js +13 -17
- package/dist/components/NumberField/index.js.map +1 -1
- package/dist/components/NumberField/style.css +1 -41
- package/dist/components/Popover/index.cjs +1 -1
- package/dist/components/Popover/index.cjs.map +1 -1
- package/dist/components/Popover/index.js +4 -4
- package/dist/components/SearchField/index.cjs +1 -1
- package/dist/components/SearchField/index.cjs.map +1 -1
- package/dist/components/SearchField/index.d.cts.map +1 -1
- package/dist/components/SearchField/index.d.ts.map +1 -1
- package/dist/components/SearchField/index.js +26 -27
- package/dist/components/SearchField/index.js.map +1 -1
- package/dist/components/SearchField/style.css +0 -21
- package/dist/components/Select/index.cjs +1 -1
- package/dist/components/Select/index.cjs.map +1 -1
- package/dist/components/Select/index.d.cts.map +1 -1
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +82 -75
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/style.css +5 -38
- package/dist/components/SideNav/index.cjs +1 -1
- package/dist/components/SideNav/index.cjs.map +1 -1
- package/dist/components/SideNav/index.d.cts.map +1 -1
- package/dist/components/SideNav/index.d.ts.map +1 -1
- package/dist/components/SideNav/index.js +52 -49
- package/dist/components/SideNav/index.js.map +1 -1
- package/dist/components/SideNav/style.css +2 -27
- package/dist/components/SortableList/index.cjs +1 -1
- package/dist/components/SortableList/index.cjs.map +1 -1
- package/dist/components/SortableList/index.d.cts.map +1 -1
- package/dist/components/SortableList/index.d.ts.map +1 -1
- package/dist/components/SortableList/index.js +42 -39
- package/dist/components/SortableList/index.js.map +1 -1
- package/dist/components/SortableList/style.css +9 -15
- package/dist/components/Stepper/index.cjs +1 -1
- package/dist/components/Stepper/index.cjs.map +1 -1
- package/dist/components/Stepper/index.d.cts.map +1 -1
- package/dist/components/Stepper/index.d.ts.map +1 -1
- package/dist/components/Stepper/index.js +48 -39
- package/dist/components/Stepper/index.js.map +1 -1
- package/dist/components/Stepper/style.css +24 -18
- package/dist/components/SubNav/index.cjs +1 -1
- package/dist/components/SubNav/index.cjs.map +1 -1
- package/dist/components/SubNav/index.d.cts.map +1 -1
- package/dist/components/SubNav/index.d.ts.map +1 -1
- package/dist/components/SubNav/index.js +27 -28
- package/dist/components/SubNav/index.js.map +1 -1
- package/dist/components/SubNav/style.css +13 -0
- package/dist/components/Switch/index.cjs +1 -1
- package/dist/components/Switch/index.cjs.map +1 -1
- package/dist/components/Switch/index.d.cts.map +1 -1
- package/dist/components/Switch/index.d.ts.map +1 -1
- package/dist/components/Switch/index.js +23 -21
- package/dist/components/Switch/index.js.map +1 -1
- package/dist/components/Switch/style.css +2 -28
- package/dist/components/TagsInput/index.cjs +1 -1
- package/dist/components/TagsInput/index.cjs.map +1 -1
- package/dist/components/TagsInput/index.js +8 -10
- package/dist/components/TagsInput/index.js.map +1 -1
- package/dist/components/TagsInput/style.css +2 -24
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +39 -38
- package/dist/styles.css +1 -0
- package/package.json +1 -1
|
@@ -15,6 +15,12 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
/* Sizes — only height, padding and type size change. */
|
|
18
|
+
.ds-button[data-size="xs"] {
|
|
19
|
+
height: var(--space-6);
|
|
20
|
+
padding: 0 var(--space-2);
|
|
21
|
+
font-size: var(--font-size-xs);
|
|
22
|
+
}
|
|
23
|
+
|
|
18
24
|
.ds-button[data-size="sm"] {
|
|
19
25
|
height: var(--field-height-sm);
|
|
20
26
|
padding: var(--space-1) var(--space-3);
|
|
@@ -39,71 +45,71 @@
|
|
|
39
45
|
}
|
|
40
46
|
|
|
41
47
|
/* Variants — state moves on the fill only. */
|
|
42
|
-
.ds-button[data-variant="primary"] {
|
|
48
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="primary"] {
|
|
43
49
|
background: var(--color-primary);
|
|
44
50
|
color: var(--color-text-on-solid);
|
|
45
51
|
}
|
|
46
52
|
|
|
47
|
-
.ds-button[data-variant="primary"]:hover:not(:disabled) {
|
|
53
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="primary"]:hover:not(:disabled) {
|
|
48
54
|
background: var(--color-primary-hover);
|
|
49
55
|
}
|
|
50
56
|
|
|
51
|
-
.ds-button[data-variant="primary"]:active:not(:disabled) {
|
|
57
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="primary"]:active:not(:disabled) {
|
|
52
58
|
background: var(--color-primary-pressed);
|
|
53
59
|
}
|
|
54
60
|
|
|
55
|
-
.ds-button[data-variant="neutral"] {
|
|
61
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="neutral"] {
|
|
56
62
|
background: var(--color-surface);
|
|
57
63
|
color: var(--color-text);
|
|
58
64
|
}
|
|
59
65
|
|
|
60
|
-
.ds-button[data-variant="neutral"]:hover:not(:disabled) {
|
|
66
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="neutral"]:hover:not(:disabled) {
|
|
61
67
|
background: var(--field-hover);
|
|
62
68
|
}
|
|
63
69
|
|
|
64
|
-
.ds-button[data-variant="neutral"]:active:not(:disabled) {
|
|
70
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="neutral"]:active:not(:disabled) {
|
|
65
71
|
background: var(--field-pressed);
|
|
66
72
|
}
|
|
67
73
|
|
|
68
|
-
.ds-button[data-variant="danger"] {
|
|
74
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="danger"] {
|
|
69
75
|
background: var(--color-danger);
|
|
70
76
|
color: var(--color-text-on-solid);
|
|
71
77
|
}
|
|
72
78
|
|
|
73
|
-
.ds-button[data-variant="danger"]:hover:not(:disabled) {
|
|
79
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="danger"]:hover:not(:disabled) {
|
|
74
80
|
background: var(--color-danger-hover, var(--color-danger));
|
|
75
81
|
}
|
|
76
82
|
|
|
77
|
-
.ds-button[data-variant="danger"]:active:not(:disabled) {
|
|
83
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="danger"]:active:not(:disabled) {
|
|
78
84
|
background: var(--color-danger-pressed, var(--color-danger));
|
|
79
85
|
}
|
|
80
86
|
|
|
81
|
-
.ds-button[data-variant="active"] {
|
|
87
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="active"] {
|
|
82
88
|
background: var(--color-primary-soft);
|
|
83
89
|
color: var(--color-primary-text);
|
|
84
90
|
border-color: var(--color-primary);
|
|
85
91
|
}
|
|
86
92
|
|
|
87
|
-
.ds-button[data-variant="active"]:hover:not(:disabled) {
|
|
93
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="active"]:hover:not(:disabled) {
|
|
88
94
|
background: var(--color-primary-soft-hover);
|
|
89
95
|
}
|
|
90
96
|
|
|
91
|
-
.ds-button[data-variant="active"]:active:not(:disabled) {
|
|
97
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="active"]:active:not(:disabled) {
|
|
92
98
|
background: var(--color-primary-soft-pressed);
|
|
93
99
|
}
|
|
94
100
|
|
|
95
|
-
.ds-button[data-variant="simple"] {
|
|
101
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="simple"] {
|
|
96
102
|
background: transparent;
|
|
97
103
|
border-color: transparent;
|
|
98
104
|
color: var(--color-text-muted);
|
|
99
105
|
font-weight: var(--font-weight-regular);
|
|
100
106
|
}
|
|
101
107
|
|
|
102
|
-
.ds-button[data-variant="simple"]:hover:not(:disabled) {
|
|
108
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="simple"]:hover:not(:disabled) {
|
|
103
109
|
background: var(--field-hover);
|
|
104
110
|
}
|
|
105
111
|
|
|
106
|
-
.ds-button[data-variant="simple"]:active:not(:disabled) {
|
|
112
|
+
.ds-button:where(:not(.ds-field-skin))[data-variant="simple"]:active:not(:disabled) {
|
|
107
113
|
background: var(--field-pressed);
|
|
108
114
|
}
|
|
109
115
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");;/* empty css */const n=require("../Popover/index.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(...e){return e.filter(Boolean).join(` `)}var o=[`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`,`Sun`];function s(e){let t=`${e.getMonth()+1}`.padStart(2,`0`),n=`${e.getDate()}`.padStart(2,`0`);return`${e.getFullYear()}-${t}-${n}`}function c(e){if(!e||!/^\d{4}-\d{2}-\d{2}$/.test(e))return null;let[t,n,r]=e.split(`-`).map(Number);if(!t||!n||!r)return null;let i=new Date(t,n-1,r);return Number.isNaN(i.getTime())||s(i)!==e?null:i}function l(e){let t=c(e);return t?t.toLocaleDateString(`en-GB`,{day:`numeric`,month:`long`,year:`numeric`}):``}function u(e){return e.toLocaleDateString(`en-GB`,{month:`long`,year:`numeric`})}function d(e){let t=new Date(e.getFullYear(),e.getMonth(),1),n=(t.getDay()+6)%7;return new Date(t.getFullYear(),t.getMonth(),1-n)}var f=(0,r.forwardRef)(function({value:e,endValue:n,onSelect:f,min:p,max:m,className:h,...g},_){let v=c(e),[y,b]=(0,r.useState)(()=>v??new Date),[x,S]=(0,r.useState)(()=>e??s(new Date)),C=(0,r.useRef)(null),w=(0,r.useRef)(!1);(0,r.useEffect)(()=>{let t=c(e);t&&(S(e),b(new Date(t.getFullYear(),t.getMonth(),1)))},[e]),(0,r.useEffect)(()=>{w.current&&(w.current=!1,C.current?.querySelector(`[data-focused]`)?.focus())},[x]);let T=Array.from({length:42},(e,t)=>{let n=d(y);return new Date(n.getFullYear(),n.getMonth(),n.getDate()+t)}),E=s(new Date),D=e=>{let t=new Date(y.getFullYear(),y.getMonth()+e,1);b(t),S(s(t))},O=e=>{let t=c(x)??new Date,n=new Date(t.getFullYear(),t.getMonth(),t.getDate()+e);w.current=!0,S(s(n)),b(new Date(n.getFullYear(),n.getMonth(),1))},k=e=>{let t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-7,ArrowDown:7,PageUp:-28,PageDown:28}[e.key];t!==void 0&&(e.preventDefault(),O(t))};return(0,i.jsxs)(`div`,{ref:_,className:a(`ds-calendar`,h),...g,children:[(0,i.jsxs)(`div`,{className:`ds-calendar__head`,children:[(0,i.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`chevron-left`,"aria-label":`Previous month`,onClick:()=>D(-1)}),(0,i.jsx)(`span`,{className:`ds-calendar__month`,children:u(y)}),(0,i.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`chevron-right`,"aria-label":`Next month`,onClick:()=>D(1)})]}),(0,i.jsx)(`div`,{className:`ds-calendar__weekdays`,"aria-hidden":`true`,children:o.map(e=>(0,i.jsx)(`span`,{children:e.slice(0,2)},e))}),(0,i.jsx)(`div`,{ref:C,className:`ds-calendar__grid`,role:`grid`,onKeyDown:k,children:Array.from({length:6},(
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");;/* empty css */const n=require("../Popover/index.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(...e){return e.filter(Boolean).join(` `)}var o=[`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`,`Sun`];function s(e){let t=`${e.getMonth()+1}`.padStart(2,`0`),n=`${e.getDate()}`.padStart(2,`0`);return`${e.getFullYear()}-${t}-${n}`}function c(e){if(!e||!/^\d{4}-\d{2}-\d{2}$/.test(e))return null;let[t,n,r]=e.split(`-`).map(Number);if(!t||!n||!r)return null;let i=new Date(t,n-1,r);return Number.isNaN(i.getTime())||s(i)!==e?null:i}function l(e){let t=c(e);return t?t.toLocaleDateString(`en-GB`,{day:`numeric`,month:`long`,year:`numeric`}):``}function u(e){return e.toLocaleDateString(`en-GB`,{month:`long`,year:`numeric`})}function d(e){let t=new Date(e.getFullYear(),e.getMonth(),1),n=(t.getDay()+6)%7;return new Date(t.getFullYear(),t.getMonth(),1-n)}var f=(0,r.forwardRef)(function({value:e,endValue:n,onSelect:f,min:p,max:m,className:h,...g},_){let v=c(e),[y,b]=(0,r.useState)(()=>v??new Date),[x,S]=(0,r.useState)(()=>e??s(new Date)),C=(0,r.useRef)(null),w=(0,r.useRef)(!1);(0,r.useEffect)(()=>{let t=c(e);t&&(S(e),b(new Date(t.getFullYear(),t.getMonth(),1)))},[e]),(0,r.useEffect)(()=>{w.current&&(w.current=!1,C.current?.querySelector(`[data-focused]`)?.focus())},[x]);let T=Array.from({length:42},(e,t)=>{let n=d(y);return new Date(n.getFullYear(),n.getMonth(),n.getDate()+t)}),E=s(new Date),D=e=>{let t=new Date(y.getFullYear(),y.getMonth()+e,1);b(t),S(s(t))},O=e=>{let t=c(x)??new Date,n=new Date(t.getFullYear(),t.getMonth(),t.getDate()+e);w.current=!0,S(s(n)),b(new Date(n.getFullYear(),n.getMonth(),1))},k=e=>{let t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-7,ArrowDown:7,PageUp:-28,PageDown:28}[e.key];t!==void 0&&(e.preventDefault(),O(t))};return(0,i.jsxs)(`div`,{ref:_,className:a(`ds-calendar`,h),...g,children:[(0,i.jsxs)(`div`,{className:`ds-calendar__head`,children:[(0,i.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`chevron-left`,"aria-label":`Previous month`,onClick:()=>D(-1)}),(0,i.jsx)(`span`,{className:`ds-calendar__month`,children:u(y)}),(0,i.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`chevron-right`,"aria-label":`Next month`,onClick:()=>D(1)})]}),(0,i.jsx)(`div`,{className:`ds-calendar__weekdays`,"aria-hidden":`true`,children:o.map(e=>(0,i.jsx)(`span`,{children:e.slice(0,2)},e))}),(0,i.jsx)(`div`,{ref:C,className:`ds-calendar__grid`,role:`grid`,onKeyDown:k,children:Array.from({length:6},(r,a)=>(0,i.jsx)(`div`,{role:`row`,className:`ds-calendar__row`,children:T.slice(a*7,a*7+7).map(r=>{let a=s(r),o=r.getMonth()!==y.getMonth(),c=p&&a<p||m&&a>m,u=!!(e&&n&&a>e&&a<n),d=a===e||a===n;return(0,i.jsx)(t.Button,{variant:d?`primary`:u?`active`:a===E?`neutral`:`simple`,size:`sm`,isIconOnly:!0,role:`gridcell`,"aria-label":l(a),tabIndex:a===x?0:-1,isDisabled:!!c,"aria-selected":d||void 0,"data-outside":o||void 0,"data-today":a===E||void 0,"data-in-range":u||void 0,"data-focused":a===x||void 0,className:`ds-calendar__day`,onClick:()=>{S(a),f?.(a)},children:r.getDate()},a)})},a))})]})});function p({value:o,defaultValue:s=``,onValueChange:c,size:u=`md`,placeholder:d=`Pick a date`,min:p,max:m,isDisabled:h=!1,isInvalid:g=!1,"aria-invalid":_,id:v,className:y,...b}){let[x,S]=(0,r.useState)(s),C=o??x,[w,T]=(0,r.useState)(!1),E=(0,r.useRef)(null),D=(0,r.useRef)(null),O=(0,r.useRef)(null),k=(0,r.useId)(),A=v??k;return(0,r.useEffect)(()=>{if(!w)return;let e=e=>{let t=e.target;!E.current?.contains(t)&&!O.current?.contains(t)&&T(!1)},t=e=>{e.key===`Escape`&&(e.preventDefault(),T(!1),D.current?.focus())};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[w]),(0,i.jsxs)(`div`,{className:a(`ds-datefield`,y),ref:E,children:[(0,i.jsxs)(t.Button,{...b,ref:D,id:A,size:u,"aria-haspopup":`dialog`,"aria-expanded":w,"aria-invalid":g||_||void 0,isDisabled:h,"data-placeholder":C?void 0:``,className:`ds-field-skin ds-datefield__control`,onClick:()=>T(e=>!e),children:[(0,i.jsx)(`span`,{className:`ds-datefield__value`,children:C?l(C):d}),(0,i.jsx)(e.t,{name:`calendar`,size:16,className:`ds-datefield__glyph`})]}),(0,i.jsx)(n.Popover,{anchorRef:D,anchorId:A,isOpen:w,panelRef:O,className:`ds-datefield__popover`,role:`dialog`,"aria-label":`Choose a date`,children:(0,i.jsx)(f,{value:C,min:p,max:m,onSelect:e=>{o===void 0&&S(e),c?.(e),T(!1),D.current?.focus()}})})]})}function m({value:e,defaultValue:t={start:``,end:``},onValueChange:n,size:o=`md`,min:s,max:c,isDisabled:l=!1,startLabel:u=`Start date`,endLabel:d=`End date`,className:f}){let[m,h]=(0,r.useState)(t),g=e??m,_=t=>{e===void 0&&h(t),n?.(t)};return(0,i.jsxs)(`div`,{className:a(`ds-daterange`,f),children:[(0,i.jsx)(p,{"aria-label":u,size:o,value:g.start,min:s,max:g.end||c,isDisabled:l,placeholder:u,onValueChange:e=>_({...g,start:e})}),(0,i.jsx)(`span`,{className:`ds-daterange__dash`,"aria-hidden":`true`,children:`–`}),(0,i.jsx)(p,{"aria-label":d,size:o,value:g.end,min:g.start||s,max:c,isDisabled:l,placeholder:d,onValueChange:e=>_({...g,end:e})})]})}exports.Calendar=f,exports.DateField=p,exports.DateRangeField=m,exports.formatIsoDate=l;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","Button","useId","Icon","Popover","require_Icon","require_components_Button_index","require_components_Popover_index","react","react_jsx_runtime","cx","parts","WEEKDAYS","toIso","month","date","day","fromIso","value","year","formatIsoDate","monthLabel","startOfGrid","first","weekday","Calendar","rest","selected","setMonth","focused","setFocused","gridRef","shouldFocus","next","days","start","index","today","changeMonth","delta","move","base","deltaDays","onKeyDown","event","className","rowIndex","iso","isOutside","isDisabled","min","max","inRange","endValue","isEdge","onSelect","DateField","ariaInvalid","internal","setInternal","defaultValue","current","isOpen","setOpen","rootRef","triggerRef","panelRef","generatedId","triggerId","id","onPointerDown","target","isInvalid","size","open","placeholder","onValueChange","DateRangeField","commit","startLabel","endLabel"],"sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type HTMLAttributes,\n type AriaAttributes,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\n/** ISO calendar date, \"YYYY-MM-DD\" — the only date shape the system passes around. */\nexport type IsoDate = string;\n\nconst WEEKDAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nfunction toIso(date: Date): IsoDate {\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const day = `${date.getDate()}`.padStart(2, \"0\");\n return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction fromIso(value: string | undefined): Date | null {\n if (!value || !/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n const [year, month, day] = value.split(\"-\").map(Number);\n if (!year || !month || !day) return null;\n const date = new Date(year, month - 1, day);\n return Number.isNaN(date.getTime()) || toIso(date) !== value ? null : date;\n}\n\n/** \"12 March 2026\" — the system's one long date format. */\nexport function formatIsoDate(value: string | undefined): string {\n const date = fromIso(value);\n if (!date) return \"\";\n return date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"long\", year: \"numeric\" });\n}\n\nfunction monthLabel(date: Date) {\n return date.toLocaleDateString(\"en-GB\", { month: \"long\", year: \"numeric\" });\n}\n\nfunction startOfGrid(month: Date) {\n const first = new Date(month.getFullYear(), month.getMonth(), 1);\n const weekday = (first.getDay() + 6) % 7; // Monday-first\n return new Date(first.getFullYear(), first.getMonth(), 1 - weekday);\n}\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Selected day, or the start of a selected span. */\n value?: IsoDate;\n /** End of a selected span. Set it to put the calendar in range mode. */\n endValue?: IsoDate;\n onSelect?: (value: IsoDate) => void;\n min?: IsoDate;\n max?: IsoDate;\n}\n\n/**\n * A month of days, Monday first. Arrow keys walk the grid; the month follows\n * the focused day, so a whole year is reachable from the keyboard.\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n { value, endValue, onSelect, min, max, className, ...rest },\n ref,\n) {\n const selected = fromIso(value);\n const [month, setMonth] = useState(() => selected ?? new Date());\n const [focused, setFocused] = useState<IsoDate>(() => value ?? toIso(new Date()));\n const gridRef = useRef<HTMLDivElement | null>(null);\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n const next = fromIso(value);\n if (!next) return;\n // Controlled changes intentionally reposition the visible and roving-focus month.\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFocused(value!);\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n }, [value]);\n\n useEffect(() => {\n if (!shouldFocus.current) return;\n shouldFocus.current = false;\n gridRef.current?.querySelector<HTMLButtonElement>(\"[data-focused]\")?.focus();\n }, [focused]);\n\n const days = Array.from({ length: 42 }, (_, index) => {\n const start = startOfGrid(month);\n return new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);\n });\n\n const today = toIso(new Date());\n\n const changeMonth = (delta: number) => {\n const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);\n setMonth(next);\n setFocused(toIso(next));\n };\n\n const move = (deltaDays: number) => {\n const base = fromIso(focused) ?? new Date();\n const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);\n shouldFocus.current = true;\n setFocused(toIso(next));\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const steps: Record<string, number> = {\n ArrowLeft: -1,\n ArrowRight: 1,\n ArrowUp: -7,\n ArrowDown: 7,\n PageUp: -28,\n PageDown: 28,\n };\n const delta = steps[event.key];\n if (delta === undefined) return;\n event.preventDefault();\n move(delta);\n };\n\n return (\n <div ref={ref} className={cx(\"ds-calendar\", className)} {...rest}>\n <div className=\"ds-calendar__head\">\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-left\"\n aria-label=\"Previous month\"\n onClick={() => changeMonth(-1)}\n />\n <span className=\"ds-calendar__month\">{monthLabel(month)}</span>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-right\"\n aria-label=\"Next month\"\n onClick={() => changeMonth(1)}\n />\n </div>\n <div className=\"ds-calendar__weekdays\" aria-hidden=\"true\">\n {WEEKDAYS.map((day) => (\n <span key={day}>{day.slice(0, 2)}</span>\n ))}\n </div>\n <div ref={gridRef} className=\"ds-calendar__grid\" role=\"grid\" onKeyDown={onKeyDown}>\n {Array.from({ length: 6 }, (_, rowIndex) => (\n <div role=\"row\" className=\"ds-calendar__row\" key={rowIndex}>\n {days.slice(rowIndex * 7, rowIndex * 7 + 7).map((day) => {\n const iso = toIso(day);\n const isOutside = day.getMonth() !== month.getMonth();\n const isDisabled = (min && iso < min) || (max && iso > max);\n const inRange = Boolean(value && endValue && iso > value && iso < endValue);\n const isEdge = iso === value || iso === endValue;\n return (\n <button\n key={iso}\n type=\"button\"\n role=\"gridcell\"\n aria-label={formatIsoDate(iso)}\n tabIndex={iso === focused ? 0 : -1}\n disabled={isDisabled || undefined}\n aria-selected={isEdge || undefined}\n data-outside={isOutside || undefined}\n data-today={iso === today || undefined}\n data-in-range={inRange || undefined}\n data-focused={iso === focused || undefined}\n className=\"ds-calendar__day\"\n onClick={() => {\n setFocused(iso);\n onSelect?.(iso);\n }}\n >\n {day.getDate()}\n </button>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n );\n});\n\nexport interface DateFieldProps {\n value?: IsoDate;\n defaultValue?: IsoDate;\n onValueChange?: (value: IsoDate) => void;\n size?: FieldSize;\n placeholder?: string;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n isInvalid?: boolean;\n id?: string;\n className?: string;\n \"aria-label\"?: string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\n/** One day, picked from a calendar. The field prints the long date, never a mask. */\nexport function DateField({\n value,\n defaultValue = \"\",\n onValueChange,\n size = \"md\",\n placeholder = \"Pick a date\",\n min,\n max,\n isDisabled = false,\n isInvalid = false,\n \"aria-invalid\": ariaInvalid,\n id,\n className,\n ...rest\n}: DateFieldProps) {\n const [internal, setInternal] = useState<IsoDate>(defaultValue);\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const panelRef = useRef<HTMLDivElement | null>(null);\n const generatedId = useId();\n const triggerId = id ?? generatedId;\n\n useEffect(() => {\n if (!isOpen) return;\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) setOpen(false);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setOpen(false);\n triggerRef.current?.focus();\n }\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"mousedown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n <div className={cx(\"ds-datefield\", className)} ref={rootRef}>\n <button\n {...rest}\n ref={triggerRef}\n id={triggerId}\n type=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-invalid={isInvalid || ariaInvalid || undefined}\n disabled={isDisabled}\n data-size={size}\n data-placeholder={current ? undefined : \"\"}\n className=\"ds-field-skin ds-datefield__control\"\n onClick={() => setOpen((open) => !open)}\n >\n <span className=\"ds-datefield__value\">{current ? formatIsoDate(current) : placeholder}</span>\n <Icon name=\"calendar\" size={16} className=\"ds-datefield__glyph\" />\n </button>\n <Popover\n anchorRef={triggerRef}\n anchorId={triggerId}\n isOpen={isOpen}\n panelRef={panelRef}\n className=\"ds-datefield__popover\"\n role=\"dialog\"\n aria-label=\"Choose a date\"\n >\n <Calendar\n value={current}\n min={min}\n max={max}\n onSelect={(next) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n triggerRef.current?.focus();\n }}\n />\n </Popover>\n </div>\n );\n}\n\nexport interface DateRangeValue {\n start: IsoDate;\n end: IsoDate;\n}\n\nexport interface DateRangeFieldProps {\n value?: DateRangeValue;\n defaultValue?: DateRangeValue;\n onValueChange?: (value: DateRangeValue) => void;\n size?: FieldSize;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n startLabel?: string;\n endLabel?: string;\n className?: string;\n}\n\n/** A span of days. The end field never offers a day before the start. */\nexport function DateRangeField({\n value,\n defaultValue = { start: \"\", end: \"\" },\n onValueChange,\n size = \"md\",\n min,\n max,\n isDisabled = false,\n startLabel = \"Start date\",\n endLabel = \"End date\",\n className,\n}: DateRangeFieldProps) {\n const [internal, setInternal] = useState<DateRangeValue>(defaultValue);\n const current = value ?? internal;\n\n const commit = (next: DateRangeValue) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n return (\n <div className={cx(\"ds-daterange\", className)}>\n <DateField\n aria-label={startLabel}\n size={size}\n value={current.start}\n min={min}\n max={current.end || max}\n isDisabled={isDisabled}\n placeholder={startLabel}\n onValueChange={(next) => commit({ ...current, start: next })}\n />\n <span className=\"ds-daterange__dash\" aria-hidden=\"true\">\n –\n </span>\n <DateField\n aria-label={endLabel}\n size={size}\n value={current.end}\n min={current.start || min}\n max={max}\n isDisabled={isDisabled}\n placeholder={endLabel}\n onValueChange={(next) => commit({ ...current, end: next })}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","Button","useId","Icon","Popover","require_Icon","require_components_Button_index","require_components_Popover_index","react","react_jsx_runtime","cx","parts","WEEKDAYS","toIso","month","date","day","fromIso","value","year","formatIsoDate","monthLabel","startOfGrid","first","weekday","Calendar","rest","selected","setMonth","focused","setFocused","gridRef","shouldFocus","next","days","start","index","today","changeMonth","delta","move","base","deltaDays","onKeyDown","event","className","rowIndex","iso","isOutside","isDisabled","min","max","inRange","endValue","isEdge","onSelect","DateField","ariaInvalid","internal","setInternal","defaultValue","current","isOpen","setOpen","rootRef","triggerRef","panelRef","generatedId","triggerId","id","onPointerDown","target","isInvalid","open","placeholder","onValueChange","DateRangeField","commit","startLabel","endLabel"],"sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type HTMLAttributes,\n type AriaAttributes,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\n/** ISO calendar date, \"YYYY-MM-DD\" — the only date shape the system passes around. */\nexport type IsoDate = string;\n\nconst WEEKDAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nfunction toIso(date: Date): IsoDate {\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const day = `${date.getDate()}`.padStart(2, \"0\");\n return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction fromIso(value: string | undefined): Date | null {\n if (!value || !/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n const [year, month, day] = value.split(\"-\").map(Number);\n if (!year || !month || !day) return null;\n const date = new Date(year, month - 1, day);\n return Number.isNaN(date.getTime()) || toIso(date) !== value ? null : date;\n}\n\n/** \"12 March 2026\" — the system's one long date format. */\nexport function formatIsoDate(value: string | undefined): string {\n const date = fromIso(value);\n if (!date) return \"\";\n return date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"long\", year: \"numeric\" });\n}\n\nfunction monthLabel(date: Date) {\n return date.toLocaleDateString(\"en-GB\", { month: \"long\", year: \"numeric\" });\n}\n\nfunction startOfGrid(month: Date) {\n const first = new Date(month.getFullYear(), month.getMonth(), 1);\n const weekday = (first.getDay() + 6) % 7; // Monday-first\n return new Date(first.getFullYear(), first.getMonth(), 1 - weekday);\n}\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Selected day, or the start of a selected span. */\n value?: IsoDate;\n /** End of a selected span. Set it to put the calendar in range mode. */\n endValue?: IsoDate;\n onSelect?: (value: IsoDate) => void;\n min?: IsoDate;\n max?: IsoDate;\n}\n\n/**\n * A month of days, Monday first. Arrow keys walk the grid; the month follows\n * the focused day, so a whole year is reachable from the keyboard.\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n { value, endValue, onSelect, min, max, className, ...rest },\n ref,\n) {\n const selected = fromIso(value);\n const [month, setMonth] = useState(() => selected ?? new Date());\n const [focused, setFocused] = useState<IsoDate>(() => value ?? toIso(new Date()));\n const gridRef = useRef<HTMLDivElement | null>(null);\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n const next = fromIso(value);\n if (!next) return;\n // Controlled changes intentionally reposition the visible and roving-focus month.\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFocused(value!);\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n }, [value]);\n\n useEffect(() => {\n if (!shouldFocus.current) return;\n shouldFocus.current = false;\n gridRef.current?.querySelector<HTMLButtonElement>(\"[data-focused]\")?.focus();\n }, [focused]);\n\n const days = Array.from({ length: 42 }, (_, index) => {\n const start = startOfGrid(month);\n return new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);\n });\n\n const today = toIso(new Date());\n\n const changeMonth = (delta: number) => {\n const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);\n setMonth(next);\n setFocused(toIso(next));\n };\n\n const move = (deltaDays: number) => {\n const base = fromIso(focused) ?? new Date();\n const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);\n shouldFocus.current = true;\n setFocused(toIso(next));\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const steps: Record<string, number> = {\n ArrowLeft: -1,\n ArrowRight: 1,\n ArrowUp: -7,\n ArrowDown: 7,\n PageUp: -28,\n PageDown: 28,\n };\n const delta = steps[event.key];\n if (delta === undefined) return;\n event.preventDefault();\n move(delta);\n };\n\n return (\n <div ref={ref} className={cx(\"ds-calendar\", className)} {...rest}>\n <div className=\"ds-calendar__head\">\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-left\"\n aria-label=\"Previous month\"\n onClick={() => changeMonth(-1)}\n />\n <span className=\"ds-calendar__month\">{monthLabel(month)}</span>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-right\"\n aria-label=\"Next month\"\n onClick={() => changeMonth(1)}\n />\n </div>\n <div className=\"ds-calendar__weekdays\" aria-hidden=\"true\">\n {WEEKDAYS.map((day) => (\n <span key={day}>{day.slice(0, 2)}</span>\n ))}\n </div>\n <div ref={gridRef} className=\"ds-calendar__grid\" role=\"grid\" onKeyDown={onKeyDown}>\n {Array.from({ length: 6 }, (_, rowIndex) => (\n <div role=\"row\" className=\"ds-calendar__row\" key={rowIndex}>\n {days.slice(rowIndex * 7, rowIndex * 7 + 7).map((day) => {\n const iso = toIso(day);\n const isOutside = day.getMonth() !== month.getMonth();\n const isDisabled = (min && iso < min) || (max && iso > max);\n const inRange = Boolean(value && endValue && iso > value && iso < endValue);\n const isEdge = iso === value || iso === endValue;\n return (\n <Button\n key={iso}\n variant={isEdge ? \"primary\" : inRange ? \"active\" : iso === today ? \"neutral\" : \"simple\"}\n size=\"sm\"\n isIconOnly\n role=\"gridcell\"\n aria-label={formatIsoDate(iso)}\n tabIndex={iso === focused ? 0 : -1}\n isDisabled={Boolean(isDisabled)}\n aria-selected={isEdge || undefined}\n data-outside={isOutside || undefined}\n data-today={iso === today || undefined}\n data-in-range={inRange || undefined}\n data-focused={iso === focused || undefined}\n className=\"ds-calendar__day\"\n onClick={() => {\n setFocused(iso);\n onSelect?.(iso);\n }}\n >\n {day.getDate()}\n </Button>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n );\n});\n\nexport interface DateFieldProps {\n value?: IsoDate;\n defaultValue?: IsoDate;\n onValueChange?: (value: IsoDate) => void;\n size?: FieldSize;\n placeholder?: string;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n isInvalid?: boolean;\n id?: string;\n className?: string;\n \"aria-label\"?: string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\n/** One day, picked from a calendar. The field prints the long date, never a mask. */\nexport function DateField({\n value,\n defaultValue = \"\",\n onValueChange,\n size = \"md\",\n placeholder = \"Pick a date\",\n min,\n max,\n isDisabled = false,\n isInvalid = false,\n \"aria-invalid\": ariaInvalid,\n id,\n className,\n ...rest\n}: DateFieldProps) {\n const [internal, setInternal] = useState<IsoDate>(defaultValue);\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const panelRef = useRef<HTMLDivElement | null>(null);\n const generatedId = useId();\n const triggerId = id ?? generatedId;\n\n useEffect(() => {\n if (!isOpen) return;\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) setOpen(false);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n setOpen(false);\n triggerRef.current?.focus();\n }\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"mousedown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n <div className={cx(\"ds-datefield\", className)} ref={rootRef}>\n <Button\n {...rest}\n ref={triggerRef}\n id={triggerId}\n size={size}\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-invalid={isInvalid || ariaInvalid || undefined}\n isDisabled={isDisabled}\n data-placeholder={current ? undefined : \"\"}\n className=\"ds-field-skin ds-datefield__control\"\n onClick={() => setOpen((open) => !open)}\n >\n <span className=\"ds-datefield__value\">{current ? formatIsoDate(current) : placeholder}</span>\n <Icon name=\"calendar\" size={16} className=\"ds-datefield__glyph\" />\n </Button>\n <Popover\n anchorRef={triggerRef}\n anchorId={triggerId}\n isOpen={isOpen}\n panelRef={panelRef}\n className=\"ds-datefield__popover\"\n role=\"dialog\"\n aria-label=\"Choose a date\"\n >\n <Calendar\n value={current}\n min={min}\n max={max}\n onSelect={(next) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n triggerRef.current?.focus();\n }}\n />\n </Popover>\n </div>\n );\n}\n\nexport interface DateRangeValue {\n start: IsoDate;\n end: IsoDate;\n}\n\nexport interface DateRangeFieldProps {\n value?: DateRangeValue;\n defaultValue?: DateRangeValue;\n onValueChange?: (value: DateRangeValue) => void;\n size?: FieldSize;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n startLabel?: string;\n endLabel?: string;\n className?: string;\n}\n\n/** A span of days. The end field never offers a day before the start. */\nexport function DateRangeField({\n value,\n defaultValue = { start: \"\", end: \"\" },\n onValueChange,\n size = \"md\",\n min,\n max,\n isDisabled = false,\n startLabel = \"Start date\",\n endLabel = \"End date\",\n className,\n}: DateRangeFieldProps) {\n const [internal, setInternal] = useState<DateRangeValue>(defaultValue);\n const current = value ?? internal;\n\n const commit = (next: DateRangeValue) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n return (\n <div className={cx(\"ds-daterange\", className)}>\n <DateField\n aria-label={startLabel}\n size={size}\n value={current.start}\n min={min}\n max={current.end || max}\n isDisabled={isDisabled}\n placeholder={startLabel}\n onValueChange={(next) => commit({ ...current, start: next })}\n />\n <span className=\"ds-daterange__dash\" aria-hidden=\"true\">\n –\n </span>\n <DateField\n aria-label={endLabel}\n size={size}\n value={current.end}\n min={current.start || min}\n max={max}\n isDisabled={isDisabled}\n placeholder={endLabel}\n onValueChange={(next) => commit({ ...current, end: next })}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,sFAAsF;AACtF,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAkB7B,2DAA2D;AAC3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAI/D;AAYD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,sFAAsF;AACtF,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAkB7B,2DAA2D;AAC3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAI/D;AAYD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,0GA8HnB,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,qFAAqF;AACrF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,IAAW,EACX,WAA2B,EAC3B,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,SAAiB,EACjB,cAAc,EAAE,WAAW,EAC3B,EAAE,EACF,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,+BAwEhB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAqC,EACrC,aAAa,EACb,IAAW,EACX,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,UAAyB,EACzB,QAAqB,EACrB,SAAS,GACV,EAAE,mBAAmB,+BAoCrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,sFAAsF;AACtF,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAkB7B,2DAA2D;AAC3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAI/D;AAYD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,sFAAsF;AACtF,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAkB7B,2DAA2D;AAC3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAI/D;AAYD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,0GA8HnB,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,qFAAqF;AACrF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,IAAW,EACX,WAA2B,EAC3B,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,SAAiB,EACjB,cAAc,EAAE,WAAW,EAC3B,EAAE,EACF,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,+BAwEhB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAqC,EACrC,aAAa,EACb,IAAW,EACX,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,UAAyB,EACzB,QAAqB,EACrB,SAAS,GACV,EAAE,mBAAmB,+BAoCrB"}
|
|
@@ -114,85 +114,86 @@ var _ = r(function({ value: e, endValue: n, onSelect: r, min: a, max: _, classNa
|
|
|
114
114
|
className: "ds-calendar__grid",
|
|
115
115
|
role: "grid",
|
|
116
116
|
onKeyDown: M,
|
|
117
|
-
children: Array.from({ length: 6 }, (
|
|
117
|
+
children: Array.from({ length: 6 }, (i, o) => /* @__PURE__ */ c("div", {
|
|
118
118
|
role: "row",
|
|
119
119
|
className: "ds-calendar__row",
|
|
120
|
-
children: O.slice(
|
|
121
|
-
let
|
|
122
|
-
return /* @__PURE__ */ c(
|
|
123
|
-
|
|
120
|
+
children: O.slice(o * 7, o * 7 + 7).map((i) => {
|
|
121
|
+
let o = f(i), s = i.getMonth() !== S.getMonth(), l = a && o < a || _ && o > _, u = !!(e && n && o > e && o < n), d = o === e || o === n;
|
|
122
|
+
return /* @__PURE__ */ c(t, {
|
|
123
|
+
variant: d ? "primary" : u ? "active" : o === k ? "neutral" : "simple",
|
|
124
|
+
size: "sm",
|
|
125
|
+
isIconOnly: !0,
|
|
124
126
|
role: "gridcell",
|
|
125
|
-
"aria-label": m(
|
|
126
|
-
tabIndex:
|
|
127
|
-
|
|
128
|
-
"aria-selected":
|
|
129
|
-
"data-outside":
|
|
130
|
-
"data-today":
|
|
131
|
-
"data-in-range":
|
|
132
|
-
"data-focused":
|
|
127
|
+
"aria-label": m(o),
|
|
128
|
+
tabIndex: o === w ? 0 : -1,
|
|
129
|
+
isDisabled: !!l,
|
|
130
|
+
"aria-selected": d || void 0,
|
|
131
|
+
"data-outside": s || void 0,
|
|
132
|
+
"data-today": o === k || void 0,
|
|
133
|
+
"data-in-range": u || void 0,
|
|
134
|
+
"data-focused": o === w || void 0,
|
|
133
135
|
className: "ds-calendar__day",
|
|
134
136
|
onClick: () => {
|
|
135
|
-
T(
|
|
137
|
+
T(o), r?.(o);
|
|
136
138
|
},
|
|
137
|
-
children:
|
|
138
|
-
},
|
|
139
|
+
children: i.getDate()
|
|
140
|
+
}, o);
|
|
139
141
|
})
|
|
140
|
-
},
|
|
142
|
+
}, o))
|
|
141
143
|
})
|
|
142
144
|
]
|
|
143
145
|
});
|
|
144
146
|
});
|
|
145
|
-
function v({ value:
|
|
146
|
-
let [
|
|
147
|
+
function v({ value: r, defaultValue: d = "", onValueChange: f, size: p = "md", placeholder: h = "Pick a date", min: g, max: v, isDisabled: y = !1, isInvalid: b = !1, "aria-invalid": x, id: S, className: C, ...w }) {
|
|
148
|
+
let [T, E] = s(d), D = r ?? T, [O, k] = s(!1), A = o(null), j = o(null), M = o(null), N = a(), P = S ?? N;
|
|
147
149
|
return i(() => {
|
|
148
|
-
if (!
|
|
150
|
+
if (!O) return;
|
|
149
151
|
let e = (e) => {
|
|
150
152
|
let t = e.target;
|
|
151
|
-
!
|
|
153
|
+
!A.current?.contains(t) && !M.current?.contains(t) && k(!1);
|
|
152
154
|
}, t = (e) => {
|
|
153
|
-
e.key === "Escape" && (
|
|
155
|
+
e.key === "Escape" && (e.preventDefault(), k(!1), j.current?.focus());
|
|
154
156
|
};
|
|
155
157
|
return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
|
|
156
158
|
document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
|
|
157
159
|
};
|
|
158
|
-
}, [
|
|
159
|
-
className: u("ds-datefield",
|
|
160
|
-
ref:
|
|
161
|
-
children: [/* @__PURE__ */ l(
|
|
162
|
-
...
|
|
163
|
-
ref:
|
|
164
|
-
id:
|
|
165
|
-
|
|
160
|
+
}, [O]), /* @__PURE__ */ l("div", {
|
|
161
|
+
className: u("ds-datefield", C),
|
|
162
|
+
ref: A,
|
|
163
|
+
children: [/* @__PURE__ */ l(t, {
|
|
164
|
+
...w,
|
|
165
|
+
ref: j,
|
|
166
|
+
id: P,
|
|
167
|
+
size: p,
|
|
166
168
|
"aria-haspopup": "dialog",
|
|
167
|
-
"aria-expanded":
|
|
168
|
-
"aria-invalid":
|
|
169
|
-
|
|
170
|
-
"data-
|
|
171
|
-
"data-placeholder": E ? void 0 : "",
|
|
169
|
+
"aria-expanded": O,
|
|
170
|
+
"aria-invalid": b || x || void 0,
|
|
171
|
+
isDisabled: y,
|
|
172
|
+
"data-placeholder": D ? void 0 : "",
|
|
172
173
|
className: "ds-field-skin ds-datefield__control",
|
|
173
|
-
onClick: () =>
|
|
174
|
+
onClick: () => k((e) => !e),
|
|
174
175
|
children: [/* @__PURE__ */ c("span", {
|
|
175
176
|
className: "ds-datefield__value",
|
|
176
|
-
children:
|
|
177
|
+
children: D ? m(D) : h
|
|
177
178
|
}), /* @__PURE__ */ c(e, {
|
|
178
179
|
name: "calendar",
|
|
179
180
|
size: 16,
|
|
180
181
|
className: "ds-datefield__glyph"
|
|
181
182
|
})]
|
|
182
183
|
}), /* @__PURE__ */ c(n, {
|
|
183
|
-
anchorRef:
|
|
184
|
-
anchorId:
|
|
185
|
-
isOpen:
|
|
186
|
-
panelRef:
|
|
184
|
+
anchorRef: j,
|
|
185
|
+
anchorId: P,
|
|
186
|
+
isOpen: O,
|
|
187
|
+
panelRef: M,
|
|
187
188
|
className: "ds-datefield__popover",
|
|
188
189
|
role: "dialog",
|
|
189
190
|
"aria-label": "Choose a date",
|
|
190
191
|
children: /* @__PURE__ */ c(_, {
|
|
191
|
-
value:
|
|
192
|
-
min:
|
|
193
|
-
max:
|
|
192
|
+
value: D,
|
|
193
|
+
min: g,
|
|
194
|
+
max: v,
|
|
194
195
|
onSelect: (e) => {
|
|
195
|
-
|
|
196
|
+
r === void 0 && E(e), f?.(e), k(!1), j.current?.focus();
|
|
196
197
|
}
|
|
197
198
|
})
|
|
198
199
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Icon","cx","parts","WEEKDAYS","toIso","month","date","day","fromIso","value","year","formatIsoDate","monthLabel","startOfGrid","first","weekday","Calendar","forwardRef","rest","selected","setMonth","useState","focused","setFocused","gridRef","useRef","shouldFocus","useEffect","next","days","start","index","today","changeMonth","delta","move","base","deltaDays","onKeyDown","event","className","Button","rowIndex","iso","isOutside","isDisabled","min","max","inRange","endValue","isEdge","onSelect","DateField","ariaInvalid","internal","setInternal","defaultValue","current","isOpen","setOpen","rootRef","triggerRef","panelRef","generatedId","useId","triggerId","id","onPointerDown","target","isInvalid","size","open","placeholder","Popover","onValueChange","DateRangeField","commit","startLabel","endLabel"],"sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type HTMLAttributes,\n type AriaAttributes,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\n/** ISO calendar date, \"YYYY-MM-DD\" — the only date shape the system passes around. */\nexport type IsoDate = string;\n\nconst WEEKDAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nfunction toIso(date: Date): IsoDate {\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const day = `${date.getDate()}`.padStart(2, \"0\");\n return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction fromIso(value: string | undefined): Date | null {\n if (!value || !/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n const [year, month, day] = value.split(\"-\").map(Number);\n if (!year || !month || !day) return null;\n const date = new Date(year, month - 1, day);\n return Number.isNaN(date.getTime()) || toIso(date) !== value ? null : date;\n}\n\n/** \"12 March 2026\" — the system's one long date format. */\nexport function formatIsoDate(value: string | undefined): string {\n const date = fromIso(value);\n if (!date) return \"\";\n return date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"long\", year: \"numeric\" });\n}\n\nfunction monthLabel(date: Date) {\n return date.toLocaleDateString(\"en-GB\", { month: \"long\", year: \"numeric\" });\n}\n\nfunction startOfGrid(month: Date) {\n const first = new Date(month.getFullYear(), month.getMonth(), 1);\n const weekday = (first.getDay() + 6) % 7; // Monday-first\n return new Date(first.getFullYear(), first.getMonth(), 1 - weekday);\n}\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Selected day, or the start of a selected span. */\n value?: IsoDate;\n /** End of a selected span. Set it to put the calendar in range mode. */\n endValue?: IsoDate;\n onSelect?: (value: IsoDate) => void;\n min?: IsoDate;\n max?: IsoDate;\n}\n\n/**\n * A month of days, Monday first. Arrow keys walk the grid; the month follows\n * the focused day, so a whole year is reachable from the keyboard.\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n { value, endValue, onSelect, min, max, className, ...rest },\n ref,\n) {\n const selected = fromIso(value);\n const [month, setMonth] = useState(() => selected ?? new Date());\n const [focused, setFocused] = useState<IsoDate>(() => value ?? toIso(new Date()));\n const gridRef = useRef<HTMLDivElement | null>(null);\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n const next = fromIso(value);\n if (!next) return;\n // Controlled changes intentionally reposition the visible and roving-focus month.\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFocused(value!);\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n }, [value]);\n\n useEffect(() => {\n if (!shouldFocus.current) return;\n shouldFocus.current = false;\n gridRef.current?.querySelector<HTMLButtonElement>(\"[data-focused]\")?.focus();\n }, [focused]);\n\n const days = Array.from({ length: 42 }, (_, index) => {\n const start = startOfGrid(month);\n return new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);\n });\n\n const today = toIso(new Date());\n\n const changeMonth = (delta: number) => {\n const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);\n setMonth(next);\n setFocused(toIso(next));\n };\n\n const move = (deltaDays: number) => {\n const base = fromIso(focused) ?? new Date();\n const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);\n shouldFocus.current = true;\n setFocused(toIso(next));\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const steps: Record<string, number> = {\n ArrowLeft: -1,\n ArrowRight: 1,\n ArrowUp: -7,\n ArrowDown: 7,\n PageUp: -28,\n PageDown: 28,\n };\n const delta = steps[event.key];\n if (delta === undefined) return;\n event.preventDefault();\n move(delta);\n };\n\n return (\n <div ref={ref} className={cx(\"ds-calendar\", className)} {...rest}>\n <div className=\"ds-calendar__head\">\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-left\"\n aria-label=\"Previous month\"\n onClick={() => changeMonth(-1)}\n />\n <span className=\"ds-calendar__month\">{monthLabel(month)}</span>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-right\"\n aria-label=\"Next month\"\n onClick={() => changeMonth(1)}\n />\n </div>\n <div className=\"ds-calendar__weekdays\" aria-hidden=\"true\">\n {WEEKDAYS.map((day) => (\n <span key={day}>{day.slice(0, 2)}</span>\n ))}\n </div>\n <div ref={gridRef} className=\"ds-calendar__grid\" role=\"grid\" onKeyDown={onKeyDown}>\n {Array.from({ length: 6 }, (_, rowIndex) => (\n <div role=\"row\" className=\"ds-calendar__row\" key={rowIndex}>\n {days.slice(rowIndex * 7, rowIndex * 7 + 7).map((day) => {\n const iso = toIso(day);\n const isOutside = day.getMonth() !== month.getMonth();\n const isDisabled = (min && iso < min) || (max && iso > max);\n const inRange = Boolean(value && endValue && iso > value && iso < endValue);\n const isEdge = iso === value || iso === endValue;\n return (\n <button\n key={iso}\n type=\"button\"\n role=\"gridcell\"\n aria-label={formatIsoDate(iso)}\n tabIndex={iso === focused ? 0 : -1}\n disabled={isDisabled || undefined}\n aria-selected={isEdge || undefined}\n data-outside={isOutside || undefined}\n data-today={iso === today || undefined}\n data-in-range={inRange || undefined}\n data-focused={iso === focused || undefined}\n className=\"ds-calendar__day\"\n onClick={() => {\n setFocused(iso);\n onSelect?.(iso);\n }}\n >\n {day.getDate()}\n </button>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n );\n});\n\nexport interface DateFieldProps {\n value?: IsoDate;\n defaultValue?: IsoDate;\n onValueChange?: (value: IsoDate) => void;\n size?: FieldSize;\n placeholder?: string;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n isInvalid?: boolean;\n id?: string;\n className?: string;\n \"aria-label\"?: string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\n/** One day, picked from a calendar. The field prints the long date, never a mask. */\nexport function DateField({\n value,\n defaultValue = \"\",\n onValueChange,\n size = \"md\",\n placeholder = \"Pick a date\",\n min,\n max,\n isDisabled = false,\n isInvalid = false,\n \"aria-invalid\": ariaInvalid,\n id,\n className,\n ...rest\n}: DateFieldProps) {\n const [internal, setInternal] = useState<IsoDate>(defaultValue);\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const panelRef = useRef<HTMLDivElement | null>(null);\n const generatedId = useId();\n const triggerId = id ?? generatedId;\n\n useEffect(() => {\n if (!isOpen) return;\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) setOpen(false);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setOpen(false);\n triggerRef.current?.focus();\n }\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"mousedown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n <div className={cx(\"ds-datefield\", className)} ref={rootRef}>\n <button\n {...rest}\n ref={triggerRef}\n id={triggerId}\n type=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-invalid={isInvalid || ariaInvalid || undefined}\n disabled={isDisabled}\n data-size={size}\n data-placeholder={current ? undefined : \"\"}\n className=\"ds-field-skin ds-datefield__control\"\n onClick={() => setOpen((open) => !open)}\n >\n <span className=\"ds-datefield__value\">{current ? formatIsoDate(current) : placeholder}</span>\n <Icon name=\"calendar\" size={16} className=\"ds-datefield__glyph\" />\n </button>\n <Popover\n anchorRef={triggerRef}\n anchorId={triggerId}\n isOpen={isOpen}\n panelRef={panelRef}\n className=\"ds-datefield__popover\"\n role=\"dialog\"\n aria-label=\"Choose a date\"\n >\n <Calendar\n value={current}\n min={min}\n max={max}\n onSelect={(next) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n triggerRef.current?.focus();\n }}\n />\n </Popover>\n </div>\n );\n}\n\nexport interface DateRangeValue {\n start: IsoDate;\n end: IsoDate;\n}\n\nexport interface DateRangeFieldProps {\n value?: DateRangeValue;\n defaultValue?: DateRangeValue;\n onValueChange?: (value: DateRangeValue) => void;\n size?: FieldSize;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n startLabel?: string;\n endLabel?: string;\n className?: string;\n}\n\n/** A span of days. The end field never offers a day before the start. */\nexport function DateRangeField({\n value,\n defaultValue = { start: \"\", end: \"\" },\n onValueChange,\n size = \"md\",\n min,\n max,\n isDisabled = false,\n startLabel = \"Start date\",\n endLabel = \"End date\",\n className,\n}: DateRangeFieldProps) {\n const [internal, setInternal] = useState<DateRangeValue>(defaultValue);\n const current = value ?? internal;\n\n const commit = (next: DateRangeValue) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n return (\n <div className={cx(\"ds-daterange\", className)}>\n <DateField\n aria-label={startLabel}\n size={size}\n value={current.start}\n min={min}\n max={current.end || max}\n isDisabled={isDisabled}\n placeholder={startLabel}\n onValueChange={(next) => commit({ ...current, start: next })}\n />\n <span className=\"ds-daterange__dash\" aria-hidden=\"true\">\n –\n </span>\n <DateField\n aria-label={endLabel}\n size={size}\n value={current.end}\n min={current.start || min}\n max={max}\n isDisabled={isDisabled}\n placeholder={endLabel}\n onValueChange={(next) => commit({ ...current, end: next })}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["Icon","cx","parts","WEEKDAYS","toIso","month","date","day","fromIso","value","year","formatIsoDate","monthLabel","startOfGrid","first","weekday","Calendar","forwardRef","rest","selected","setMonth","useState","focused","setFocused","gridRef","useRef","shouldFocus","useEffect","next","days","start","index","today","changeMonth","delta","move","base","deltaDays","onKeyDown","event","className","Button","rowIndex","iso","isOutside","isDisabled","min","max","inRange","endValue","isEdge","onSelect","DateField","ariaInvalid","internal","setInternal","defaultValue","current","isOpen","setOpen","rootRef","triggerRef","panelRef","generatedId","useId","triggerId","id","onPointerDown","target","isInvalid","open","placeholder","Popover","onValueChange","DateRangeField","commit","startLabel","endLabel"],"sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type HTMLAttributes,\n type AriaAttributes,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\n/** ISO calendar date, \"YYYY-MM-DD\" — the only date shape the system passes around. */\nexport type IsoDate = string;\n\nconst WEEKDAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nfunction toIso(date: Date): IsoDate {\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const day = `${date.getDate()}`.padStart(2, \"0\");\n return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction fromIso(value: string | undefined): Date | null {\n if (!value || !/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n const [year, month, day] = value.split(\"-\").map(Number);\n if (!year || !month || !day) return null;\n const date = new Date(year, month - 1, day);\n return Number.isNaN(date.getTime()) || toIso(date) !== value ? null : date;\n}\n\n/** \"12 March 2026\" — the system's one long date format. */\nexport function formatIsoDate(value: string | undefined): string {\n const date = fromIso(value);\n if (!date) return \"\";\n return date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"long\", year: \"numeric\" });\n}\n\nfunction monthLabel(date: Date) {\n return date.toLocaleDateString(\"en-GB\", { month: \"long\", year: \"numeric\" });\n}\n\nfunction startOfGrid(month: Date) {\n const first = new Date(month.getFullYear(), month.getMonth(), 1);\n const weekday = (first.getDay() + 6) % 7; // Monday-first\n return new Date(first.getFullYear(), first.getMonth(), 1 - weekday);\n}\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Selected day, or the start of a selected span. */\n value?: IsoDate;\n /** End of a selected span. Set it to put the calendar in range mode. */\n endValue?: IsoDate;\n onSelect?: (value: IsoDate) => void;\n min?: IsoDate;\n max?: IsoDate;\n}\n\n/**\n * A month of days, Monday first. Arrow keys walk the grid; the month follows\n * the focused day, so a whole year is reachable from the keyboard.\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n { value, endValue, onSelect, min, max, className, ...rest },\n ref,\n) {\n const selected = fromIso(value);\n const [month, setMonth] = useState(() => selected ?? new Date());\n const [focused, setFocused] = useState<IsoDate>(() => value ?? toIso(new Date()));\n const gridRef = useRef<HTMLDivElement | null>(null);\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n const next = fromIso(value);\n if (!next) return;\n // Controlled changes intentionally reposition the visible and roving-focus month.\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFocused(value!);\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n }, [value]);\n\n useEffect(() => {\n if (!shouldFocus.current) return;\n shouldFocus.current = false;\n gridRef.current?.querySelector<HTMLButtonElement>(\"[data-focused]\")?.focus();\n }, [focused]);\n\n const days = Array.from({ length: 42 }, (_, index) => {\n const start = startOfGrid(month);\n return new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);\n });\n\n const today = toIso(new Date());\n\n const changeMonth = (delta: number) => {\n const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);\n setMonth(next);\n setFocused(toIso(next));\n };\n\n const move = (deltaDays: number) => {\n const base = fromIso(focused) ?? new Date();\n const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);\n shouldFocus.current = true;\n setFocused(toIso(next));\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const steps: Record<string, number> = {\n ArrowLeft: -1,\n ArrowRight: 1,\n ArrowUp: -7,\n ArrowDown: 7,\n PageUp: -28,\n PageDown: 28,\n };\n const delta = steps[event.key];\n if (delta === undefined) return;\n event.preventDefault();\n move(delta);\n };\n\n return (\n <div ref={ref} className={cx(\"ds-calendar\", className)} {...rest}>\n <div className=\"ds-calendar__head\">\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-left\"\n aria-label=\"Previous month\"\n onClick={() => changeMonth(-1)}\n />\n <span className=\"ds-calendar__month\">{monthLabel(month)}</span>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-right\"\n aria-label=\"Next month\"\n onClick={() => changeMonth(1)}\n />\n </div>\n <div className=\"ds-calendar__weekdays\" aria-hidden=\"true\">\n {WEEKDAYS.map((day) => (\n <span key={day}>{day.slice(0, 2)}</span>\n ))}\n </div>\n <div ref={gridRef} className=\"ds-calendar__grid\" role=\"grid\" onKeyDown={onKeyDown}>\n {Array.from({ length: 6 }, (_, rowIndex) => (\n <div role=\"row\" className=\"ds-calendar__row\" key={rowIndex}>\n {days.slice(rowIndex * 7, rowIndex * 7 + 7).map((day) => {\n const iso = toIso(day);\n const isOutside = day.getMonth() !== month.getMonth();\n const isDisabled = (min && iso < min) || (max && iso > max);\n const inRange = Boolean(value && endValue && iso > value && iso < endValue);\n const isEdge = iso === value || iso === endValue;\n return (\n <Button\n key={iso}\n variant={isEdge ? \"primary\" : inRange ? \"active\" : iso === today ? \"neutral\" : \"simple\"}\n size=\"sm\"\n isIconOnly\n role=\"gridcell\"\n aria-label={formatIsoDate(iso)}\n tabIndex={iso === focused ? 0 : -1}\n isDisabled={Boolean(isDisabled)}\n aria-selected={isEdge || undefined}\n data-outside={isOutside || undefined}\n data-today={iso === today || undefined}\n data-in-range={inRange || undefined}\n data-focused={iso === focused || undefined}\n className=\"ds-calendar__day\"\n onClick={() => {\n setFocused(iso);\n onSelect?.(iso);\n }}\n >\n {day.getDate()}\n </Button>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n );\n});\n\nexport interface DateFieldProps {\n value?: IsoDate;\n defaultValue?: IsoDate;\n onValueChange?: (value: IsoDate) => void;\n size?: FieldSize;\n placeholder?: string;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n isInvalid?: boolean;\n id?: string;\n className?: string;\n \"aria-label\"?: string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\n/** One day, picked from a calendar. The field prints the long date, never a mask. */\nexport function DateField({\n value,\n defaultValue = \"\",\n onValueChange,\n size = \"md\",\n placeholder = \"Pick a date\",\n min,\n max,\n isDisabled = false,\n isInvalid = false,\n \"aria-invalid\": ariaInvalid,\n id,\n className,\n ...rest\n}: DateFieldProps) {\n const [internal, setInternal] = useState<IsoDate>(defaultValue);\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const panelRef = useRef<HTMLDivElement | null>(null);\n const generatedId = useId();\n const triggerId = id ?? generatedId;\n\n useEffect(() => {\n if (!isOpen) return;\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) setOpen(false);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n setOpen(false);\n triggerRef.current?.focus();\n }\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"mousedown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n <div className={cx(\"ds-datefield\", className)} ref={rootRef}>\n <Button\n {...rest}\n ref={triggerRef}\n id={triggerId}\n size={size}\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-invalid={isInvalid || ariaInvalid || undefined}\n isDisabled={isDisabled}\n data-placeholder={current ? undefined : \"\"}\n className=\"ds-field-skin ds-datefield__control\"\n onClick={() => setOpen((open) => !open)}\n >\n <span className=\"ds-datefield__value\">{current ? formatIsoDate(current) : placeholder}</span>\n <Icon name=\"calendar\" size={16} className=\"ds-datefield__glyph\" />\n </Button>\n <Popover\n anchorRef={triggerRef}\n anchorId={triggerId}\n isOpen={isOpen}\n panelRef={panelRef}\n className=\"ds-datefield__popover\"\n role=\"dialog\"\n aria-label=\"Choose a date\"\n >\n <Calendar\n value={current}\n min={min}\n max={max}\n onSelect={(next) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n triggerRef.current?.focus();\n }}\n />\n </Popover>\n </div>\n );\n}\n\nexport interface DateRangeValue {\n start: IsoDate;\n end: IsoDate;\n}\n\nexport interface DateRangeFieldProps {\n value?: DateRangeValue;\n defaultValue?: DateRangeValue;\n onValueChange?: (value: DateRangeValue) => void;\n size?: FieldSize;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n startLabel?: string;\n endLabel?: string;\n className?: string;\n}\n\n/** A span of days. The end field never offers a day before the start. */\nexport function DateRangeField({\n value,\n defaultValue = { start: \"\", end: \"\" },\n onValueChange,\n size = \"md\",\n min,\n max,\n isDisabled = false,\n startLabel = \"Start date\",\n endLabel = \"End date\",\n className,\n}: DateRangeFieldProps) {\n const [internal, setInternal] = useState<DateRangeValue>(defaultValue);\n const current = value ?? internal;\n\n const commit = (next: DateRangeValue) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n return (\n <div className={cx(\"ds-daterange\", className)}>\n <DateField\n aria-label={startLabel}\n size={size}\n value={current.start}\n min={min}\n max={current.end || max}\n isDisabled={isDisabled}\n placeholder={startLabel}\n onValueChange={(next) => commit({ ...current, start: next })}\n />\n <span className=\"ds-daterange__dash\" aria-hidden=\"true\">\n –\n </span>\n <DateField\n aria-label={endLabel}\n size={size}\n value={current.end}\n min={current.start || min}\n max={max}\n isDisabled={isDisabled}\n placeholder={endLabel}\n onValueChange={(next) => commit({ ...current, end: next })}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -45,52 +45,11 @@
|
|
|
45
45
|
display: contents;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.ds-calendar__day {
|
|
49
|
-
display: grid;
|
|
50
|
-
place-items: center;
|
|
51
|
-
inline-size: var(--calendar-cell-size);
|
|
52
|
-
block-size: var(--calendar-cell-size);
|
|
53
|
-
border: var(--control-border-width) solid transparent;
|
|
54
|
-
border-radius: var(--field-radius);
|
|
55
|
-
background: transparent;
|
|
56
|
-
color: var(--color-text);
|
|
57
|
-
font-family: var(--font-sans);
|
|
58
|
-
font-size: var(--font-size-sm);
|
|
59
|
-
cursor: pointer;
|
|
60
|
-
transition: background-color var(--duration-fast) var(--ease-standard);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.ds-calendar__day:hover:not(:disabled) {
|
|
64
|
-
background: var(--field-hover);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.ds-calendar__day:focus-visible {
|
|
68
|
-
outline: var(--control-border-width) solid var(--color-focus);
|
|
69
|
-
outline-offset: 2px;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.ds-calendar__day[data-outside] {
|
|
73
|
-
color: var(--color-text-muted);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.ds-calendar__day[data-today] {
|
|
77
|
-
border-color: var(--control-border-color);
|
|
78
|
-
font-weight: var(--font-weight-bold);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.ds-calendar__day[data-in-range] {
|
|
82
|
-
background: var(--color-primary-soft);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.ds-calendar__day[aria-selected="true"] {
|
|
86
|
-
background: var(--color-primary);
|
|
87
|
-
color: var(--color-text-on-solid);
|
|
88
|
-
font-weight: var(--font-weight-bold);
|
|
89
|
-
}
|
|
48
|
+
.ds-calendar__day { justify-self: center; }
|
|
90
49
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
50
|
+
/* Days of the shown month read as text; spill-over days stay muted. */
|
|
51
|
+
.ds-calendar__day[data-variant="simple"]:not([data-outside]) {
|
|
52
|
+
color: var(--color-text);
|
|
94
53
|
}
|
|
95
54
|
|
|
96
55
|
.ds-datefield {
|
|
@@ -103,26 +62,10 @@
|
|
|
103
62
|
align-items: center;
|
|
104
63
|
justify-content: space-between;
|
|
105
64
|
gap: var(--space-2);
|
|
106
|
-
padding: 0 10px;
|
|
107
65
|
text-align: start;
|
|
108
66
|
cursor: pointer;
|
|
109
67
|
}
|
|
110
68
|
|
|
111
|
-
.ds-datefield__control[data-size="sm"] {
|
|
112
|
-
block-size: var(--field-height-sm);
|
|
113
|
-
font-size: var(--field-font-size-sm);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.ds-datefield__control[data-size="md"] {
|
|
117
|
-
block-size: var(--field-height-md);
|
|
118
|
-
font-size: var(--field-font-size-md);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.ds-datefield__control[data-size="lg"] {
|
|
122
|
-
block-size: var(--field-height-lg);
|
|
123
|
-
font-size: var(--field-font-size-md);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
69
|
.ds-datefield__control[data-placeholder] .ds-datefield__value {
|
|
127
70
|
color: var(--color-text-muted);
|
|
128
71
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs");let t=require("react"),n=require("react
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs");let t=require("react"),n=require("react-dom"),r=require("react/jsx-runtime");var i=(0,t.forwardRef)(function({isOpen:i,onClose:a,title:o,description:s,side:c=`end`,size:l=`md`,variant:u=`default`,closeLabel:d=`Close`,portalContainer:f,footer:p,className:m,children:h,...g},_){let v=(0,t.useRef)(null),y=(0,t.useRef)(null),b=(0,t.useRef)(null),x=(0,t.useRef)(a),S=(0,t.useId)(),C=(0,t.useId)(),[w,T]=(0,t.useState)(i),[E,D]=(0,t.useState)(!1);return w!==i&&(T(i),D(!i&&u===`navigation`)),(0,t.useEffect)(()=>{if(!E||i)return;let e=getComputedStyle(y.current).transitionDuration.split(`,`),t=Math.max(0,...e.map(e=>parseFloat(e)*(e.trim().endsWith(`ms`)?1:1e3)||0)),n=window.setTimeout(()=>D(!1),t);return()=>window.clearTimeout(n)},[E,i]),(0,t.useEffect)(()=>{x.current=a},[a]),(0,t.useEffect)(()=>{if(!i)return;let e=document.activeElement,t=u===`navigation`?{preventScroll:!0}:void 0,n=`:is(button, [href], input, select, textarea, [tabindex]):not(:disabled):not([tabindex='-1'])`;((u===`navigation`?b.current:v.current?.querySelector(n))??v.current)?.focus(t);let r=e=>{if(e.key===`Escape`){if(e.defaultPrevented)return;e.preventDefault(),x.current();return}if(e.key!==`Tab`)return;let t=Array.from(v.current?.querySelectorAll(n)??[]);if(t.length===0)return;let r=t[0],i=t[t.length-1];e.shiftKey&&(document.activeElement===r||!v.current?.contains(document.activeElement))?(e.preventDefault(),i.focus()):!e.shiftKey&&(document.activeElement===i||!v.current?.contains(document.activeElement))&&(e.preventDefault(),r.focus())};window.addEventListener(`keydown`,r);let a=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{window.removeEventListener(`keydown`,r),document.body.style.overflow=a,e?.focus(t)}},[i,u,f]),!i&&!E||typeof document>`u`?null:(0,n.createPortal)((0,r.jsx)(`div`,{ref:e=>{y.current=e,e&&(e.inert=!i)},className:`ds-drawer-scrim`,"data-side":c,"data-variant":u,"data-contained":f?``:void 0,"data-state":i?`open`:`closed`,"aria-hidden":!i||void 0,onTransitionEnd:e=>{e.target===e.currentTarget&&e.propertyName===`opacity`&&!i&&D(!1)},onMouseDown:e=>i&&e.target===e.currentTarget&&x.current(),children:(0,r.jsxs)(`div`,{...g,ref:e=>{v.current=e,typeof _==`function`?_(e):_&&(_.current=e)},role:`dialog`,"aria-modal":`true`,"aria-labelledby":g[`aria-label`]?void 0:g[`aria-labelledby`]??S,"aria-describedby":s?C:void 0,tabIndex:-1,"data-side":c,"data-size":l,"data-variant":u,className:[`ds-drawer`,m].filter(Boolean).join(` `),children:[(0,r.jsxs)(`header`,{className:`ds-drawer__head`,children:[(0,r.jsxs)(`div`,{className:`ds-drawer__titles`,children:[(0,r.jsx)(`h2`,{id:S,className:`ds-drawer__title`,children:o}),s&&(0,r.jsx)(`p`,{id:C,className:`ds-drawer__description`,children:s})]}),(0,r.jsx)(e.Button,{ref:b,variant:`simple`,size:u===`navigation`?`lg`:`sm`,isIconOnly:!0,iconStart:`x`,className:u===`navigation`?`ds-drawer__close`:void 0,"aria-label":d,onClick:()=>x.current()})]}),(0,r.jsx)(`div`,{className:`ds-drawer__body`,children:h}),p&&(0,r.jsx)(`footer`,{className:`ds-drawer__footer`,children:p})]})}),f??document.body)});exports.Drawer=i;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|