From 931207da3dac008b4bc67bccea78f187f8a9a66c Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Thu, 27 Oct 2022 19:33:47 +0100
Subject: [PATCH 1/4] feat: add read only time picker

---
 .../__snapshots__/PublicAPI-test.js.snap      |  3 +
 .../components/TimePicker/TimePicker-test.js  | 48 ++++++++++++++-
 .../src/components/TimePicker/TimePicker.js   | 59 +++++++++++++++++--
 .../components/time-picker/_time-picker.scss  | 14 +++++
 4 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 95e718146d54..78025d0890dc 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8312,6 +8312,9 @@ Map {
       "placeholder": Object {
         "type": "string",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "size": Object {
         "args": Array [
           Array [
diff --git a/packages/react/src/components/TimePicker/TimePicker-test.js b/packages/react/src/components/TimePicker/TimePicker-test.js
index 7aec125bb018..49352eb953b2 100644
--- a/packages/react/src/components/TimePicker/TimePicker-test.js
+++ b/packages/react/src/components/TimePicker/TimePicker-test.js
@@ -7,7 +7,8 @@
 
 import React from 'react';
 import { default as TimePicker } from './TimePicker';
-
+import SelectItem from '../../SelectItem';
+import TimePickerSelect from '../../TimePickerSelect/next/TimePickerSelect.js';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -40,6 +41,51 @@ describe('TimePicker', () => {
       expect(onClick).not.toHaveBeenCalled();
     });
 
+    it('should behave readonly as expected', () => {
+      const onClick = jest.fn();
+      const onChange = jest.fn();
+
+      render(
+        <TimePicker
+          id="time-picker"
+          onClick={onClick}
+          onChange={onChange}
+          readOnly={true}>
+          <TimePickerSelect id="time-picker-select-1">
+            <SelectItem value="AM" text="AM" />
+            <SelectItem value="PM" text="PM" />
+          </TimePickerSelect>
+          <TimePickerSelect id="time-picker-select-2">
+            <SelectItem value="Time zone 1" text="Time zone 1" />
+            <SelectItem value="Time zone 2" text="Time zone 2" />
+          </TimePickerSelect>
+        </TimePicker>
+      );
+
+      const input = screen.getByRole('textbox');
+      userEvent.click(input);
+      expect(onClick).toHaveBeenCalled();
+      expect(input).toHaveAttribute('readonly');
+
+      userEvent.type(input, '01:50');
+      expect(onChange).not.toHaveBeenCalled();
+
+      screen.getByDisplayValue('AM');
+      screen.getByDisplayValue('Time zone 1');
+
+      //------------------------------------------------------------------------
+      // Testing library - userEvent.type() does not work on <select> elements
+      // and using selectOption causes the value to change.
+      // Ideally we'd use userEvent.type(theSelect, '{arrowdown}{enter}') to test the readOnly prop
+      // or have a way to click on a slotted option.
+      // https://github.com/testing-library/user-event/issues/786
+      //------------------------------------------------------------------------
+      // userEvent.selectOptions(theSelect, 'option-1'); // unfortunately this bypasses the readOnly prop
+
+      // Change events should *not* fire
+      // expect(screen.getByText('Option 1').selected).toBe(false);
+    });
+
     it('should set placeholder as expected', () => {
       render(<TimePicker id="time-picker" placeholder="🧸" />);
       expect(screen.getByPlaceholderText('🧸')).toBeInTheDocument();
diff --git a/packages/react/src/components/TimePicker/TimePicker.js b/packages/react/src/components/TimePicker/TimePicker.js
index 9d71c96ce3cc..79402da0517f 100644
--- a/packages/react/src/components/TimePicker/TimePicker.js
+++ b/packages/react/src/components/TimePicker/TimePicker.js
@@ -8,8 +8,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix';
-import deprecate from '../../prop-types/deprecate';
+import { usePrefix } from '../../../internal/usePrefix';
+import deprecate from '../../../prop-types/deprecate';
 
 const TimePicker = React.forwardRef(function TimePicker(
   {
@@ -28,6 +28,7 @@ const TimePicker = React.forwardRef(function TimePicker(
     onBlur = () => {},
     pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?',
     placeholder = 'hh:mm',
+    readOnly,
     size = 'md',
     type = 'text',
     value,
@@ -47,13 +48,15 @@ const TimePicker = React.forwardRef(function TimePicker(
 
   function handleOnClick(evt) {
     if (!disabled) {
-      setValue(isValue);
+      if (!readOnly) {
+        setValue(isValue);
+      }
       onClick(evt);
     }
   }
 
   function handleOnChange(evt) {
-    if (!disabled) {
+    if (!disabled && !readOnly) {
       setValue(isValue);
       onChange(evt);
     }
@@ -61,7 +64,9 @@ const TimePicker = React.forwardRef(function TimePicker(
 
   function handleOnBlur(evt) {
     if (!disabled) {
-      setValue(isValue);
+      if (!readOnly) {
+        setValue(isValue);
+      }
       onBlur(evt);
     }
   }
@@ -79,6 +84,7 @@ const TimePicker = React.forwardRef(function TimePicker(
     [`${prefix}--time-picker`]: true,
     [`${prefix}--time-picker--light`]: light,
     [`${prefix}--time-picker--invalid`]: invalid,
+    [`${prefix}--time-picker--readonly`]: readOnly,
     [`${prefix}--time-picker--${size}`]: size,
     [className]: className,
   });
@@ -98,6 +104,41 @@ const TimePicker = React.forwardRef(function TimePicker(
     <div className={`${prefix}--form-requirement`}>{invalidText}</div>
   ) : null;
 
+  function getInternalPickerSelects() {
+    const readOnlyEventHandlers = {
+      onMouseDown: (evt) => {
+        // NOTE: does not prevent click
+        if (readOnly) {
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
+          evt.target.focus();
+        }
+      },
+      onKeyDown: (evt) => {
+        const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' '];
+        // This prevents the select from opening for the above keys
+        if (readOnly && selectAccessKeys.includes(evt.key)) {
+          evt.preventDefault();
+        }
+      },
+    };
+
+    const mappedChildren = React.Children.map(children, (pickerSelect) => {
+      return React.cloneElement(pickerSelect, {
+        ...pickerSelect.props,
+        disabled: disabled,
+        readOnly: readOnly,
+        ...readOnlyEventHandlers,
+      });
+    });
+
+    return mappedChildren;
+  }
+
+  const readOnlyProps = {
+    readOnly: readOnly,
+  };
+
   return (
     <div className={cx(`${prefix}--form-item`, className)}>
       {label}
@@ -118,9 +159,10 @@ const TimePicker = React.forwardRef(function TimePicker(
             type={type}
             value={value}
             {...rest}
+            {...readOnlyProps}
           />
         </div>
-        {children}
+        {getInternalPickerSelects()}
       </div>
       {error}
     </div>
@@ -210,6 +252,11 @@ TimePicker.propTypes = {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Specify whether the TimePicker should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the size of the Time Picker.
    */
diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss
index 7f57be067669..30e87c857a03 100644
--- a/packages/styles/scss/components/time-picker/_time-picker.scss
+++ b/packages/styles/scss/components/time-picker/_time-picker.scss
@@ -88,4 +88,18 @@
     height: rem(48px);
     max-height: rem(48px);
   }
+
+  // readonly
+  $icon-readonly: $icon-disabled;
+
+  .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field,
+  .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--time-picker--readonly
+    .#{$prefix}--select-input
+    + .#{$prefix}--select__arrow {
+    fill: $icon-readonly;
+  }
 }

From 640e4bd33dab57db212b417958198b7d38e56826 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 1 Nov 2022 10:41:48 +0000
Subject: [PATCH 2/4] chore: remove unnecessary scss vars

---
 packages/styles/scss/components/time-picker/_time-picker.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss
index 30e87c857a03..0ab8db4f92f4 100644
--- a/packages/styles/scss/components/time-picker/_time-picker.scss
+++ b/packages/styles/scss/components/time-picker/_time-picker.scss
@@ -90,8 +90,6 @@
   }
 
   // readonly
-  $icon-readonly: $icon-disabled;
-
   .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field,
   .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
     background-color: transparent;
@@ -100,6 +98,6 @@
   .#{$prefix}--time-picker--readonly
     .#{$prefix}--select-input
     + .#{$prefix}--select__arrow {
-    fill: $icon-readonly;
+    fill: $icon-disabled;
   }
 }

From 96fbafbb8023e6d4e50ccc57eb689ba273d36632 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Mon, 7 Nov 2022 11:21:54 +0000
Subject: [PATCH 3/4] fix: cursor following review

---
 packages/react/src/components/TimePicker/TimePicker.js      | 4 ++--
 .../styles/scss/components/time-picker/_time-picker.scss    | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/TimePicker/TimePicker.js b/packages/react/src/components/TimePicker/TimePicker.js
index 79402da0517f..59dcfcbc8fb6 100644
--- a/packages/react/src/components/TimePicker/TimePicker.js
+++ b/packages/react/src/components/TimePicker/TimePicker.js
@@ -8,8 +8,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { usePrefix } from '../../../internal/usePrefix';
-import deprecate from '../../../prop-types/deprecate';
+import { usePrefix } from '../../internal/usePrefix';
+import deprecate from '../../prop-types/deprecate';
 
 const TimePicker = React.forwardRef(function TimePicker(
   {
diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss
index 0ab8db4f92f4..994f948eea07 100644
--- a/packages/styles/scss/components/time-picker/_time-picker.scss
+++ b/packages/styles/scss/components/time-picker/_time-picker.scss
@@ -90,9 +90,13 @@
   }
 
   // readonly
-  .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field,
+  .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field {
+    background-color: transparent;
+  }
+
   .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
     background-color: transparent;
+    cursor: default;
   }
 
   .#{$prefix}--time-picker--readonly

From cb8d55caf7ccf38408dc7078944d898b0cc80f2a Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 14 Nov 2022 15:35:33 -0500
Subject: [PATCH 4/4] fix(path): change path

---
 packages/react/src/components/TimePicker/TimePicker-test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/TimePicker/TimePicker-test.js b/packages/react/src/components/TimePicker/TimePicker-test.js
index 49352eb953b2..59ca5f2e899b 100644
--- a/packages/react/src/components/TimePicker/TimePicker-test.js
+++ b/packages/react/src/components/TimePicker/TimePicker-test.js
@@ -7,8 +7,8 @@
 
 import React from 'react';
 import { default as TimePicker } from './TimePicker';
-import SelectItem from '../../SelectItem';
-import TimePickerSelect from '../../TimePickerSelect/next/TimePickerSelect.js';
+import SelectItem from '../SelectItem';
+import TimePickerSelect from '../TimePickerSelect/next/TimePickerSelect.js';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';