@simplybusiness/mobius-datepicker 6.3.6 → 6.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 6.4.0
+
+### Minor Changes
+
+- 6d4c55f: Fix: Date input height on mobile; don"t show native picker on input click
+
 ## 6.3.6
 
 ### Patch Changes

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -145,6 +145,10 @@ const DatePicker = (props)=>{
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
     };
+    const handleClick = (event)=>{
+        event.preventDefault();
+        togglePopoverVisibility();
+    };
     (0, _react.useEffect)(()=>{
         if (isOpen) {
             var _containerRef_current;
@@ -186,6 +190,7 @@ const DatePicker = (props)=>{
                 // @ts-expect-error event type
                 onBlur: handleBlur,
                 onChange: handleTextFieldChange,
+                onClick: handleClick,
                 value: textFieldVal,
                 isDisabled: isDisabled,
                 isInvalid: isInvalidProp,

package/dist/cjs/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { calendarDay } from \"@simplybusiness/icons\";\nimport {\n  Button,\n  Icon,\n  TextField,\n  TextFieldElementType,\n  TextFieldProps,\n  Validation,\n  VisuallyHidden,\n  useValidationClasses,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  Suspense,\n  lazy,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { isTouchDevice } from \"../../utils/isTouchDevice\";\nimport { formatErrorMessageText, validateDateFormat } from \"./utils\";\n\nconst DatePickerModal = lazy(() => import(\"./DatePickerModal\"));\n\nexport interface GetValidationStateProps {\n  validationState?: Validation[\"validationState\"];\n  isInvalid?: Validation[\"isInvalid\"];\n}\n\nconst getValidationState = (props: GetValidationStateProps) => {\n  const { validationState, isInvalid } = props;\n\n  if (isInvalid || validationState === \"invalid\") {\n    return true;\n  }\n\n  if (isInvalid === false || validationState === \"valid\") {\n    return false;\n  }\n\n  return undefined;\n};\n\nexport interface DatePickerProps\n  extends Validation,\n    Omit<TextFieldProps, \"defaultValue\" | \"onChange\" | \"onBlur\" | \"onFocus\"> {\n  onChange?: (date: string | undefined) => void;\n  defaultValue?: string;\n  min?: string;\n  max?: string;\n  id?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    onChange,\n    defaultValue = \"\",\n    isDisabled,\n    validationState,\n    isInvalid,\n    errorMessage = \"\",\n    ...otherProps\n  } = props;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [top, setTop] = useState<number>(0);\n  const inputRef = useRef<TextFieldElementType | null>(null);\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [textFieldVal, setTextFieldVal] = useState<string>(\n    validateDateFormat(defaultValue),\n  );\n  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);\n  const isInvalidProp = getValidationState({\n    validationState,\n    isInvalid: isValid === false || isInvalid,\n  });\n  const errorMessageText = isInvalidProp\n    ? // eslint-disable-next-line react/destructuring-assignment\n      formatErrorMessageText(textFieldVal, props.min, props.max)\n    : errorMessage;\n  const touchDevice = isTouchDevice();\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid: isInvalidProp,\n  });\n\n  const containerClasses = classNames(\n    \"mobius-date-picker__container\",\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-touch-device\": touchDevice,\n    },\n    validationClasses,\n  );\n\n  const popoverToggleClasses = classNames(\n    \"mobius-date-picker__field-button\",\n    validationClasses,\n  );\n\n  const validate = () => {\n    // If 'min' or 'max' values are provided, checkValidity() will\n    // validate the date and return a boolean\n    const isValidInput = inputRef.current?.checkValidity();\n\n    if (!isValidInput) {\n      setIsValid(false);\n    }\n  };\n\n  useEffect(() => {\n    if (!inputRef.current) return;\n    const validatedValue = validateDateFormat(defaultValue);\n    setTextFieldVal(validatedValue);\n    inputRef.current.value = validatedValue;\n    setIsValid(true);\n    validate();\n  }, [defaultValue]);\n\n  const togglePopoverVisibility = () => {\n    setIsValid(true);\n    setIsOpen(!isOpen);\n  };\n\n  const handleTextFieldChange = (event: ChangeEvent<TextFieldElementType>) => {\n    setTextFieldVal(event.target.value);\n    // onChange only triggers on a valid date\n    // so this clears the error\n    setIsValid(true);\n  };\n\n  const onDateSelected = (selectedDate: string | undefined) => {\n    // Handle null callback from useOnClickOutside\n    if (selectedDate) {\n      setTextFieldVal(selectedDate);\n      setIsValid(true);\n      // Add other callback events here\n      onChange?.(selectedDate);\n    }\n\n    setIsOpen(false);\n  };\n\n  // User has interacted with the component and navigated away\n  const handleBlur = (event: FocusEvent<TextFieldElementType>) => {\n    validate();\n\n    // User hasn't entered a date OR\n    // entered an invalid date\n    if (!textFieldVal) {\n      setIsValid(false);\n    }\n\n    onChange?.(event.target.value);\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      setTop(containerRef.current?.getBoundingClientRect().height || 0);\n      // Disable validation when day picker is open\n      setIsValid(true);\n      return;\n    }\n\n    validate();\n  }, [isOpen]);\n\n  if (touchDevice) {\n    return (\n      <div className={containerClasses}>\n        <TextField\n          ref={inputRef}\n          type=\"date\"\n          className=\"mobius-date-picker\"\n          // @ts-expect-error event type\n          onBlur={handleBlur}\n          onChange={handleTextFieldChange}\n          value={textFieldVal}\n          isDisabled={isDisabled}\n          isInvalid={isInvalidProp}\n          {...otherProps}\n          errorMessage={errorMessage || errorMessageText}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerClasses} ref={containerRef}>\n      <TextField\n        ref={inputRef}\n        type=\"date\"\n        className=\"mobius-date-picker\"\n        // @ts-expect-error event type\n        onBlur={handleBlur}\n        onChange={handleTextFieldChange}\n        value={textFieldVal}\n        isDisabled={isDisabled}\n        isInvalid={isInvalidProp}\n        {...otherProps}\n        errorMessage={errorMessage || errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\n            size=\"sm\"\n          >\n            <Icon size=\"sm\" icon={calendarDay} />\n            <VisuallyHidden>Pick date</VisuallyHidden>\n          </Button>\n        }\n      />\n      {isOpen && (\n        <Suspense>\n          <DatePickerModal\n            date={textFieldVal}\n            isOpen={isOpen}\n            top={top}\n            onSelected={onDateSelected}\n            // eslint-disable-next-line react/destructuring-assignment\n            min={props.min}\n            // eslint-disable-next-line react/destructuring-assignment\n            max={props.max}\n          />\n        </Suspense>\n      )}\n    </div>\n  );\n};\n"],"names":["DatePicker","DatePickerModal","lazy","getValidationState","props","validationState","isInvalid","undefined","onChange","defaultValue","isDisabled","errorMessage","otherProps","containerRef","useRef","top","setTop","useState","inputRef","isOpen","setIsOpen","textFieldVal","setTextFieldVal","validateDateFormat","isValid","setIsValid","isInvalidProp","errorMessageText","formatErrorMessageText","min","max","touchDevice","isTouchDevice","validationClasses","useValidationClasses","containerClasses","classNames","popoverToggleClasses","validate","isValidInput","current","checkValidity","useEffect","validatedValue","value","togglePopoverVisibility","handleTextFieldChange","event","target","onDateSelected","selectedDate","handleBlur","getBoundingClientRect","height","div","className","TextField","ref","type","onBlur","suffixOutside","Button","onClick","size","Icon","icon","calendarDay","VisuallyHidden","Suspense","date","onSelected"],"mappings":"AAAA;;;;;+BAyDaA;;;eAAAA;;;;uBAvDe;wBAUrB;+DACgB;uBAShB;+BACuB;uBAC6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE3D,MAAMC,gCAAkBC,IAAAA,WAAI,EAAC,IAAM,mEAAA,QAAO;AAO1C,MAAMC,qBAAqB,CAACC;IAC1B,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGF;IAEvC,IAAIE,aAAaD,oBAAoB,WAAW;QAC9C,OAAO;IACT;IAEA,IAAIC,cAAc,SAASD,oBAAoB,SAAS;QACtD,OAAO;IACT;IAEA,OAAOE;AACT;AAYO,MAAMP,aAAa,CAACI;IACzB,MAAM,EACJI,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVL,eAAe,EACfC,SAAS,EACTK,eAAe,EAAE,EACjB,GAAGC,YACJ,GAAGR;IACJ,MAAMS,eAAeC,IAAAA,aAAM,EAAwB;IACnD,MAAM,CAACC,KAAKC,OAAO,GAAGC,IAAAA,eAAQ,EAAS;IACvC,MAAMC,WAAWJ,IAAAA,aAAM,EAA8B;IACrD,MAAM,CAACK,QAAQC,UAAU,GAAGH,IAAAA,eAAQ,EAAU;IAC9C,MAAM,CAACI,cAAcC,gBAAgB,GAAGL,IAAAA,eAAQ,EAC9CM,IAAAA,yBAAkB,EAACd;IAErB,MAAM,CAACe,SAASC,WAAW,GAAGR,IAAAA,eAAQ,EAAsBV;IAC5D,MAAMmB,gBAAgBvB,mBAAmB;QACvCE;QACAC,WAAWkB,YAAY,SAASlB;IAClC;IACA,MAAMqB,mBAAmBD,gBAErBE,IAAAA,6BAAsB,EAACP,cAAcjB,MAAMyB,GAAG,EAAEzB,MAAM0B,GAAG,IACzDnB;IACJ,MAAMoB,cAAcC,IAAAA,4BAAa;IAEjC,MAAMC,oBAAoBC,IAAAA,4BAAoB,EAAC;QAC7C7B;QACAC,WAAWoB;IACb;IAEA,MAAMS,mBAAmBC,IAAAA,eAAU,EACjC,iCACA;QACE,iBAAiB1B;QACjB,qBAAqBqB;IACvB,GACAE;IAGF,MAAMI,uBAAuBD,IAAAA,eAAU,EACrC,oCACAH;IAGF,MAAMK,WAAW;YAGMpB;QAFrB,8DAA8D;QAC9D,yCAAyC;QACzC,MAAMqB,gBAAerB,oBAAAA,SAASsB,OAAO,cAAhBtB,wCAAAA,kBAAkBuB,aAAa;QAEpD,IAAI,CAACF,cAAc;YACjBd,WAAW;QACb;IACF;IAEAiB,IAAAA,gBAAS,EAAC;QACR,IAAI,CAACxB,SAASsB,OAAO,EAAE;QACvB,MAAMG,iBAAiBpB,IAAAA,yBAAkB,EAACd;QAC1Ca,gBAAgBqB;QAChBzB,SAASsB,OAAO,CAACI,KAAK,GAAGD;QACzBlB,WAAW;QACXa;IACF,GAAG;QAAC7B;KAAa;IAEjB,MAAMoC,0BAA0B;QAC9BpB,WAAW;QACXL,UAAU,CAACD;IACb;IAEA,MAAM2B,wBAAwB,CAACC;QAC7BzB,gBAAgByB,MAAMC,MAAM,CAACJ,KAAK;QAClC,yCAAyC;QACzC,2BAA2B;QAC3BnB,WAAW;IACb;IAEA,MAAMwB,iBAAiB,CAACC;QACtB,8CAA8C;QAC9C,IAAIA,cAAc;YAChB5B,gBAAgB4B;YAChBzB,WAAW;YACX,iCAAiC;YACjCjB,qBAAAA,+BAAAA,SAAW0C;QACb;QAEA9B,UAAU;IACZ;IAEA,4DAA4D;IAC5D,MAAM+B,aAAa,CAACJ;QAClBT;QAEA,gCAAgC;QAChC,0BAA0B;QAC1B,IAAI,CAACjB,cAAc;YACjBI,WAAW;QACb;QAEAjB,qBAAAA,+BAAAA,SAAWuC,MAAMC,MAAM,CAACJ,KAAK;IAC/B;IAEAF,IAAAA,gBAAS,EAAC;QACR,IAAIvB,QAAQ;gBACHN;YAAPG,OAAOH,EAAAA,wBAAAA,aAAa2B,OAAO,cAApB3B,4CAAAA,sBAAsBuC,qBAAqB,GAAGC,MAAM,KAAI;YAC/D,6CAA6C;YAC7C5B,WAAW;YACX;QACF;QAEAa;IACF,GAAG;QAACnB;KAAO;IAEX,IAAIY,aAAa;QACf,qBACE,qBAACuB;YAAIC,WAAWpB;sBACd,cAAA,qBAACqB,iBAAS;gBACRC,KAAKvC;gBACLwC,MAAK;gBACLH,WAAU;gBACV,8BAA8B;gBAC9BI,QAAQR;gBACR3C,UAAUsC;gBACVF,OAAOvB;gBACPX,YAAYA;gBACZJ,WAAWoB;gBACV,GAAGd,UAAU;gBACdD,cAAcA,gBAAgBgB;;;IAItC;IAEA,qBACE,sBAAC2B;QAAIC,WAAWpB;QAAkBsB,KAAK5C;;0BACrC,qBAAC2C,iBAAS;gBACRC,KAAKvC;gBACLwC,MAAK;gBACLH,WAAU;gBACV,8BAA8B;gBAC9BI,QAAQR;gBACR3C,UAAUsC;gBACVF,OAAOvB;gBACPX,YAAYA;gBACZJ,WAAWoB;gBACV,GAAGd,UAAU;gBACdD,cAAcA,gBAAgBgB;gBAC9BiC,6BACE,sBAACC,cAAM;oBACLN,WAAWlB;oBACXyB,SAASjB;oBACTnC,YAAYA;oBACZqD,MAAK;;sCAEL,qBAACC,YAAI;4BAACD,MAAK;4BAAKE,MAAMC,kBAAW;;sCACjC,qBAACC,sBAAc;sCAAC;;;;;YAIrBhD,wBACC,qBAACiD,eAAQ;0BACP,cAAA,qBAACnE;oBACCoE,MAAMhD;oBACNF,QAAQA;oBACRJ,KAAKA;oBACLuD,YAAYrB;oBACZ,0DAA0D;oBAC1DpB,KAAKzB,MAAMyB,GAAG;oBACd,0DAA0D;oBAC1DC,KAAK1B,MAAM0B,GAAG;;;;;AAM1B"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { calendarDay } from \"@simplybusiness/icons\";\nimport {\n  Button,\n  Icon,\n  TextField,\n  TextFieldElementType,\n  TextFieldProps,\n  Validation,\n  VisuallyHidden,\n  useValidationClasses,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  Suspense,\n  lazy,\n  useEffect,\n  useRef,\n  useState,\n  type MouseEvent,\n} from \"react\";\nimport { isTouchDevice } from \"../../utils/isTouchDevice\";\nimport { formatErrorMessageText, validateDateFormat } from \"./utils\";\n\nconst DatePickerModal = lazy(() => import(\"./DatePickerModal\"));\n\nexport interface GetValidationStateProps {\n  validationState?: Validation[\"validationState\"];\n  isInvalid?: Validation[\"isInvalid\"];\n}\n\nconst getValidationState = (props: GetValidationStateProps) => {\n  const { validationState, isInvalid } = props;\n\n  if (isInvalid || validationState === \"invalid\") {\n    return true;\n  }\n\n  if (isInvalid === false || validationState === \"valid\") {\n    return false;\n  }\n\n  return undefined;\n};\n\nexport interface DatePickerProps\n  extends Validation,\n    Omit<TextFieldProps, \"defaultValue\" | \"onChange\" | \"onBlur\" | \"onFocus\"> {\n  onChange?: (date: string | undefined) => void;\n  defaultValue?: string;\n  min?: string;\n  max?: string;\n  id?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    onChange,\n    defaultValue = \"\",\n    isDisabled,\n    validationState,\n    isInvalid,\n    errorMessage = \"\",\n    ...otherProps\n  } = props;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [top, setTop] = useState<number>(0);\n  const inputRef = useRef<TextFieldElementType | null>(null);\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [textFieldVal, setTextFieldVal] = useState<string>(\n    validateDateFormat(defaultValue),\n  );\n  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);\n  const isInvalidProp = getValidationState({\n    validationState,\n    isInvalid: isValid === false || isInvalid,\n  });\n  const errorMessageText = isInvalidProp\n    ? // eslint-disable-next-line react/destructuring-assignment\n      formatErrorMessageText(textFieldVal, props.min, props.max)\n    : errorMessage;\n  const touchDevice = isTouchDevice();\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid: isInvalidProp,\n  });\n\n  const containerClasses = classNames(\n    \"mobius-date-picker__container\",\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-touch-device\": touchDevice,\n    },\n    validationClasses,\n  );\n\n  const popoverToggleClasses = classNames(\n    \"mobius-date-picker__field-button\",\n    validationClasses,\n  );\n\n  const validate = () => {\n    // If 'min' or 'max' values are provided, checkValidity() will\n    // validate the date and return a boolean\n    const isValidInput = inputRef.current?.checkValidity();\n\n    if (!isValidInput) {\n      setIsValid(false);\n    }\n  };\n\n  useEffect(() => {\n    if (!inputRef.current) return;\n    const validatedValue = validateDateFormat(defaultValue);\n    setTextFieldVal(validatedValue);\n    inputRef.current.value = validatedValue;\n    setIsValid(true);\n    validate();\n  }, [defaultValue]);\n\n  const togglePopoverVisibility = () => {\n    setIsValid(true);\n    setIsOpen(!isOpen);\n  };\n\n  const handleTextFieldChange = (event: ChangeEvent<TextFieldElementType>) => {\n    setTextFieldVal(event.target.value);\n    // onChange only triggers on a valid date\n    // so this clears the error\n    setIsValid(true);\n  };\n\n  const onDateSelected = (selectedDate: string | undefined) => {\n    // Handle null callback from useOnClickOutside\n    if (selectedDate) {\n      setTextFieldVal(selectedDate);\n      setIsValid(true);\n      // Add other callback events here\n      onChange?.(selectedDate);\n    }\n\n    setIsOpen(false);\n  };\n\n  // User has interacted with the component and navigated away\n  const handleBlur = (event: FocusEvent<TextFieldElementType>) => {\n    validate();\n\n    // User hasn't entered a date OR\n    // entered an invalid date\n    if (!textFieldVal) {\n      setIsValid(false);\n    }\n\n    onChange?.(event.target.value);\n  };\n\n  const handleClick = (event: MouseEvent<TextFieldElementType>) => {\n    event.preventDefault();\n    togglePopoverVisibility();\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      setTop(containerRef.current?.getBoundingClientRect().height || 0);\n      // Disable validation when day picker is open\n      setIsValid(true);\n      return;\n    }\n\n    validate();\n  }, [isOpen]);\n\n  if (touchDevice) {\n    return (\n      <div className={containerClasses}>\n        <TextField\n          ref={inputRef}\n          type=\"date\"\n          className=\"mobius-date-picker\"\n          // @ts-expect-error event type\n          onBlur={handleBlur}\n          onChange={handleTextFieldChange}\n          value={textFieldVal}\n          isDisabled={isDisabled}\n          isInvalid={isInvalidProp}\n          {...otherProps}\n          errorMessage={errorMessage || errorMessageText}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerClasses} ref={containerRef}>\n      <TextField\n        ref={inputRef}\n        type=\"date\"\n        className=\"mobius-date-picker\"\n        // @ts-expect-error event type\n        onBlur={handleBlur}\n        onChange={handleTextFieldChange}\n        onClick={handleClick}\n        value={textFieldVal}\n        isDisabled={isDisabled}\n        isInvalid={isInvalidProp}\n        {...otherProps}\n        errorMessage={errorMessage || errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\n            size=\"sm\"\n          >\n            <Icon size=\"sm\" icon={calendarDay} />\n            <VisuallyHidden>Pick date</VisuallyHidden>\n          </Button>\n        }\n      />\n      {isOpen && (\n        <Suspense>\n          <DatePickerModal\n            date={textFieldVal}\n            isOpen={isOpen}\n            top={top}\n            onSelected={onDateSelected}\n            // eslint-disable-next-line react/destructuring-assignment\n            min={props.min}\n            // eslint-disable-next-line react/destructuring-assignment\n            max={props.max}\n          />\n        </Suspense>\n      )}\n    </div>\n  );\n};\n"],"names":["DatePicker","DatePickerModal","lazy","getValidationState","props","validationState","isInvalid","undefined","onChange","defaultValue","isDisabled","errorMessage","otherProps","containerRef","useRef","top","setTop","useState","inputRef","isOpen","setIsOpen","textFieldVal","setTextFieldVal","validateDateFormat","isValid","setIsValid","isInvalidProp","errorMessageText","formatErrorMessageText","min","max","touchDevice","isTouchDevice","validationClasses","useValidationClasses","containerClasses","classNames","popoverToggleClasses","validate","isValidInput","current","checkValidity","useEffect","validatedValue","value","togglePopoverVisibility","handleTextFieldChange","event","target","onDateSelected","selectedDate","handleBlur","handleClick","preventDefault","getBoundingClientRect","height","div","className","TextField","ref","type","onBlur","onClick","suffixOutside","Button","size","Icon","icon","calendarDay","VisuallyHidden","Suspense","date","onSelected"],"mappings":"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"}