@os-design/core 1.0.286 → 1.0.288

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 (11) hide show
  1. package/dist/DatePicker/index.d.ts +24 -0
  2. package/dist/DatePicker/index.d.ts.map +1 -1
  3. package/dist/DatePicker/index.js +45 -9
  4. package/dist/Input/index.d.ts.map +1 -1
  5. package/dist/Input/index.js +1 -1
  6. package/dist/InputDateUnstyled/index.d.ts.map +1 -1
  7. package/dist/InputDateUnstyled/index.js +5 -0
  8. package/package.json +2 -2
  9. package/src/DatePicker/index.tsx +84 -7
  10. package/src/Input/index.tsx +1 -1
  11. package/src/InputDateUnstyled/index.tsx +5 -0
package/dist/DatePicker/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { type ForwardedRef } from 'react';
3
3
  import { type DateCalendarLocale } from '../DateCalendar/locale.js';
4
4
  import type { Day, Month } from '../DateCalendar/utils/calendarDays.js';
5
5
  import { type OnDayError, type Time } from '../InputDateUnstyled/index.js';
6
+ import createTimes from './utils/createTimes.js';
6
7
  type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
7
8
  export interface DatePickerProps extends JsxDivProps, WithSize {
8
9
  /**
@@ -33,6 +34,28 @@ export interface DatePickerProps extends JsxDivProps, WithSize {
33
34
  * @default 3
34
35
  */
35
36
  timeColumns?: number;
37
+ /**
38
+ * The component located on the left side.
39
+ * @default undefined
40
+ */
41
+ left?: React.ReactNode;
42
+ /**
43
+ * Adds padding to the left component.
44
+ * It can be useful when passing an icon or text in the left component.
45
+ * @default false
46
+ */
47
+ leftHasPadding?: boolean;
48
+ /**
49
+ * The component located on the right side.
50
+ * @default undefined
51
+ */
52
+ right?: React.ReactNode;
53
+ /**
54
+ * Adds padding to the right component.
55
+ * It can be useful when passing an icon or text in the right component.
56
+ * @default false
57
+ */
58
+ rightHasPadding?: boolean;
36
59
  /**
37
60
  * Whether the date picker is disabled.
38
61
  * @default false
@@ -116,5 +139,6 @@ export interface DatePickerProps extends JsxDivProps, WithSize {
116
139
  * The component to enter or choose a date/time.
117
140
  */
118
141
  declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>;
142
+ export { createTimes };
119
143
  export default DatePicker;
120
144
  //# sourceMappingURL=index.d.ts.map
package/dist/DatePicker/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAM3B,OAAO,EAQL,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAA0B,EAKxB,KAAK,UAAU,EACf,KAAK,IAAI,EAEV,MAAM,+BAA+B,CAAC;AAcvC,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAC5D;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IACvD;;;OAGG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AA0ID;;GAEG;AACH,QAAA,MAAM,UAAU,8GAyWf,CAAC;AAIF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAM3B,OAAO,EAQL,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAA0B,EAKxB,KAAK,UAAU,EACf,KAAK,IAAI,EAEV,MAAM,+BAA+B,CAAC;AAUvC,OAAO,WAAW,MAAM,wBAAwB,CAAC;AAIjD,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAC5D;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IACvD;;;OAGG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AA+KD;;GAEG;AACH,QAAA,MAAM,UAAU,8GAyXf,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,eAAe,UAAU,CAAC"}
package/dist/DatePicker/index.js CHANGED
@@ -75,6 +75,9 @@ const getNextTokenDiffType = (startPos, format) => {
75
75
  return null;
76
76
  };
77
77
  const preventDefault = e => e.preventDefault();
78
+ const notHasLeftStyles = p => !p.hasLeft && css`
79
+ padding-left: ${p.theme.inputPaddingHorizontal}em;
80
+ `;
78
81
  const notHasRightStyles = p => !p.hasRight && css`
79
82
  padding-right: ${p.theme.inputPaddingHorizontal}em;
80
83
  `;
@@ -88,7 +91,7 @@ const hideSpinButton = css`
88
91
  /* Firefox */
89
92
  appearance: textfield;
90
93
  `;
91
- const StyledInputDateUnstyled = styled(InputDateUnstyled, omitEmotionProps('hasRight'))`
94
+ const StyledInputDateUnstyled = styled(InputDateUnstyled, omitEmotionProps('hasLeft', 'hasRight'))`
92
95
  ${resetFocusStyles};
93
96
  border: none;
94
97
  font-size: 1em;
@@ -98,18 +101,36 @@ const StyledInputDateUnstyled = styled(InputDateUnstyled, omitEmotionProps('hasR
98
101
 
99
102
  color: ${p => clr(p.theme.inputColorText)};
100
103
  background-color: transparent;
101
- padding-left: ${p => p.theme.inputPaddingHorizontal}em;
102
104
 
103
105
  &::placeholder {
104
106
  color: ${p => clr(p.theme.inputColorPlaceholder)};
105
107
  }
106
108
 
107
109
  ${hideSpinButton};
110
+ ${notHasLeftStyles};
108
111
  ${notHasRightStyles};
109
112
  `;
110
- const PickerButtonContainer = styled.div`
113
+ const InputAddon = styled('span', omitEmotionProps('hasPadding'))`
111
114
  display: flex;
112
115
  align-items: center;
116
+ user-select: none;
117
+ color: ${p => clr(p.theme.inputColorPlaceholder)};
118
+
119
+ & > svg {
120
+ transform: scale(1.2);
121
+ }
122
+ `;
123
+ const InputLeftAddon = styled(InputAddon)`
124
+ padding-right: ${p => p.theme.inputAddonPaddingHorizontal}em;
125
+ ${p => p.hasPadding && css`
126
+ padding-left: ${p.theme.inputPaddingHorizontal}em;
127
+ `}
128
+ `;
129
+ const InputRightAddon = styled(InputAddon)`
130
+ padding-left: ${p => p.theme.inputAddonPaddingHorizontal}em;
131
+ ${p => p.hasPadding && css`
132
+ padding-right: ${p.theme.inputPaddingHorizontal}em;
133
+ `}
113
134
  `;
114
135
  const PADDING_EM = 0.8;
115
136
  const StyledPopover = styled(Popover)`
@@ -136,6 +157,10 @@ const DatePicker = /*#__PURE__*/forwardRef(({
136
157
  firstDayOfWeek = 0,
137
158
  times = defaultTimes,
138
159
  timeColumns = 3,
160
+ left,
161
+ leftHasPadding = false,
162
+ right,
163
+ rightHasPadding = false,
139
164
  disabled = false,
140
165
  disabledDays,
141
166
  disabledTimes: disabledTimesFn,
@@ -353,10 +378,19 @@ const DatePicker = /*#__PURE__*/forwardRef(({
353
378
  disabled: disabled,
354
379
  size: size,
355
380
  ref: mergedContainerRef,
356
- children: [/*#__PURE__*/_jsx(StyledInputDateUnstyled, {
381
+ children: [left && /*#__PURE__*/_jsx(ThemeOverrider, {
382
+ overrides: {
383
+ buttonPaddingHorizontal: 0.8
384
+ },
385
+ children: /*#__PURE__*/_jsx(InputLeftAddon, {
386
+ hasPadding: leftHasPadding,
387
+ children: left
388
+ })
389
+ }), /*#__PURE__*/_jsx(StyledInputDateUnstyled, {
357
390
  ...rest,
358
391
  disabled: disabled,
359
- hasRight: showPickerButton,
392
+ hasLeft: !!left,
393
+ hasRight: !!right || showPickerButton,
360
394
  format: format,
361
395
  value: forwardedValue,
362
396
  inputValue: inputValue,
@@ -370,12 +404,13 @@ const DatePicker = /*#__PURE__*/forwardRef(({
370
404
  onFocus: focusHandler,
371
405
  onBlur: blurHandler,
372
406
  ref: mergedInputRef
373
- }), showPickerButton && /*#__PURE__*/_jsx(ThemeOverrider, {
407
+ }), (showPickerButton || right) && /*#__PURE__*/_jsx(ThemeOverrider, {
374
408
  overrides: {
375
409
  buttonPaddingHorizontal: 0.8
376
410
  },
377
- children: /*#__PURE__*/_jsx(PickerButtonContainer, {
378
- children: /*#__PURE__*/_jsx(Button, {
411
+ children: /*#__PURE__*/_jsxs(InputRightAddon, {
412
+ hasPadding: showPickerButton ? false : rightHasPadding,
413
+ children: [right, /*#__PURE__*/_jsx(Button, {
379
414
  type: "ghost",
380
415
  size: "small",
381
416
  wide: "never",
@@ -383,7 +418,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
383
418
  onClick: openPicker,
384
419
  onMouseDown: preventDefault,
385
420
  children: /*#__PURE__*/_jsx(Calendar, {})
386
- })
421
+ })]
387
422
  })
388
423
  })]
389
424
  }), isMinXs ? /*#__PURE__*/_jsx(StyledPopover, {
@@ -409,4 +444,5 @@ const DatePicker = /*#__PURE__*/forwardRef(({
409
444
  });
410
445
  });
411
446
  DatePicker.displayName = 'DatePicker';
447
+ export { createTimes };
412
448
  export default DatePicker;
package/dist/Input/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,EACZ,KAAK,WAAW,EAEhB,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IACzD;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAsCD,KAAK,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AACjE,eAAO,MAAM,cAAc;;SA+FT,MAAO,WAAW;2GA1EnC,CAAC;AAyBF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;SA6CN,MAAO,WAAW;iHAxBnC,CAAC;AAEF,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAeD,eAAO,MAAM,cAAc;;SAKT,MAAO,WAAW;;;UAEnC,CAAC;AAEF,eAAO,MAAM,eAAe;;SAJV,MAAO,WAAW;;;UAWnC,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,KAAK,qFAyGV,CAAC;AAIF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,EACZ,KAAK,WAAW,EAEhB,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IACzD;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAsCD,KAAK,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AACjE,eAAO,MAAM,cAAc;;SA+Fb,MAAO,WAAW;2GA1E/B,CAAC;AAyBF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;SA6CV,MAAO,WAAW;iHAxB/B,CAAC;AAEF,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAeD,eAAO,MAAM,cAAc;;SAKb,MAAO,WAAW;;;UAE/B,CAAC;AAEF,eAAO,MAAM,eAAe;;SAJd,MAAO,WAAW;;;UAW/B,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,KAAK,qFAyGV,CAAC;AAIF,eAAe,KAAK,CAAC"}
package/dist/Input/index.js CHANGED
@@ -94,7 +94,7 @@ const InputAddon = styled('span', omitEmotionProps('hasPadding'))`
94
94
  user-select: none;
95
95
  color: ${p => clr(p.theme.inputColorPlaceholder)};
96
96
 
97
- svg {
97
+ & > svg {
98
98
  transform: scale(1.2);
99
99
  }
100
100
  `;
package/dist/InputDateUnstyled/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputDateUnstyled/index.tsx"],"names":[],"mappings":"AAcA,OAAoB,EAAE,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAqB,EAAE,KAAK,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIlE,eAAO,MAAM,MAAM,6DAST,CAAC;AACX,eAAO,MAAM,aAAa,UAA+C,CAAC;AAE1E,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AAEF,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,qHAqZtB,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AAEjC,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputDateUnstyled/index.tsx"],"names":[],"mappings":"AAcA,OAAoB,EAAE,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAqB,EAAE,KAAK,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIlE,eAAO,MAAM,MAAM,6DAST,CAAC;AACX,eAAO,MAAM,aAAa,UAA+C,CAAC;AAE1E,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AAEF,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,qHA0ZtB,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AAEjC,eAAe,iBAAiB,CAAC"}
package/dist/InputDateUnstyled/index.js CHANGED
@@ -174,6 +174,11 @@ const InputDateUnstyled = /*#__PURE__*/forwardRef(({
174
174
  tokens
175
175
  });
176
176
 
177
+ // Move the caret to the beginning of the string if it is at the end
178
+ if (start === formatRef.current.length) {
179
+ start = 0;
180
+ }
181
+
177
182
  // Move the caret to the left, skipping all `_`
178
183
  while (start > 0 && nextInputValue.charAt(start - 1) === '_') {
179
184
  start--;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.286",
3
+ "version": "1.0.288",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "type": "module",
@@ -58,5 +58,5 @@
58
58
  "react": "18",
59
59
  "react-dom": "18"
60
60
  },
61
- "gitHead": "036f43999e29ce528459e0434fad9c397209b90b"
61
+ "gitHead": "bf592e60182b1196b4b9435c05af4af7167c6ad7"
62
62
  }
package/src/DatePicker/index.tsx CHANGED
@@ -78,6 +78,28 @@ export interface DatePickerProps extends JsxDivProps, WithSize {
78
78
  * @default 3
79
79
  */
80
80
  timeColumns?: number;
81
+ /**
82
+ * The component located on the left side.
83
+ * @default undefined
84
+ */
85
+ left?: React.ReactNode;
86
+ /**
87
+ * Adds padding to the left component.
88
+ * It can be useful when passing an icon or text in the left component.
89
+ * @default false
90
+ */
91
+ leftHasPadding?: boolean;
92
+ /**
93
+ * The component located on the right side.
94
+ * @default undefined
95
+ */
96
+ right?: React.ReactNode;
97
+ /**
98
+ * Adds padding to the right component.
99
+ * It can be useful when passing an icon or text in the right component.
100
+ * @default false
101
+ */
102
+ rightHasPadding?: boolean;
81
103
  /**
82
104
  * Whether the date picker is disabled.
83
105
  * @default false
@@ -219,6 +241,12 @@ const getNextTokenDiffType = (startPos: number, format: string) => {
219
241
 
220
242
  const preventDefault = (e: MouseEvent) => e.preventDefault();
221
243
 
244
+ const notHasLeftStyles = (p) =>
245
+ !p.hasLeft &&
246
+ css`
247
+ padding-left: ${p.theme.inputPaddingHorizontal}em;
248
+ `;
249
+
222
250
  const notHasRightStyles = (p) =>
223
251
  !p.hasRight &&
224
252
  css`
@@ -237,11 +265,12 @@ const hideSpinButton = css`
237
265
  `;
238
266
 
239
267
  interface StyledInputDateUnstyledProps {
268
+ hasLeft?: boolean;
240
269
  hasRight?: boolean;
241
270
  }
242
271
  const StyledInputDateUnstyled = styled(
243
272
  InputDateUnstyled,
244
- omitEmotionProps('hasRight')
273
+ omitEmotionProps('hasLeft', 'hasRight')
245
274
  )<StyledInputDateUnstyledProps>`
246
275
  ${resetFocusStyles};
247
276
  border: none;
@@ -252,19 +281,49 @@ const StyledInputDateUnstyled = styled(
252
281
 
253
282
  color: ${(p) => clr(p.theme.inputColorText)};
254
283
  background-color: transparent;
255
- padding-left: ${(p) => p.theme.inputPaddingHorizontal}em;
256
284
 
257
285
  &::placeholder {
258
286
  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
259
287
  }
260
288
 
261
289
  ${hideSpinButton};
290
+ ${notHasLeftStyles};
262
291
  ${notHasRightStyles};
263
292
  `;
264
293
 
265
- const PickerButtonContainer = styled.div`
294
+ interface InputAddonProps {
295
+ hasPadding?: boolean;
296
+ }
297
+ const InputAddon = styled(
298
+ 'span',
299
+ omitEmotionProps('hasPadding')
300
+ )<InputAddonProps>`
266
301
  display: flex;
267
302
  align-items: center;
303
+ user-select: none;
304
+ color: ${(p) => clr(p.theme.inputColorPlaceholder)};
305
+
306
+ & > svg {
307
+ transform: scale(1.2);
308
+ }
309
+ `;
310
+
311
+ const InputLeftAddon = styled(InputAddon)`
312
+ padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
313
+ ${(p) =>
314
+ p.hasPadding &&
315
+ css`
316
+ padding-left: ${p.theme.inputPaddingHorizontal}em;
317
+ `}
318
+ `;
319
+
320
+ const InputRightAddon = styled(InputAddon)`
321
+ padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
322
+ ${(p) =>
323
+ p.hasPadding &&
324
+ css`
325
+ padding-right: ${p.theme.inputPaddingHorizontal}em;
326
+ `}
268
327
  `;
269
328
 
270
329
  const PADDING_EM = 0.8;
@@ -304,6 +363,10 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
304
363
  firstDayOfWeek = 0,
305
364
  times = defaultTimes,
306
365
  timeColumns = 3,
366
+ left,
367
+ leftHasPadding = false,
368
+ right,
369
+ rightHasPadding = false,
307
370
  disabled = false,
308
371
  disabledDays,
309
372
  disabledTimes: disabledTimesFn,
@@ -595,10 +658,19 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
595
658
  size={size}
596
659
  ref={mergedContainerRef}
597
660
  >
661
+ {left && (
662
+ <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
663
+ <InputLeftAddon hasPadding={leftHasPadding}>
664
+ {left}
665
+ </InputLeftAddon>
666
+ </ThemeOverrider>
667
+ )}
668
+
598
669
  <StyledInputDateUnstyled
599
670
  {...rest}
600
671
  disabled={disabled}
601
- hasRight={showPickerButton}
672
+ hasLeft={!!left}
673
+ hasRight={!!right || showPickerButton}
602
674
  format={format}
603
675
  value={forwardedValue}
604
676
  inputValue={inputValue}
@@ -614,9 +686,12 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
614
686
  ref={mergedInputRef}
615
687
  />
616
688
 
617
- {showPickerButton && (
689
+ {(showPickerButton || right) && (
618
690
  <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
619
- <PickerButtonContainer>
691
+ <InputRightAddon
692
+ hasPadding={showPickerButton ? false : rightHasPadding}
693
+ >
694
+ {right}
620
695
  <Button
621
696
  type='ghost'
622
697
  size='small'
@@ -627,7 +702,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
627
702
  >
628
703
  <Calendar />
629
704
  </Button>
630
- </PickerButtonContainer>
705
+ </InputRightAddon>
631
706
  </ThemeOverrider>
632
707
  )}
633
708
  </InputContainer>
@@ -662,4 +737,6 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
662
737
 
663
738
  DatePicker.displayName = 'DatePicker';
664
739
 
740
+ export { createTimes };
741
+
665
742
  export default DatePicker;
package/src/Input/index.tsx CHANGED
@@ -206,7 +206,7 @@ const InputAddon = styled(
206
206
  user-select: none;
207
207
  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
208
208
 
209
- svg {
209
+ & > svg {
210
210
  transform: scale(1.2);
211
211
  }
212
212
  `;
package/src/InputDateUnstyled/index.tsx CHANGED
@@ -299,6 +299,11 @@ const InputDateUnstyled = forwardRef<HTMLInputElement, InputDateUnstyledProps>(
299
299
  tokens,
300
300
  });
301
301
 
302
+ // Move the caret to the beginning of the string if it is at the end
303
+ if (start === formatRef.current.length) {
304
+ start = 0;
305
+ }
306
+
302
307
  // Move the caret to the left, skipping all `_`
303
308
  while (start > 0 && nextInputValue.charAt(start - 1) === '_') {
304
309
  start--;