@infonomic/uikit 5.28.0 → 5.30.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.
Files changed (10) hide show
  1. package/dist/widgets/datepicker/datepicker.d.ts +2 -1
  2. package/dist/widgets/datepicker/datepicker.d.ts.map +1 -1
  3. package/dist/widgets/datepicker/datepicker.js +4 -4
  4. package/dist/widgets/datepicker/datepicker.module.css +31 -14
  5. package/dist/widgets/datepicker/datepicker_module.css +22 -21
  6. package/package.json +1 -1
  7. package/src/widgets/datepicker/datepicker.module.css +31 -14
  8. package/src/widgets/datepicker/datepicker.stories.tsx +22 -7
  9. package/src/widgets/datepicker/datepicker.tsx +13 -11
  10. package/src/widgets/drawer/drawer.stories.tsx +13 -0
package/dist/widgets/datepicker/datepicker.d.ts CHANGED
@@ -21,6 +21,7 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
21
21
  inputClassName?: string;
22
22
  intent?: Intent;
23
23
  containerClassName?: string;
24
+ contentClassName?: string;
24
25
  helpText?: string;
25
26
  errorText?: string;
26
27
  ariaLabelForSearch?: string;
@@ -33,5 +34,5 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
33
34
  };
34
35
  placeHolderText?: string;
35
36
  }
