@os-design/core 1.0.287 → 1.0.288

package/dist/DatePicker/index.d.ts

@@ -34,6 +34,28 @@ export interface DatePickerProps extends JsxDivProps, WithSize {
      * @default 3
      */
     timeColumns?: number;
+    /**
+     * The component located on the left side.
+     * @default undefined
+     */
+    left?: React.ReactNode;
+    /**
+     * Adds padding to the left component.
+     * It can be useful when passing an icon or text in the left component.
+     * @default false
+     */
+    leftHasPadding?: boolean;
+    /**
+     * The component located on the right side.
+     * @default undefined
+     */
+    right?: React.ReactNode;
+    /**
+     * Adds padding to the right component.
+     * It can be useful when passing an icon or text in the right component.
+     * @default false
+     */
+    rightHasPadding?: boolean;
     /**
      * Whether the date picker is disabled.
      * @default false

package/dist/DatePicker/index.d.ts.map

@@ -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;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,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,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,eAAe,UAAU,CAAC"}
+{"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

@@ -75,6 +75,9 @@ const getNextTokenDiffType = (startPos, format) => {
   return null;
 };
 const preventDefault = e => e.preventDefault();
+const notHasLeftStyles = p => !p.hasLeft && css`
+    padding-left: ${p.theme.inputPaddingHorizontal}em;
+  `;
 const notHasRightStyles = p => !p.hasRight && css`
     padding-right: ${p.theme.inputPaddingHorizontal}em;
   `;
@@ -88,7 +91,7 @@ const hideSpinButton = css`
   /* Firefox */
   appearance: textfield;
 `;
-const StyledInputDateUnstyled = styled(InputDateUnstyled, omitEmotionProps('hasRight'))`
+const StyledInputDateUnstyled = styled(InputDateUnstyled, omitEmotionProps('hasLeft', 'hasRight'))`
   ${resetFocusStyles};
   border: none;
   font-size: 1em;
@@ -98,18 +101,36 @@ const StyledInputDateUnstyled = styled(InputDateUnstyled, omitEmotionProps('hasR
 
   color: ${p => clr(p.theme.inputColorText)};
   background-color: transparent;
-  padding-left: ${p => p.theme.inputPaddingHorizontal}em;
 
   &::placeholder {
     color: ${p => clr(p.theme.inputColorPlaceholder)};
   }
 
   ${hideSpinButton};
+  ${notHasLeftStyles};
   ${notHasRightStyles};
 `;
-const PickerButtonContainer = styled.div`
+const InputAddon = styled('span', omitEmotionProps('hasPadding'))`
   display: flex;
   align-items: center;
+  user-select: none;
+  color: ${p => clr(p.theme.inputColorPlaceholder)};
+
+  & > svg {
+    transform: scale(1.2);
+  }
+`;
+const InputLeftAddon = styled(InputAddon)`
+  padding-right: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-left: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+const InputRightAddon = styled(InputAddon)`
+  padding-left: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-right: ${p.theme.inputPaddingHorizontal}em;
+    `}
 `;
 const PADDING_EM = 0.8;
 const StyledPopover = styled(Popover)`
@@ -136,6 +157,10 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   firstDayOfWeek = 0,
   times = defaultTimes,
   timeColumns = 3,
+  left,
+  leftHasPadding = false,
+  right,
+  rightHasPadding = false,
   disabled = false,
   disabledDays,
   disabledTimes: disabledTimesFn,
@@ -353,10 +378,19 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       disabled: disabled,
       size: size,
       ref: mergedContainerRef,
