@bolttech/atoms-date-input 0.1.1 → 0.1.2

package/index.cjs.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var styled = require('styled-components');
+var uiUtils = require('@bolttech/ui-utils');
+var reactDom = require('react-dom');
+var moleculesCalendar = require('@bolttech/molecules-calendar');
+var atomsIcon = require('@bolttech/atoms-icon');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -96,7 +100,7 @@ var check = function (it) {
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global$b =
+var globalThis_1 =
   // eslint-disable-next-line es/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -109,30 +113,30 @@ var global$b =
 
 var sharedStore = {exports: {}};
 
-var global$a = global$b;
+var globalThis$c = globalThis_1;
 
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$5 = Object.defineProperty;
 
 var defineGlobalProperty$3 = function (key, value) {
   try {
-    defineProperty$5(global$a, key, { value: value, configurable: true, writable: true });
+    defineProperty$5(globalThis$c, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$a[key] = value;
+    globalThis$c[key] = value;
   } return value;
 };
 
-var globalThis$1 = global$b;
+var globalThis$b = globalThis_1;
 var defineGlobalProperty$2 = defineGlobalProperty$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = sharedStore.exports = globalThis$1[SHARED] || defineGlobalProperty$2(SHARED, {});
+var store$3 = sharedStore.exports = globalThis$b[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 (store$3.versions || (store$3.versions = [])).push({
-  version: '3.37.1',
+  version: '3.39.0',
   mode: 'global',
   copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.37.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.39.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -174,13 +178,18 @@ var uid$2 = function (key) {
   return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString(++id + postfix, 36);
 };
 
-var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
+var globalThis$a = globalThis_1;
 
-var global$9 = global$b;
-var userAgent = engineUserAgent;
+var navigator = globalThis$a.navigator;
+var userAgent$1 = navigator && navigator.userAgent;
 
-var process = global$9.process;
-var Deno = global$9.Deno;
+var environmentUserAgent = userAgent$1 ? String(userAgent$1) : '';
+
+var globalThis$9 = globalThis_1;
+var userAgent = environmentUserAgent;
+
+var process = globalThis$9.process;
+var Deno = globalThis$9.Deno;
 var versions = process && process.versions || Deno && Deno.version;
 var v8 = versions && versions.v8;
 var match, version;
@@ -202,14 +211,14 @@ if (!version && userAgent) {
   }
 }
 
-var engineV8Version = version;
+var environmentV8Version = version;
 
 /* eslint-disable es/no-symbol -- required for testing */
-var V8_VERSION = engineV8Version;
+var V8_VERSION = environmentV8Version;
 var fails$8 = fails$b;
-var global$8 = global$b;
+var globalThis$8 = globalThis_1;
 
-var $String$4 = global$8.String;
+var $String$4 = globalThis$8.String;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
 var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$8(function () {
@@ -226,18 +235,18 @@ var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$8(func
 /* eslint-disable es/no-symbol -- required for testing */
 var NATIVE_SYMBOL$1 = symbolConstructorDetection;
 
-var useSymbolAsUid = NATIVE_SYMBOL$1
-  && !Symbol.sham
-  && typeof Symbol.iterator == 'symbol';
+var useSymbolAsUid = NATIVE_SYMBOL$1 &&
+  !Symbol.sham &&
+  typeof Symbol.iterator == 'symbol';
 
-var global$7 = global$b;
+var globalThis$7 = globalThis_1;
 var shared$2 = shared$3;
 var hasOwn$8 = hasOwnProperty_1;
 var uid$1 = uid$2;
 var NATIVE_SYMBOL = symbolConstructorDetection;
 var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
-var Symbol$1 = global$7.Symbol;
+var Symbol$1 = globalThis$7.Symbol;
 var WellKnownSymbolsStore = shared$2('wks');
 var createWellKnownSymbol = USE_SYMBOL_AS_UID$1 ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid$1;
 
@@ -303,10 +312,10 @@ var v8PrototypeDefineBug = DESCRIPTORS$9 && fails$6(function () {
 
 var objectDefineProperty = {};
 
-var global$6 = global$b;
+var globalThis$6 = globalThis_1;
 var isObject$6 = isObject$8;
 
-var document$1 = global$6.document;
+var document$1 = globalThis$6.document;
 // typeof document.createElement is 'object' in old IE
 var EXISTS$1 = isObject$6(document$1) && isObject$6(document$1.createElement);
 
@@ -334,7 +343,7 @@ var functionCall = NATIVE_BIND ? call$5.bind(call$5) : function () {
   return call$5.apply(call$5, arguments);
 };
 
-var global$5 = global$b;
+var globalThis$5 = globalThis_1;
 var isCallable$b = isCallable$d;
 
 var aFunction = function (argument) {
@@ -342,7 +351,7 @@ var aFunction = function (argument) {
 };
 
 var getBuiltIn$3 = function (namespace, method) {
-  return arguments.length < 2 ? aFunction(global$5[namespace]) : global$5[namespace] && global$5[namespace][method];
+  return arguments.length < 2 ? aFunction(globalThis$5[namespace]) : globalThis$5[namespace] && globalThis$5[namespace][method];
 };
 
 var uncurryThis$6 = functionUncurryThis;
@@ -681,7 +690,8 @@ var NullProtoObjectViaActiveX = function (activeXDocument) {
   activeXDocument.write(scriptTag(''));
   activeXDocument.close();
   var temp = activeXDocument.parentWindow.Object;
-  activeXDocument = null; // avoid memory leak
+  // eslint-disable-next-line no-useless-assignment -- avoid memory leak
+  activeXDocument = null;
   return temp;
 };
 
@@ -762,10 +772,10 @@ var addToUnscopables$1 = function (key) {
 
 var iterators = {};
 
-var global$4 = global$b;
+var globalThis$4 = globalThis_1;
 var isCallable$7 = isCallable$d;
 
-var WeakMap$1 = global$4.WeakMap;
+var WeakMap$1 = globalThis$4.WeakMap;
 
 var weakMapBasicDetection = isCallable$7(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
@@ -790,7 +800,7 @@ var createNonEnumerableProperty$4 = DESCRIPTORS$5 ? function (object, key, value
 };
 
 var NATIVE_WEAK_MAP = weakMapBasicDetection;
-var global$3 = global$b;
+var globalThis$3 = globalThis_1;
 var isObject$3 = isObject$8;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$4;
 var hasOwn$6 = hasOwnProperty_1;
@@ -799,8 +809,8 @@ var sharedKey$1 = sharedKey$3;
 var hiddenKeys$1 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-var TypeError$1 = global$3.TypeError;
-var WeakMap = global$3.WeakMap;
+var TypeError$1 = globalThis$3.TypeError;
+var WeakMap = globalThis$3.WeakMap;
 var set, get, has;
 
 var enforce = function (it) {
@@ -1093,7 +1103,7 @@ var POLYFILL = isForced$1.POLYFILL = 'P';
 
 var isForced_1 = isForced$1;
 
-var global$2 = global$b;
+var globalThis$2 = globalThis_1;
 var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$2 = createNonEnumerableProperty$4;
 var defineBuiltIn$2 = defineBuiltIn$3;
@@ -1122,11 +1132,11 @@ var _export = function (options, source) {
   var STATIC = options.stat;
   var FORCED, target, key, targetProperty, sourceProperty, descriptor;
   if (GLOBAL) {
-    target = global$2;
+    target = globalThis$2;
   } else if (STATIC) {
-    target = global$2[TARGET] || defineGlobalProperty(TARGET, {});
+    target = globalThis$2[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = global$2[TARGET] && global$2[TARGET].prototype;
+    target = globalThis$2[TARGET] && globalThis$2[TARGET].prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -1452,7 +1462,7 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
   var target = state.target;
   var index = state.index++;
   if (!target || index >= target.length) {
-    state.target = undefined;
+    state.target = null;
     return createIterResultObject(undefined, true);
   }
   switch (state.kind) {
@@ -1587,7 +1597,7 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$1 = global$b;
+var globalThis$1 = globalThis_1;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
@@ -1619,7 +1629,7 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$1[COLLECTION_NAME] && global$1[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(globalThis$1[COLLECTION_NAME] && globalThis$1[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
@@ -1637,7 +1647,11 @@ let _ = t => t,
   _t10,
   _t11,
   _t12,
-  _t13;
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17;
 const Label = styled__default["default"].label(_t || (_t = _`
   ${0}
 `), ({
@@ -1655,6 +1669,7 @@ const Label = styled__default["default"].label(_t || (_t = _`
   theme
 }) => theme.components.input[$variant].text.color.required.default));
 const InputWrapper = styled__default["default"].div(_t3 || (_t3 = _`
+  position: relative;
   display: flex;
   flex-direction: column;
   font-weight: ${0};
@@ -1697,6 +1712,7 @@ const InputWrapper = styled__default["default"].div(_t3 || (_t3 = _`
 const Container = styled__default["default"].div(_t5 || (_t5 = _`
   display: flex;
   flex: 1;
+  align-items: center;
   padding: ${0};
   background-color: ${0};
   margin-bottom: ${0};
@@ -1895,6 +1911,42 @@ const Error = styled__default["default"].span(_t13 || (_t13 = _`
 }) => theme.components.input.error.letterSpacing, ({
   theme
 }) => theme.components.input.paddingHorizontal);
+const OpenAnimation = styled.keyframes(_t14 || (_t14 = _`
+  100% { opacity: 1; }
+`));
+styled__default["default"].div(_t15 || (_t15 = _`
+  position: relative;
+
+  ${0}
+`), ({
+  disabled
+}) => disabled && styled.css(_t16 || (_t16 = _`
+      pointer-events: none;
+    `)));
+const CalendarContainer = styled__default["default"].div(_t17 || (_t17 = _`
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  animation-delay: 1ms;
+  animation-duration: 250ms;
+  animation-fill-mode: forwards;
+  animation-name: ${0};
+  animation-timing-function: ease-in-out;
+  opacity: 0;
+
+  &.top {
+    transform: translateY(-100%);
+    top: -${0};
+  }
+
+  &.bottom {
+    top: ${0};
+  }
+`), OpenAnimation, ({
+  theme
+}) => theme.components.input.borderWidth.default, ({
+  theme
+}) => `calc(100% + ${theme.components.input.borderWidth.default})`);
 
 const DateInput = /*#__PURE__*/react.forwardRef(({
   id: _id = 'date-of-birth-input-id',
@@ -1905,17 +1957,31 @@ const DateInput = /*#__PURE__*/react.forwardRef(({
   required,
   disabled,
   value,
+  min,
+  max,
+  locale,
+  cancel,
+  confirm,
+  showDatepicker,
   onChange,
   onBlur
 }, ref) => {
   const [, forceUpdate] = react.useReducer(x => x + 1, 0);
+  const calendarRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const dayInputRef = react.useRef(null);
   const day = react.useRef(value ? String(value).substring(0, 2) : '');
   const month = react.useRef(value ? String(value).substring(3, 5) : '');
   const year = react.useRef(value ? String(value).substring(6, 10) : '');
+  const [isCalendarOpen, setIsCalendarOpen] = react.useState(false);
+  const {
+    addOpenPositionClass
+  } = uiUtils.useOpenPosition(calendarRef, containerRef, ['top', 'bottom'], 'bottom');
   const updateDate = e => {
+    const value = !year.current && !month.current && !day.current ? '' : `${year.current}-${month.current}-${day.current}`;
     onChange && onChange(Object.assign(Object.assign({}, e), {
       target: Object.assign(Object.assign({}, e.target), {
-        value: `${year.current}-${month.current}-${day.current}`
+        value
       })
     }));
   };
@@ -1948,30 +2014,69 @@ const DateInput = /*#__PURE__*/react.forwardRef(({
     // @ts-ignore
     onBlur(`${year.current}-${month.current}-${day.current}`);
   };
+  const handleFocus = () => {
+    setIsCalendarOpen(false);
+  };
   const handleNextInput = next => {
     const input = document.getElementById(`${_id}-input-${next}`);
     input === null || input === void 0 ? void 0 : input.focus();
   };
+  const handleCancel = react.useCallback(() => {
+    setIsCalendarOpen(false);
+  }, []);
+  const handleConfirm = react.useCallback(date => {
+    setInputValue(date);
+    setIsCalendarOpen(false);
+    updateDate({});
+  }, [onChange]);
   react.useEffect(() => {
     if (!value || typeof value !== 'string') return;
+    setInputValue(value);
+  }, [value]);
+  const setInputValue = value => {
     const [yearValue, monthValue, dayValue] = value.split('-');
-    day.current = dayValue;
-    month.current = monthValue;
-    year.current = yearValue;
+    day.current = dayValue || '';
+    month.current = monthValue || '';
+    year.current = yearValue || '';
     forceUpdate();
-  }, [value]);
+  };
+  const onClickIcon = () => {
+    var _a;
+    reactDom.flushSync(() => {
+      var _a, _b;
+      if (disabled) return;
+      if (isCalendarOpen) {
+        (_a = dayInputRef === null || dayInputRef === void 0 ? void 0 : dayInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+      setIsCalendarOpen(!isCalendarOpen);
+      (_b = dayInputRef === null || dayInputRef === void 0 ? void 0 : dayInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+    });
+    if (!isCalendarOpen) {
+      (_a = calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus({
+        preventScroll: true
+      });
+    }
+    addOpenPositionClass();
+  };
+  const onBlurCalendar = event => {
+    var _a;
+    if (!((_a = calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) || !event.relatedTarget) {
+      setIsCalendarOpen(false);
+    }
+  };
   return jsxRuntime.jsxs(InputWrapper, {
     disabled: !!disabled,
     "data-testid": _dataTestId,
     "$variant": _variant,
     ref: ref,
-    children: [jsxRuntime.jsx(Container, {
+    children: [jsxRuntime.jsxs(Container, {
       id: `${_id}-container`,
       "data-testid": `${_dataTestId}-container`,
+      ref: containerRef,
       "$hasError": !!errorMessage,
       "$hasValue": !!value && value !== '',
       "$variant": _variant,
-      children: jsxRuntime.jsxs(LeftContainer, {
+      children: [jsxRuntime.jsxs(LeftContainer, {
         "$before": false,
         children: [label && jsxRuntime.jsx(Label, {
           id: `${_id}-label`,
@@ -1981,53 +2086,84 @@ const DateInput = /*#__PURE__*/react.forwardRef(({
           "$variant": _variant,
           children: label
         }), jsxRuntime.jsxs(LeftContainer, {
-          "$direction": 'row',
+          "$direction": "row",
           "$variant": _variant,
           "$before": true,
           children: [jsxRuntime.jsx(Input, {
+            ref: dayInputRef,
             id: `${_id}-input-day`,
             "data-testid": `${_dataTestId}-input-day`,
-            type: 'number',
+            type: "number",
             pattern: "[0-9]*",
             disabled: disabled,
             value: day.current,
             required: required,
             "$variant": _variant,
-            "$width": '40px',
-            placeholder: 'DD',
+            "$width": "40px",
+            placeholder: "DD",
             onChange: handleDayChange,
             onBlur: handleBlur,
+            onFocus: handleFocus,
             maxLength: 2
           }), jsxRuntime.jsx(Input, {
             id: `${_id}-input-month`,
             "data-testid": `${_dataTestId}-input-month`,
-            type: 'number',
+            type: "number",
             pattern: "[0-9]*",
             disabled: disabled,
             value: month.current,
             required: required,
             "$variant": _variant,
-            "$width": '43px',
-            placeholder: 'MM',
+            "$width": "43px",
+            placeholder: "MM",
             onChange: handleMonthChange,
             onBlur: handleBlur,
+            onFocus: handleFocus,
             maxLength: 2
           }), jsxRuntime.jsx(Input, {
             id: `${_id}-input-year`,
             "data-testid": `${_dataTestId}-input-year`,
-            type: 'number',
+            type: "number",
             pattern: "[0-9]*",
             disabled: disabled,
             value: year.current,
             required: required,
             "$variant": _variant,
-            "$width": '60px',
-            placeholder: 'YYYY',
+            "$width": "60px",
+            placeholder: "YYYY",
             onChange: handleYearChange,
             onBlur: handleBlur,
+            onFocus: handleFocus,
             maxLength: 4
           })]
         })]
+      }), showDatepicker && jsxRuntime.jsx(Icon, {
+        id: `${_id}-icon`,
+        "data-testid": `${_dataTestId}-button-icon`,
+        onClick: onClickIcon,
+        "$hasError": !!errorMessage,
+        "$variant": _variant,
+        children: jsxRuntime.jsx(atomsIcon.Icon, {
+          "data-testid": `${_dataTestId}-icon`,
+          icon: 'calendar_month'
+        })
+      })]
+    }), isCalendarOpen && jsxRuntime.jsx(CalendarContainer, {
+      ref: calendarRef,
+      onClick: event => event.stopPropagation(),
+      tabIndex: 1,
+      onBlur: onBlurCalendar,
+      children: jsxRuntime.jsx(moleculesCalendar.Calendar, {
+        id: `${_id}-calendar`,
+        dataTestId: `${_dataTestId}-calendar`,
+        locale: locale,
+        min: min,
+        max: max,
+        value: value,
+        cancel: cancel,
+        confirm: confirm,
+        onCancel: handleCancel,
+        onChange: handleConfirm
       })
     }), !!errorMessage && jsxRuntime.jsx(Error, {
       id: `${_id}-error`,

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@bolttech/atoms-date-input",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "peerDependencies": {
-    "@bolttech/atoms-input": "^0.26.1"
+    "@bolttech/atoms-input": "^0.26.1",
+    "@bolttech/molecules-calendar": "^0.25.1",
+    "@bolttech/ui-utils": "^0.5.0"
   },
   "main": "./index.cjs.js",
   "type": "commonjs",
   "dependencies": {
     "react": "18.2.0",
-    "styled-components": "5.3.11"
+    "react-dom": "18.2.0",
+    "styled-components": "6.1.13"
   }
 }

package/src/index.d.ts

@@ -1 +1,2 @@
 export * from './lib/date-input';
+export type { DateInputProps } from './lib/date-input.type';

package/src/lib/date-input.d.ts

@@ -1,16 +1,5 @@
 /// <reference types="react" />
-declare const DateInput: import("react").ForwardRefExoticComponent<import("@bolttech/ui-utils").DefaultProps & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "className"> & {
-    label?: string | undefined;
-    errorMessage?: string | undefined;
-    helperMessage?: string | undefined;
-    variant?: import("@bolttech/atoms-input/src/lib/atoms-input.type").InputVariants | undefined;
-    dataTestId?: string | undefined;
-    icon?: string | undefined;
-    required?: boolean | undefined;
-    onClickIcon?: (() => void) | undefined;
-    onBlur?: ((value: unknown) => void) | ((evt: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-    onFocus?: ((value: unknown) => void) | ((evt: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-    onChange?: ((value: unknown) => void) | ((evt: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
+import { DateInputProps } from './date-input.type';
+declare const DateInput: React.ForwardRefExoticComponent<React.PropsWithoutRef<DateInputProps> & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;
 export { DateInput };

package/src/lib/date-input.styles.d.ts

@@ -29,3 +29,7 @@ export declare const Icon: import("styled-components/dist/types").IStyledCompone
 export declare const Error: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $variant: InputVariants;
 }>> & string;
+export declare const DatePickerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean | undefined;
+}>> & string;
+export declare const CalendarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/src/lib/date-input.type.d.ts

@@ -0,0 +1,10 @@
+import { InputProps } from '@bolttech/atoms-input';
+export type DateInputProps = InputProps & {
+    max: Date;
+    min: Date;
+    value: string | undefined;
+    locale: string;
+    showDatepicker?: boolean;
+    cancel?: string;
+    confirm?: string;
+};