36
- export declare function DatePicker({ id, name, label, required, initialValue, mode, yearsInFuture, yearsInPast, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear, onDateChange, validatorFn, helpText, errorText, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: DatePickerProps): React.JSX.Element;
37
+ export declare function DatePicker({ id, name, label, required, initialValue, mode, yearsInFuture, yearsInPast, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear, onDateChange, validatorFn, helpText, errorText, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: DatePickerProps): React.JSX.Element;
37
38
  //# sourceMappingURL=datepicker.d.ts.map
package/dist/widgets/datepicker/datepicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/widgets/datepicker/datepicker.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAA;AAEnF,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAClF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK;QAC7B,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,IAAI,CAAA;KACZ,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,IAAiB,EACjB,aAAiB,EACjB,WAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,OAAkB,EAClB,YAAuB,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,eAAoB,EACpB,kBAA2B,EAC3B,iBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiPrC"}
1
+ {"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/widgets/datepicker/datepicker.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAA;AAEnF,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAClF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK;QAC7B,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,IAAI,CAAA;KACZ,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,IAAiB,EACjB,aAAiB,EACjB,WAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,OAAmB,EACnB,YAAwB,EACxB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,eAAoB,EACpB,kBAA2B,EAC3B,iBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiPrC"}
package/dist/widgets/datepicker/datepicker.js CHANGED
@@ -13,7 +13,7 @@ import { ScrollArea } from "../../components/scroll-area/scroll-area.js";
13
13
  import { CalendarIcon } from "../../icons/calendar-icon.js";
14
14
  import { CloseIcon } from "../../icons/close-icon.js";
15
15
  import datepicker_module from "./datepicker.module.js";
16
- function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
16
+ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
17
17
  const [isOpen, setIsOpen] = useState(false);
18
18
  const [time, setTime] = useState('08:00');
19
19
  const [date, setDate] = useState(()=>{
@@ -73,7 +73,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
73
73
  e.stopPropagation();
74
74
  setIsOpen(true);
75
75
  },
76
- value: date ? `${format(date, 'PP HH:mm')}` : '',
76
+ value: date ? format(date, 'datetime' === mode ? 'PP HH:mm' : 'PP') : '',
77
77
  placeHolder: placeHolderText,
78
78
  helpText: helpText,
79
79
  disabled: false,
@@ -134,7 +134,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
134
134
  /*#__PURE__*/ jsx(Popover.Portal, {
135
135
  children: /*#__PURE__*/ jsxs(Popover.Content, {
136
136
  sideOffset: 5,
137
- className: datepicker_module.content,
137
+ className: classnames(datepicker_module.content, contentClassName),
138
138
  children: [
139
139
  /*#__PURE__*/ jsxs("div", {
140
140
  className: datepicker_module["content-components"],
@@ -199,7 +199,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
199
199
  children: [
200
200
  /*#__PURE__*/ jsx("div", {
201
201
  className: datepicker_module["content-status"],
202
- children: date ? `${format(date, 'PPPp')}` : 'No date selected'
202
+ children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
203
203
  }),
204
204
  /*#__PURE__*/ jsxs("div", {
205
205
  className: datepicker_module["content-actions"],
package/dist/widgets/datepicker/datepicker.module.css CHANGED
@@ -1,17 +1,23 @@
1
1
  @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
2
2
 
3
3
  @layer infonomic-components {
4
- .container {
4
+
5
+ .container,
6
+ :global(.infonomic-datepicker-container) {
5
7
  position: relative;
6
8
  }
7
9
 
8
10
  .input,
9
- .input-wrapper {
11
+ .input-wrapper,
12
+ :global(.infonomic-datepicker-input),
13
+ :global(.infonomic-datepicker-input-wrapper) {
10
14
  width: 100%;
11
15
  }
12
16
 
13
- .content {
17
+ .content,
18
+ :global(.infonomic-datepicker-content) {
14
19
  width: 100%;
20
+ z-index: 50;
15
21
  border-radius: 4px;
16
22
  padding-top: var(--spacing-16);
17
23
  padding-bottom: var(--spacing-8);
@@ -52,13 +58,15 @@
52
58
  }
53
59
  }
54
60
 
55
- .content-components {
61
+ .content-components,
62
+ :global(.infonomic-datepicker-content-components) {
56
63
  display: flex;
57
64
  width: 100%;
58
65
  gap: var(--spacing-8);
59
66
  }
60
67
 
61
- .status-and-actions {
68
+ .status-and-actions,
69
+ :global(.infonomic-datepicker-status-and-actions) {
62
70
  display: flex;
63
71
  flex-direction: column;
64
72
  justify-content: space-between;
@@ -66,7 +74,8 @@
66
74
  width: 100%;
67
75
  }
68
76
 
69
- .content-status {
77
+ .content-status,
78
+ :global(.infonomic-datepicker-content-status) {
70
79
  display: flex;
71
80
  align-items: center;
72
81
  padding-left: var(--spacing-16);
@@ -76,7 +85,8 @@
76
85
  width: 100%;
77
86
  }
78
87
 
79
- .content-actions {
88
+ .content-actions,
89
+ :global(.infonomic-datepicker-content-actions) {
80
90
  display: flex;
81
91
  flex-direction: row;
82
92
  justify-content: space-between;
@@ -87,16 +97,19 @@
87
97
  width: 100%;
88
98
  }
89
99
 
90
- .content-actions-button {
100
+ .content-actions-button,
101
+ :global(.infonomic-datepicker-content-actions-button) {
91
102
  /* min-width: 100px; */
92
103
  --ring-color: var(--violet-7);
93
104
  }
94
105
 
95
- .arrow {
106
+ .arrow,
107
+ :global(.infonomic-datepicker-arrow) {
96
108
  fill: var(--gray-50);
97
109
  }
98
110
 
99
- .close {
111
+ .close,
112
+ :global(.infonomic-datepicker-close) {
100
113
  all: unset;
101
114
  font-family: inherit;
102
115
  border-radius: 100%;
@@ -119,17 +132,20 @@
119
132
  }
120
133
  }
121
134
 
122
- .time-picker-container {
135
+ .time-picker-container,
136
+ :global(.infonomic-datepicker-time-picker-container) {
123
137
  width: 80px;
124
138
  margin: 0.6rem 0.5rem 1rem 0;
125
139
  }
126
140
 
127
- .time-picker-scroll-area {
141
+ .time-picker-scroll-area,
142
+ :global(.infonomic-datepicker-time-picker-scroll-area) {
128
143
  height: 280px;
129
144
  padding-right: var(--spacing-16);
130
145
  }
131
146
 
132
- .time-picker {
147
+ .time-picker,
148
+ :global(.infonomic-datepicker-time-picker) {
133
149
  display: flex;
134
150
  padding-left: var(--spacing-4);
135
151
  padding-right: var(--spacing-4);
@@ -137,7 +153,8 @@
137
153
  gap: 0.5rem;
138
154
  }
139
155
 
140
- .time-picker-button {
156
+ .time-picker-button,
157
+ :global(.infonomic-datepicker-time-picker-button) {
141
158
  width: 100%;
142
159
  }
143
160
 
package/dist/widgets/datepicker/datepicker_module.css CHANGED
@@ -1,15 +1,16 @@
1
1
  @layer infonomic-base, infonomic-utilities, infonomic-theme;
2
2
 
3
3
  @layer infonomic-components {
4
- .container-u5_VUp {
4
+ :is(.container-u5_VUp, .infonomic-datepicker-container) {
5
5
  position: relative;
6
6
  }
7
7
 
8
- .input-SaODq9, .input-wrapper-qwAckv {
8
+ :is(.input-SaODq9, .input-wrapper-qwAckv, .infonomic-datepicker-input, .infonomic-datepicker-input-wrapper) {
9
9
  width: 100%;
10
10
  }
11
11
 
12
- .content-UK9iLF {
12
+ :is(.content-UK9iLF, .infonomic-datepicker-content) {
13
+ z-index: 50;
13
14
  width: 100%;
14
15
  padding-top: var(--spacing-16);
15
16
  padding-bottom: var(--spacing-8);
@@ -24,23 +25,23 @@
24
25
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
25
26
  }
26
27
 
27
- .content-UK9iLF:focus {
28
+ :is(.content-UK9iLF, .infonomic-datepicker-content):focus {
28
29
  box-shadow: var(--shadow-md);
29
30
  }
30
31
 
31
- .content-UK9iLF[data-state="open"][data-side="top"] {
32
+ :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="top"] {
32
33
  animation-name: slideDownAndFade-dohHTE;
33
34
  }
34
35
 
35
- .content-UK9iLF[data-state="open"][data-side="right"] {
36
+ :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="right"] {
36
37
  animation-name: slideLeftAndFade-ugM6Hs;
37
38
  }
38
39
 
39
- .content-UK9iLF[data-state="open"][data-side="bottom"] {
40
+ :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="bottom"] {
40
41
  animation-name: slideUpAndFade-bAwQJS;
41
42
  }
42
43
 
43
- .content-UK9iLF[data-state="open"][data-side="left"] {
44
+ :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="left"] {
44
45
  animation-name: slideRightAndFade-o0jl7q;
45
46
  }
46
47
 
@@ -48,13 +49,13 @@
48
49
  background: var(--canvas-800);
49
50
  }
50
51
 
51
- .content-components-jcG649 {
52
+ :is(.content-components-jcG649, .infonomic-datepicker-content-components) {
52
53
  gap: var(--spacing-8);
53
54
  width: 100%;
54
55
  display: flex;
55
56
  }
56
57
 
57
- .status-and-actions-Px_b57 {
58
+ :is(.status-and-actions-Px_b57, .infonomic-datepicker-status-and-actions) {
58
59
  flex-direction: column;
59
60
  justify-content: space-between;
60
61
  align-items: center;
@@ -62,7 +63,7 @@
62
63
  display: flex;
63
64
  }
64
65
 
65
- .content-status-XRGKXg {
66
+ :is(.content-status-XRGKXg, .infonomic-datepicker-content-status) {
66
67
  padding-left: var(--spacing-16);
67
68
  padding-right: var(--spacing-8);
68
69
  font-size: var(--font-size-sm);
@@ -72,7 +73,7 @@
72
73
  display: flex;
73
74
  }
74
75
 
75
- .content-actions-GVU14S {
76
+ :is(.content-actions-GVU14S, .infonomic-datepicker-content-actions) {
76
77
  margin-top: var(--spacing-12);
77
78
  padding-left: var(--spacing-16);
78
79
  padding-right: var(--spacing-6);
@@ -83,15 +84,15 @@
83
84
  display: flex;
84
85
  }
85
86
 
86
- .content-actions-button-YCN1ho {
87
+ :is(.content-actions-button-YCN1ho, .infonomic-datepicker-content-actions-button) {
87
88
  --ring-color: var(--violet-7);
88
89
  }
89
90
 
90
- .arrow-mhGcHb {
91
+ :is(.arrow-mhGcHb, .infonomic-datepicker-arrow) {
91
92
  fill: var(--gray-50);
92
93
  }
93
94
 
94
- .close-bJApom {
95
+ :is(.close-bJApom, .infonomic-datepicker-close) {
95
96
  all: unset;
96
97
  width: 25px;
97
98
  height: 25px;
@@ -106,25 +107,25 @@
106
107
  right: 5px;
107
108
  }
108
109
 
109
- .close-bJApom:hover {
110
+ :is(.close-bJApom, .infonomic-datepicker-close):hover {
110
111
  background-color: var(--primary-400);
111
112
  }
112
113
 
113
- .close-bJApom:focus {
114
+ :is(.close-bJApom, .infonomic-datepicker-close):focus {
114
115
  box-shadow: 0 0 0 2px var(--primary-600);
115
116
  }
116
117
 
117
- .time-picker-container-sVEGKe {
118
+ :is(.time-picker-container-sVEGKe, .infonomic-datepicker-time-picker-container) {
118
119
  width: 80px;
119
120
  margin: .6rem .5rem 1rem 0;
120
121
  }
121
122
 
122
- .time-picker-scroll-area-q5TiRD {
123
+ :is(.time-picker-scroll-area-q5TiRD, .infonomic-datepicker-time-picker-scroll-area) {
123
124
  height: 280px;
124
125
  padding-right: var(--spacing-16);
125
126
  }
126
127
 
127
- .time-picker-Xhertk {
128
+ :is(.time-picker-Xhertk, .infonomic-datepicker-time-picker) {
128
129
  padding-left: var(--spacing-4);
129
130
  padding-right: var(--spacing-4);
130
131
  flex-direction: column;
@@ -132,7 +133,7 @@
132
133
  display: flex;
133
134
  }
134
135
 
135
- .time-picker-button-WA4IUz {
136
+ :is(.time-picker-button-WA4IUz, .infonomic-datepicker-time-picker-button) {
136
137
  width: 100%;
137
138
  }
138
139
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "5.28.0",
5
+ "version": "5.30.0",
6
6
  "type": "module",
7
7
  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
8
8
  "keywords": [
package/src/widgets/datepicker/datepicker.module.css CHANGED
@@ -1,17 +1,23 @@
1
1
  @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
2
2
 
3
3
  @layer infonomic-components {
4
- .container {
4
+
5
+ .container,
6
+ :global(.infonomic-datepicker-container) {
5
7
  position: relative;
6
8
  }
7
9
 
8
10
  .input,
9
- .input-wrapper {
11
+ .input-wrapper,
12
+ :global(.infonomic-datepicker-input),
13
+ :global(.infonomic-datepicker-input-wrapper) {
10
14
  width: 100%;
11
15
  }
12
16
 
13
- .content {
17
+ .content,
18
+ :global(.infonomic-datepicker-content) {
14
19
  width: 100%;
20
+ z-index: 50;
15
21
  border-radius: 4px;
16
22
  padding-top: var(--spacing-16);
17
23
  padding-bottom: var(--spacing-8);
@@ -52,13 +58,15 @@
52
58
  }
53
59
  }
54
60
 
55
- .content-components {
61
+ .content-components,
62
+ :global(.infonomic-datepicker-content-components) {
56
63
  display: flex;
57
64
  width: 100%;
58
65
  gap: var(--spacing-8);
59
66
  }
60
67
 
61
- .status-and-actions {
68
+ .status-and-actions,
69
+ :global(.infonomic-datepicker-status-and-actions) {
62
70
  display: flex;
63
71
  flex-direction: column;
64
72
  justify-content: space-between;
@@ -66,7 +74,8 @@
66
74
  width: 100%;
67
75
  }
68
76
 
69
- .content-status {
77
+ .content-status,
78
+ :global(.infonomic-datepicker-content-status) {
70
79
  display: flex;
71
80
  align-items: center;
72
81
  padding-left: var(--spacing-16);
@@ -76,7 +85,8 @@
76
85
  width: 100%;
77
86
  }
78
87
 
79
- .content-actions {
88
+ .content-actions,
89
+ :global(.infonomic-datepicker-content-actions) {
80
90
  display: flex;
81
91
  flex-direction: row;
82
92
  justify-content: space-between;
@@ -87,16 +97,19 @@
87
97
  width: 100%;
88
98
  }
89
99
 
90
- .content-actions-button {
100
+ .content-actions-button,
101
+ :global(.infonomic-datepicker-content-actions-button) {
91
102
  /* min-width: 100px; */
92
103
  --ring-color: var(--violet-7);
93
104
  }
94
105
 
95
- .arrow {
106
+ .arrow,
107
+ :global(.infonomic-datepicker-arrow) {
96
108
  fill: var(--gray-50);
97
109
  }
98
110
 
99
- .close {
111
+ .close,
112
+ :global(.infonomic-datepicker-close) {
100
113
  all: unset;
101
114
  font-family: inherit;
102
115
  border-radius: 100%;
@@ -119,17 +132,20 @@
119
132
  }
120
133
  }
121
134
 
122
- .time-picker-container {
135
+ .time-picker-container,
136
+ :global(.infonomic-datepicker-time-picker-container) {
123
137
  width: 80px;
124
138
  margin: 0.6rem 0.5rem 1rem 0;
125
139
  }
126
140
 
127
- .time-picker-scroll-area {
141
+ .time-picker-scroll-area,
142
+ :global(.infonomic-datepicker-time-picker-scroll-area) {
128
143
  height: 280px;
129
144
  padding-right: var(--spacing-16);
130
145
  }
131
146
 
132
- .time-picker {
147
+ .time-picker,
148
+ :global(.infonomic-datepicker-time-picker) {
133
149
  display: flex;
134
150
  padding-left: var(--spacing-4);
135
151
  padding-right: var(--spacing-4);
@@ -137,7 +153,8 @@
137
153
  gap: 0.5rem;
138
154
  }
139
155
 
140
- .time-picker-button {
156
+ .time-picker-button,
157
+ :global(.infonomic-datepicker-time-picker-button) {
141
158
  width: 100%;
142
159
  }
143
160
 
package/src/widgets/datepicker/datepicker.stories.tsx CHANGED
@@ -13,13 +13,28 @@ export const Default = (): React.JSX.Element => {
13
13
 
14
14
  return (
15
15
  <div style={{ maxWidth: '270px', margin: '2rem auto' }}>
16
- <DatePicker
17
- onDateChange={handleDateChange}
18
- id="published_on"
19
- name="published_on"
20
- variant="outlined"
21
- helpText="Select published on date."
22
- />
16
+ <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
17
+ <span>Date and Time</span>
18
+ <DatePicker
19
+ onDateChange={handleDateChange}
20
+ id="published_on"
21
+ name="published_on"
22
+ variant="outlined"
23
+ helpText="Select published on date."
24
+ />
25
+ </div>
26
+
27
+ <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
28
+ <span>Date</span>
29
+ <DatePicker
30
+ onDateChange={handleDateChange}
31
+ mode="date"
32
+ id="published_on"
33
+ name="published_on"
34
+ variant="outlined"
35
+ helpText="Select published on date."
36
+ />
37
+ </div>
23
38
  </div>
24
39
  )
25
40
  }
package/src/widgets/datepicker/datepicker.tsx CHANGED
@@ -39,7 +39,8 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
39
39
  inputWrapperClassName?: string
40
40
  inputClassName?: string
41
41
  intent?: Intent
42
- containerClassName?: string
42
+ containerClassName?: string,
43
+ contentClassName?: string
43
44
  helpText?: string
44
45
  errorText?: string
45
46
  ariaLabelForSearch?: string
@@ -68,8 +69,9 @@ export function DatePicker({
68
69
  inputClassName,
69
70
  inputWrapperClassName,
70
71
  containerClassName,
71
- onClear = () => {},
72
- onDateChange = () => {},
72
+ contentClassName,
73
+ onClear = () => { },
74
+ onDateChange = () => { },
73
75
  validatorFn,
74
76
  helpText,
75
77
  errorText,
@@ -154,7 +156,7 @@ export function DatePicker({
154
156
  e.stopPropagation()
155
157
  setIsOpen(true)
156
158
  }}
157
- value={date ? `${format(date, 'PP HH:mm')}` : ''}
159
+ value={date ? format(date, mode === 'datetime' ? 'PP HH:mm' : 'PP') : ''}
158
160
  placeHolder={placeHolderText}
159
161
  helpText={helpText}
160
162
  disabled={false}
@@ -198,7 +200,7 @@ export function DatePicker({
198
200
  </div>
199
201
  </Popover.Trigger>
200
202
  <Popover.Portal>
201
- <Popover.Content sideOffset={5} className={styles.content}>
203
+ <Popover.Content sideOffset={5} className={cx(styles.content, contentClassName)}>
202
204
  <div className={styles['content-components']}>
203
205
  <div ref={calendarRef}>
204
206
  <Calendar
@@ -222,11 +224,11 @@ export function DatePicker({
222
224
  }}
223
225
  startMonth={new Date(new Date().getFullYear() - yearsInPast, 0)}
224
226
  endMonth={new Date(new Date().getFullYear() + yearsInFuture, 0)}
225
- // TODO: add props
226
- // disabled={(date) =>
227
- // Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
228
- // Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
229
- // }
227
+ // TODO: add props
228
+ // disabled={(date) =>
229
+ // Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
230
+ // Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
231
+ // }
230
232
  />
231
233
  </div>
232
234
  {mode === 'datetime' && (
@@ -270,7 +272,7 @@ export function DatePicker({
270
272
  </div>
271
273
  <div className={styles['status-and-actions']}>
272
274
  <div className={styles['content-status']}>
273
- {date ? `${format(date, 'PPPp')}` : 'No date selected'}
275
+ {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
274
276
  </div>
275
277
  <div className={styles['content-actions']}>
276
278
  <div>
package/src/widgets/drawer/drawer.stories.tsx CHANGED
@@ -4,6 +4,7 @@ import React from 'react'
4
4
  import { Button } from '../../components/button/button.js'
5
5
  import { IconButton } from '../../components/button/icon-button.js'
6
6
  import { CloseIcon } from '../../icons/close-icon.js'
7
+ import { DatePicker } from '../datepicker/datepicker.js'
7
8
  import { Drawer } from './drawer.js'
8
9
 
9
10
  export default {
@@ -96,6 +97,18 @@ export const Wide = (): React.JSX.Element => {
96
97
  </Drawer.Header>
97
98
  <Drawer.Content>
98
99
  <p>Drawer content here...</p>
100
+ <div style={{ maxWidth: '300px', marginTop: '20px', margin: '0 auto' }}>
101
+ <DatePicker
102
+ id="datepicker-1"
103
+ name="datepicker-1"
104
+ label="Select Date"
105
+ required
106
+ initialValue={new Date()}
107
+ onDateChange={(date) => {
108
+ console.log('Selected date:', date)
109
+ }}
110
+ />
111
+ </div>
99
112
  </Drawer.Content>
100
113
  </Drawer.Container>
101
114
  </Drawer>