-      children: [/*#__PURE__*/_jsx(StyledInputDateUnstyled, {
+      children: [left && /*#__PURE__*/_jsx(ThemeOverrider, {
+        overrides: {
+          buttonPaddingHorizontal: 0.8
+        },
+        children: /*#__PURE__*/_jsx(InputLeftAddon, {
+          hasPadding: leftHasPadding,
+          children: left
+        })
+      }), /*#__PURE__*/_jsx(StyledInputDateUnstyled, {
         ...rest,
         disabled: disabled,
-        hasRight: showPickerButton,
+        hasLeft: !!left,
+        hasRight: !!right || showPickerButton,
         format: format,
         value: forwardedValue,
         inputValue: inputValue,
@@ -370,12 +404,13 @@ const DatePicker = /*#__PURE__*/forwardRef(({
         onFocus: focusHandler,
         onBlur: blurHandler,
         ref: mergedInputRef
-      }), showPickerButton && /*#__PURE__*/_jsx(ThemeOverrider, {
+      }), (showPickerButton || right) && /*#__PURE__*/_jsx(ThemeOverrider, {
         overrides: {
           buttonPaddingHorizontal: 0.8
         },
-        children: /*#__PURE__*/_jsx(PickerButtonContainer, {
-          children: /*#__PURE__*/_jsx(Button, {
+        children: /*#__PURE__*/_jsxs(InputRightAddon, {
+          hasPadding: showPickerButton ? false : rightHasPadding,
+          children: [right, /*#__PURE__*/_jsx(Button, {
             type: "ghost",
             size: "small",
             wide: "never",
@@ -383,7 +418,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
             onClick: openPicker,
             onMouseDown: preventDefault,
             children: /*#__PURE__*/_jsx(Calendar, {})
-          })
+          })]
         })
       })]
     }), isMinXs ? /*#__PURE__*/_jsx(StyledPopover, {

package/dist/Input/index.d.ts.map

@@ -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"}
+{"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

@@ -94,7 +94,7 @@ const InputAddon = styled('span', omitEmotionProps('hasPadding'))`
   user-select: none;
   color: ${p => clr(p.theme.inputColorPlaceholder)};
 
-  svg {
+  & > svg {
     transform: scale(1.2);
   }
 `;

package/dist/InputDateUnstyled/index.d.ts.map

@@ -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"}
+{"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

@@ -174,6 +174,11 @@ const InputDateUnstyled = /*#__PURE__*/forwardRef(({
         tokens
       });
 
+      // Move the caret to the beginning of the string if it is at the end
+      if (start === formatRef.current.length) {
+        start = 0;
+      }
+
       // Move the caret to the left, skipping all `_`
       while (start > 0 && nextInputValue.charAt(start - 1) === '_') {
         start--;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.287",
+  "version": "1.0.288",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -58,5 +58,5 @@
     "react": "18",
     "react-dom": "18"
   },
-  "gitHead": "f9f0ad034d9a5565dc826f0d365d3013f0bbe6b0"
+  "gitHead": "bf592e60182b1196b4b9435c05af4af7167c6ad7"
 }

package/src/DatePicker/index.tsx

@@ -78,6 +78,28 @@ export interface DatePickerProps extends JsxDivProps, WithSize {
    * @default 3
    */
   timeColumns?: number;
+  /**
+   * The component located on the left side.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * Adds padding to the left component.
+   * It can be useful when passing an icon or text in the left component.
+   * @default false
+   */
+  leftHasPadding?: boolean;
+  /**
+   * The component located on the right side.
+   * @default undefined
+   */
+  right?: React.ReactNode;
+  /**
+   * Adds padding to the right component.
+   * It can be useful when passing an icon or text in the right component.
+   * @default false
+   */
+  rightHasPadding?: boolean;
   /**
    * Whether the date picker is disabled.
    * @default false
@@ -219,6 +241,12 @@ const getNextTokenDiffType = (startPos: number, format: string) => {
 
 const preventDefault = (e: MouseEvent) => e.preventDefault();
 
+const notHasLeftStyles = (p) =>
+  !p.hasLeft &&
+  css`
+    padding-left: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
 const notHasRightStyles = (p) =>
   !p.hasRight &&
   css`
@@ -237,11 +265,12 @@ const hideSpinButton = css`
 `;
 
 interface StyledInputDateUnstyledProps {
+  hasLeft?: boolean;
   hasRight?: boolean;
 }
 const StyledInputDateUnstyled = styled(
   InputDateUnstyled,
-  omitEmotionProps('hasRight')
+  omitEmotionProps('hasLeft', 'hasRight')
 )<StyledInputDateUnstyledProps>`
   ${resetFocusStyles};
   border: none;
@@ -252,19 +281,49 @@ const StyledInputDateUnstyled = styled(
 
   color: ${(p) => clr(p.theme.inputColorText)};
   background-color: transparent;
-  padding-left: ${(p) => p.theme.inputPaddingHorizontal}em;
 
   &::placeholder {
     color: ${(p) => clr(p.theme.inputColorPlaceholder)};
   }
 
   ${hideSpinButton};
+  ${notHasLeftStyles};
   ${notHasRightStyles};
 `;
 
-const PickerButtonContainer = styled.div`
+interface InputAddonProps {
+  hasPadding?: boolean;
+}
+const InputAddon = styled(
+  'span',
+  omitEmotionProps('hasPadding')
+)<InputAddonProps>`
   display: flex;
   align-items: center;
+  user-select: none;
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+
+  & > svg {
+    transform: scale(1.2);
+  }
+`;
+
+const InputLeftAddon = styled(InputAddon)`
+  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
+  ${(p) =>
+    p.hasPadding &&
+    css`
+      padding-left: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+
+const InputRightAddon = styled(InputAddon)`
+  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
+  ${(p) =>
+    p.hasPadding &&
+    css`
+      padding-right: ${p.theme.inputPaddingHorizontal}em;
+    `}
 `;
 
 const PADDING_EM = 0.8;
@@ -304,6 +363,10 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
       firstDayOfWeek = 0,
       times = defaultTimes,
       timeColumns = 3,
+      left,
+      leftHasPadding = false,
+      right,
+      rightHasPadding = false,
       disabled = false,
       disabledDays,
       disabledTimes: disabledTimesFn,
@@ -595,10 +658,19 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
           size={size}
           ref={mergedContainerRef}
         >
+          {left && (
+            <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
+              <InputLeftAddon hasPadding={leftHasPadding}>
+                {left}
+              </InputLeftAddon>
+            </ThemeOverrider>
+          )}
+
           <StyledInputDateUnstyled
             {...rest}
             disabled={disabled}
-            hasRight={showPickerButton}
+            hasLeft={!!left}
+            hasRight={!!right || showPickerButton}
             format={format}
             value={forwardedValue}
             inputValue={inputValue}
@@ -614,9 +686,12 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             ref={mergedInputRef}
           />
 
-          {showPickerButton && (
+          {(showPickerButton || right) && (
             <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
-              <PickerButtonContainer>
+              <InputRightAddon
+                hasPadding={showPickerButton ? false : rightHasPadding}
+              >
+                {right}
                 <Button
                   type='ghost'
                   size='small'
@@ -627,7 +702,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
                 >
                   <Calendar />
                 </Button>
-              </PickerButtonContainer>
+              </InputRightAddon>
             </ThemeOverrider>
           )}
         </InputContainer>

package/src/Input/index.tsx

@@ -206,7 +206,7 @@ const InputAddon = styled(
   user-select: none;
   color: ${(p) => clr(p.theme.inputColorPlaceholder)};
 
-  svg {
+  & > svg {
     transform: scale(1.2);
   }
 `;

package/src/InputDateUnstyled/index.tsx

@@ -299,6 +299,11 @@ const InputDateUnstyled = forwardRef<HTMLInputElement, InputDateUnstyledProps>(
           tokens,
         });
 
+        // Move the caret to the beginning of the string if it is at the end
+        if (start === formatRef.current.length) {
+          start = 0;
+        }
+
         // Move the caret to the left, skipping all `_`
         while (start > 0 && nextInputValue.charAt(start - 1) === '_') {
           start--;