@simplybusiness/mobius-datepicker 4.3.32 → 4.3.33

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 4.3.33
+
+### Patch Changes
+
+- 2392b6b: Fix handling of `isInvalid` prop; remove internal use of `validationState`
+- Updated dependencies [2392b6b]
+- Updated dependencies [09bc11f]
+  - @simplybusiness/mobius@4.8.8
+
 ## 4.3.32
 
 ### Patch Changes

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "DatePicker", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _mobius = require("@simplybusiness/mobius");
+const _icons = require("@simplybusiness/icons");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
 const _isTouchDevice = require("../../utils/isTouchDevice");
@@ -62,29 +63,39 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const DatePickerModal = /*#__PURE__*/ (0, _react.lazy)(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./DatePickerModal"))));
+const getValidationState = (props)=>{
+    const { validationState, isInvalid } = props;
+    if (isInvalid || validationState === "invalid") {
+        return true;
+    }
+    if (isInvalid === false || validationState === "valid") {
+        return false;
+    }
+    return undefined;
+};
 const DatePicker = (props)=>{
-    const { onChange, defaultValue = "", isDisabled, validationState, errorMessage = "", ...otherProps } = props;
+    const { onChange, defaultValue = "", isDisabled, validationState, isInvalid, errorMessage = "", ...otherProps } = props;
     const containerRef = (0, _react.useRef)(null);
     const [top, setTop] = (0, _react.useState)(0);
     const inputRef = (0, _react.useRef)(null);
     const [isOpen, setIsOpen] = (0, _react.useState)(false);
     const [textFieldVal, setTextFieldVal] = (0, _react.useState)((0, _utils.validateDateFormat)(defaultValue));
-    const [isValid, setIsValid] = (0, _react.useState)(true);
-    const errorMessageText = !isValid ? (0, _utils.formatErrorMessageText)(textFieldVal, props.min, props.max) : errorMessage;
-    const inputValidationState = !isValid ? "invalid" : validationState;
+    const [isValid, setIsValid] = (0, _react.useState)(undefined);
+    const isInvalidProp = getValidationState({
+        validationState,
+        isInvalid: isValid === false || isInvalid
+    });
+    const errorMessageText = isInvalidProp ? (0, _utils.formatErrorMessageText)(textFieldVal, props.min, props.max) : errorMessage;
     const touchDevice = (0, _isTouchDevice.isTouchDevice)();
-    const validationClasses = {
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid" || !isValid
-    };
+    const validationClasses = (0, _mobius.useValidationClasses)({
+        validationState,
+        isInvalid: isInvalidProp
+    });
     const containerClasses = (0, _dedupe.default)("mobius/DatePickerContainer", {
         "--is-disabled": isDisabled,
-        "--is-touch-device": touchDevice,
-        ...validationClasses
-    });
-    const popoverToggleClasses = (0, _dedupe.default)("mobius/DateFieldButton", {
-        ...validationClasses
-    });
+        "--is-touch-device": touchDevice
+    }, validationClasses);
+    const popoverToggleClasses = (0, _dedupe.default)("mobius/DateFieldButton", validationClasses);
     const togglePopoverVisibility = ()=>{
         setIsValid(true);
         setIsOpen(!isOpen);
@@ -148,7 +159,7 @@ const DatePicker = (props)=>{
                 onChange: handleTextFieldChange,
                 value: textFieldVal,
                 isDisabled: isDisabled,
-                validationState: inputValidationState,
+                isInvalid: isInvalidProp,
                 ...otherProps,
                 errorMessage: errorMessageText
             })
@@ -167,16 +178,22 @@ const DatePicker = (props)=>{
                 onChange: handleTextFieldChange,
                 value: textFieldVal,
                 isDisabled: isDisabled,
-                validationState: inputValidationState,
+                isInvalid: isInvalidProp,
                 ...otherProps,
                 errorMessage: errorMessageText,
-                suffixOutside: /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.Button, {
+                suffixOutside: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_mobius.Button, {
                     className: popoverToggleClasses,
                     onClick: togglePopoverVisibility,
                     isDisabled: isDisabled,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.VisuallyHidden, {
-                        children: "Pick date"
-                    })
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.Icon, {
+                            size: "sm",
+                            icon: _icons.calendarDay
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.VisuallyHidden, {
+                            children: "Pick date"
+                        })
+                    ]
                 })
             }),
             isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.Suspense, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Button,\n  TextField,\n  TextFieldElementType,\n  TextFieldProps,\n  VisuallyHidden,\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 DatePickerProps\n  extends Omit<\n    TextFieldProps,\n    \"defaultValue\" | \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\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    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>(true);\n  const errorMessageText = !isValid\n    ? // eslint-disable-next-line react/destructuring-assignment\n      formatErrorMessageText(textFieldVal, props.min, props.max)\n    : errorMessage;\n  const inputValidationState = !isValid ? \"invalid\" : validationState;\n  const touchDevice = isTouchDevice();\n\n  const validationClasses = {\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\" || !isValid,\n  };\n\n  const containerClasses = classNames(\"mobius/DatePickerContainer\", {\n    \"--is-disabled\": isDisabled,\n    \"--is-touch-device\": touchDevice,\n    ...validationClasses,\n  });\n\n  const popoverToggleClasses = classNames(\"mobius/DateFieldButton\", {\n    ...validationClasses,\n  });\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 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  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/DatePicker\"\n          // @ts-expect-error event type\n          onBlur={handleBlur}\n          onChange={handleTextFieldChange}\n          value={textFieldVal}\n          isDisabled={isDisabled}\n          validationState={inputValidationState}\n          {...otherProps}\n          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/DatePicker\"\n        // @ts-expect-error event type\n        onBlur={handleBlur}\n        onChange={handleTextFieldChange}\n        value={textFieldVal}\n        isDisabled={isDisabled}\n        validationState={inputValidationState}\n        {...otherProps}\n        errorMessage={errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\n          >\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","props","onChange","defaultValue","isDisabled","validationState","errorMessage","otherProps","containerRef","useRef","top","setTop","useState","inputRef","isOpen","setIsOpen","textFieldVal","setTextFieldVal","validateDateFormat","isValid","setIsValid","errorMessageText","formatErrorMessageText","min","max","inputValidationState","touchDevice","isTouchDevice","validationClasses","containerClasses","classNames","popoverToggleClasses","togglePopoverVisibility","handleTextFieldChange","event","target","value","validate","isValidInput","current","checkValidity","onDateSelected","selectedDate","handleBlur","useEffect","getBoundingClientRect","height","div","className","TextField","ref","type","onBlur","suffixOutside","Button","onClick","VisuallyHidden","Suspense","date","onSelected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Button,\n  TextField,\n  TextFieldElementType,\n  TextFieldProps,\n  VisuallyHidden,\n  Validation,\n  useValidationClasses,\n  Icon,\n} from \"@simplybusiness/mobius\";\nimport { calendarDay } from \"@simplybusiness/icons\";\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/DatePickerContainer\",\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-touch-device\": touchDevice,\n    },\n    validationClasses,\n  );\n\n  const popoverToggleClasses = classNames(\n    \"mobius/DateFieldButton\",\n    validationClasses,\n  );\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 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  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/DatePicker\"\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={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/DatePicker\"\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={errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\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","togglePopoverVisibility","handleTextFieldChange","event","target","value","validate","isValidInput","current","checkValidity","onDateSelected","selectedDate","handleBlur","useEffect","getBoundingClientRect","height","div","className","TextField","ref","type","onBlur","suffixOutside","Button","onClick","Icon","size","icon","calendarDay","VisuallyHidden","Suspense","date","onSelected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/esm/components/DatePicker/DatePicker.js

@@ -1,34 +1,45 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, TextField, VisuallyHidden } from "@simplybusiness/mobius";
+import { Button, TextField, VisuallyHidden, useValidationClasses, Icon } from "@simplybusiness/mobius";
+import { calendarDay } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
 import { Suspense, lazy, useEffect, useRef, useState } from "react";
 import { isTouchDevice } from "../../utils/isTouchDevice";
 import { formatErrorMessageText, validateDateFormat } from "./utils";
 const DatePickerModal = /*#__PURE__*/ lazy(()=>import("./DatePickerModal"));
+const getValidationState = (props)=>{
+    const { validationState, isInvalid } = props;
+    if (isInvalid || validationState === "invalid") {
+        return true;
+    }
+    if (isInvalid === false || validationState === "valid") {
+        return false;
+    }
+    return undefined;
+};
 export const DatePicker = (props)=>{
-    const { onChange, defaultValue = "", isDisabled, validationState, errorMessage = "", ...otherProps } = props;
+    const { onChange, defaultValue = "", isDisabled, validationState, isInvalid, errorMessage = "", ...otherProps } = props;
     const containerRef = useRef(null);
     const [top, setTop] = useState(0);
     const inputRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [textFieldVal, setTextFieldVal] = useState(validateDateFormat(defaultValue));
-    const [isValid, setIsValid] = useState(true);
-    const errorMessageText = !isValid ? formatErrorMessageText(textFieldVal, props.min, props.max) : errorMessage;
-    const inputValidationState = !isValid ? "invalid" : validationState;
+    const [isValid, setIsValid] = useState(undefined);
+    const isInvalidProp = getValidationState({
+        validationState,
+        isInvalid: isValid === false || isInvalid
+    });
+    const errorMessageText = isInvalidProp ? formatErrorMessageText(textFieldVal, props.min, props.max) : errorMessage;
     const touchDevice = isTouchDevice();
-    const validationClasses = {
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid" || !isValid
-    };
+    const validationClasses = useValidationClasses({
+        validationState,
+        isInvalid: isInvalidProp
+    });
     const containerClasses = classNames("mobius/DatePickerContainer", {
         "--is-disabled": isDisabled,
-        "--is-touch-device": touchDevice,
-        ...validationClasses
-    });
-    const popoverToggleClasses = classNames("mobius/DateFieldButton", {
-        ...validationClasses
-    });
+        "--is-touch-device": touchDevice
+    }, validationClasses);
+    const popoverToggleClasses = classNames("mobius/DateFieldButton", validationClasses);
     const togglePopoverVisibility = ()=>{
         setIsValid(true);
         setIsOpen(!isOpen);
@@ -92,7 +103,7 @@ export const DatePicker = (props)=>{
                 onChange: handleTextFieldChange,
                 value: textFieldVal,
                 isDisabled: isDisabled,
-                validationState: inputValidationState,
+                isInvalid: isInvalidProp,
                 ...otherProps,
                 errorMessage: errorMessageText
             })
@@ -111,16 +122,22 @@ export const DatePicker = (props)=>{
                 onChange: handleTextFieldChange,
                 value: textFieldVal,
                 isDisabled: isDisabled,
-                validationState: inputValidationState,
+                isInvalid: isInvalidProp,
                 ...otherProps,
                 errorMessage: errorMessageText,
-                suffixOutside: /*#__PURE__*/ _jsx(Button, {
+                suffixOutside: /*#__PURE__*/ _jsxs(Button, {
                     className: popoverToggleClasses,
                     onClick: togglePopoverVisibility,
                     isDisabled: isDisabled,
-                    children: /*#__PURE__*/ _jsx(VisuallyHidden, {
-                        children: "Pick date"
-                    })
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            size: "sm",
+                            icon: calendarDay
+                        }),
+                        /*#__PURE__*/ _jsx(VisuallyHidden, {
+                            children: "Pick date"
+                        })
+                    ]
                 })
             }),
             isOpen && /*#__PURE__*/ _jsx(Suspense, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Button,\n  TextField,\n  TextFieldElementType,\n  TextFieldProps,\n  VisuallyHidden,\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 DatePickerProps\n  extends Omit<\n    TextFieldProps,\n    \"defaultValue\" | \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\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    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>(true);\n  const errorMessageText = !isValid\n    ? // eslint-disable-next-line react/destructuring-assignment\n      formatErrorMessageText(textFieldVal, props.min, props.max)\n    : errorMessage;\n  const inputValidationState = !isValid ? \"invalid\" : validationState;\n  const touchDevice = isTouchDevice();\n\n  const validationClasses = {\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\" || !isValid,\n  };\n\n  const containerClasses = classNames(\"mobius/DatePickerContainer\", {\n    \"--is-disabled\": isDisabled,\n    \"--is-touch-device\": touchDevice,\n    ...validationClasses,\n  });\n\n  const popoverToggleClasses = classNames(\"mobius/DateFieldButton\", {\n    ...validationClasses,\n  });\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 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  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/DatePicker\"\n          // @ts-expect-error event type\n          onBlur={handleBlur}\n          onChange={handleTextFieldChange}\n          value={textFieldVal}\n          isDisabled={isDisabled}\n          validationState={inputValidationState}\n          {...otherProps}\n          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/DatePicker\"\n        // @ts-expect-error event type\n        onBlur={handleBlur}\n        onChange={handleTextFieldChange}\n        value={textFieldVal}\n        isDisabled={isDisabled}\n        validationState={inputValidationState}\n        {...otherProps}\n        errorMessage={errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\n          >\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":["Button","TextField","VisuallyHidden","classNames","Suspense","lazy","useEffect","useRef","useState","isTouchDevice","formatErrorMessageText","validateDateFormat","DatePickerModal","DatePicker","props","onChange","defaultValue","isDisabled","validationState","errorMessage","otherProps","containerRef","top","setTop","inputRef","isOpen","setIsOpen","textFieldVal","setTextFieldVal","isValid","setIsValid","errorMessageText","min","max","inputValidationState","touchDevice","validationClasses","containerClasses","popoverToggleClasses","togglePopoverVisibility","handleTextFieldChange","event","target","value","validate","isValidInput","current","checkValidity","onDateSelected","selectedDate","handleBlur","getBoundingClientRect","height","div","className","ref","type","onBlur","suffixOutside","onClick","date","onSelected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Button,\n  TextField,\n  TextFieldElementType,\n  TextFieldProps,\n  VisuallyHidden,\n  Validation,\n  useValidationClasses,\n  Icon,\n} from \"@simplybusiness/mobius\";\nimport { calendarDay } from \"@simplybusiness/icons\";\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/DatePickerContainer\",\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-touch-device\": touchDevice,\n    },\n    validationClasses,\n  );\n\n  const popoverToggleClasses = classNames(\n    \"mobius/DateFieldButton\",\n    validationClasses,\n  );\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 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  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/DatePicker\"\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={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/DatePicker\"\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={errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\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":["Button","TextField","VisuallyHidden","useValidationClasses","Icon","calendarDay","classNames","Suspense","lazy","useEffect","useRef","useState","isTouchDevice","formatErrorMessageText","validateDateFormat","DatePickerModal","getValidationState","props","validationState","isInvalid","undefined","DatePicker","onChange","defaultValue","isDisabled","errorMessage","otherProps","containerRef","top","setTop","inputRef","isOpen","setIsOpen","textFieldVal","setTextFieldVal","isValid","setIsValid","isInvalidProp","errorMessageText","min","max","touchDevice","validationClasses","containerClasses","popoverToggleClasses","togglePopoverVisibility","handleTextFieldChange","event","target","value","validate","isValidInput","current","checkValidity","onDateSelected","selectedDate","handleBlur","getBoundingClientRect","height","div","className","ref","type","onBlur","suffixOutside","onClick","size","icon","date","onSelected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,9 @@
-import { TextFieldProps } from "@simplybusiness/mobius";
-export interface DatePickerProps extends Omit<TextFieldProps, "defaultValue" | "onChange" | "onBlur" | "onFocus"> {
+import { TextFieldProps, Validation } from "@simplybusiness/mobius";
+export interface GetValidationStateProps {
+    validationState?: Validation["validationState"];
+    isInvalid?: Validation["isInvalid"];
+}
+export interface DatePickerProps extends Validation, Omit<TextFieldProps, "defaultValue" | "onChange" | "onBlur" | "onFocus"> {
     onChange?: (date: string | undefined) => void;
     defaultValue?: string;
     min?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius-datepicker",
   "license": "UNLICENSED",
-  "version": "4.3.32",
+  "version": "4.3.33",
   "description": "Mobius date picker component",
   "repository": {
     "type": "git",
@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@simplybusiness/icons": "^4.7.1",
-    "@simplybusiness/mobius": "^4.8.7",
+    "@simplybusiness/mobius": "^4.8.8",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "react-day-picker": "^8.10.1"

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -10,21 +10,13 @@ const meta: Meta<typeof DatePicker> = {
   title: "Forms/DatePicker",
   component: DatePicker,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     ...excludeControls(
       "description",
       "type",
       "labelElementType",
       "inputElementType",
       "isReadOnly",
+      "validationState",
     ),
   },
   args: {
@@ -84,7 +76,7 @@ export const Valid: StoryType = {
   render: (args: DatePickerProps) => <DatePicker {...args} />,
   args: {
     label: "Start date",
-    validationState: "valid",
+    isInvalid: false,
   },
 };
 
@@ -92,7 +84,7 @@ export const Invalid: StoryType = {
   render: (args: DatePickerProps) => <DatePicker {...args} />,
   args: {
     label: "Start date",
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "This is an error message",
   },
 };

package/src/components/DatePicker/DatePicker.test.tsx

@@ -79,7 +79,7 @@ describe("DatePicker", () => {
             <DatePicker
               defaultValue={exampleDate}
               label={labelText}
-              validationState="valid"
+              isInvalid={false}
             />,
           );
 
@@ -96,7 +96,7 @@ describe("DatePicker", () => {
             <DatePicker
               defaultValue={exampleDate}
               label={labelText}
-              validationState="invalid"
+              isInvalid
             />,
           );
 

package/src/components/DatePicker/DatePicker.tsx

@@ -6,7 +6,11 @@ import {
   TextFieldElementType,
   TextFieldProps,
   VisuallyHidden,
+  Validation,
+  useValidationClasses,
+  Icon,
 } from "@simplybusiness/mobius";
+import { calendarDay } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
 import {
   ChangeEvent,
@@ -22,11 +26,28 @@ import { formatErrorMessageText, validateDateFormat } from "./utils";
 
 const DatePickerModal = lazy(() => import("./DatePickerModal"));
 
+export interface GetValidationStateProps {
+  validationState?: Validation["validationState"];
+  isInvalid?: Validation["isInvalid"];
+}
+
+const getValidationState = (props: GetValidationStateProps) => {
+  const { validationState, isInvalid } = props;
+
+  if (isInvalid || validationState === "invalid") {
+    return true;
+  }
+
+  if (isInvalid === false || validationState === "valid") {
+    return false;
+  }
+
+  return undefined;
+};
+
 export interface DatePickerProps
-  extends Omit<
-    TextFieldProps,
-    "defaultValue" | "onChange" | "onBlur" | "onFocus"
-  > {
+  extends Validation,
+    Omit<TextFieldProps, "defaultValue" | "onChange" | "onBlur" | "onFocus"> {
   onChange?: (date: string | undefined) => void;
   defaultValue?: string;
   min?: string;
@@ -40,6 +61,7 @@ export const DatePicker = (props: DatePickerProps) => {
     defaultValue = "",
     isDisabled,
     validationState,
+    isInvalid,
     errorMessage = "",
     ...otherProps
   } = props;
@@ -50,28 +72,35 @@ export const DatePicker = (props: DatePickerProps) => {
   const [textFieldVal, setTextFieldVal] = useState<string>(
     validateDateFormat(defaultValue),
   );
-  const [isValid, setIsValid] = useState<boolean>(true);
-  const errorMessageText = !isValid
+  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
+  const isInvalidProp = getValidationState({
+    validationState,
+    isInvalid: isValid === false || isInvalid,
+  });
+  const errorMessageText = isInvalidProp
     ? // eslint-disable-next-line react/destructuring-assignment
       formatErrorMessageText(textFieldVal, props.min, props.max)
     : errorMessage;
-  const inputValidationState = !isValid ? "invalid" : validationState;
   const touchDevice = isTouchDevice();
 
-  const validationClasses = {
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid" || !isValid,
-  };
-
-  const containerClasses = classNames("mobius/DatePickerContainer", {
-    "--is-disabled": isDisabled,
-    "--is-touch-device": touchDevice,
-    ...validationClasses,
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid: isInvalidProp,
   });
 
-  const popoverToggleClasses = classNames("mobius/DateFieldButton", {
-    ...validationClasses,
-  });
+  const containerClasses = classNames(
+    "mobius/DatePickerContainer",
+    {
+      "--is-disabled": isDisabled,
+      "--is-touch-device": touchDevice,
+    },
+    validationClasses,
+  );
+
+  const popoverToggleClasses = classNames(
+    "mobius/DateFieldButton",
+    validationClasses,
+  );
 
   const togglePopoverVisibility = () => {
     setIsValid(true);
@@ -143,7 +172,7 @@ export const DatePicker = (props: DatePickerProps) => {
           onChange={handleTextFieldChange}
           value={textFieldVal}
           isDisabled={isDisabled}
-          validationState={inputValidationState}
+          isInvalid={isInvalidProp}
           {...otherProps}
           errorMessage={errorMessageText}
         />
@@ -162,7 +191,7 @@ export const DatePicker = (props: DatePickerProps) => {
         onChange={handleTextFieldChange}
         value={textFieldVal}
         isDisabled={isDisabled}
-        validationState={inputValidationState}
+        isInvalid={isInvalidProp}
         {...otherProps}
         errorMessage={errorMessageText}
         suffixOutside={
@@ -171,6 +200,7 @@ export const DatePicker = (props: DatePickerProps) => {
             onClick={togglePopoverVisibility}
             isDisabled={isDisabled}
           >
+            <Icon size="sm" icon={calendarDay} />
             <VisuallyHidden>Pick date</VisuallyHidden>
           </Button>
         }