From 6637ed53f507cc1e1664cd04850c9ed9032faa71 Mon Sep 17 00:00:00 2001 From: Jeremy Wiebe Date: Thu, 24 Oct 2024 14:16:00 -0700 Subject: [PATCH] Revert unwanted formatting changes --- .../src/components/dropdown-option.tsx | 459 +++++++++--------- 1 file changed, 231 insertions(+), 228 deletions(-) diff --git a/packages/perseus-editor/src/components/dropdown-option.tsx b/packages/perseus-editor/src/components/dropdown-option.tsx index d74c0502b9..693d3a43c1 100644 --- a/packages/perseus-editor/src/components/dropdown-option.tsx +++ b/packages/perseus-editor/src/components/dropdown-option.tsx @@ -5,48 +5,48 @@ * OptionGroup which is an internal component used in the dropdowns to house * a list of options. **/ -import { components, globalStyles } from "@khanacademy/perseus"; -import { css, StyleSheet } from "aphrodite"; +import {components, globalStyles} from "@khanacademy/perseus"; +import {css, StyleSheet} from "aphrodite"; import * as React from "react"; import ReactDOM from "react-dom"; -import { focusWithChromeStickyFocusBugWorkaround } from "./util"; +import {focusWithChromeStickyFocusBugWorkaround} from "./util"; -const { Icon } = components; -const { colors } = globalStyles; +const {Icon} = components; +const {colors} = globalStyles; const findAndFocusElement = (component?: Element | null) => { - const DOMNode: Element | Text | null | undefined = - ReactDOM.findDOMNode(component); - const button = DOMNode as HTMLInputElement; - // @ts-expect-error - TS2774 - This condition will always return true since this function is always defined. Did you mean to call it instead? - if (button.focus) { - focusWithChromeStickyFocusBugWorkaround(button); - } + const DOMNode: Element | Text | null | undefined = + ReactDOM.findDOMNode(component); + const button = DOMNode as HTMLInputElement; + // @ts-expect-error - TS2774 - This condition will always return true since this function is always defined. Did you mean to call it instead? + if (button.focus) { + focusWithChromeStickyFocusBugWorkaround(button); + } }; type Props = { - // The value to use when the option is selected - value: string; - // The display of the option - children?: React.ReactNode; - // Is the current option selected? - selected?: boolean; - // Is the current option disabled? - disabled?: boolean; - // An event when an option is clicked - onClick?: () => void; - // An optional function to call when the dropdown should close - // Only relevant if the Option is inside of a dropdown menu - onDropdownClose?: () => void; - // An optional value to override the focus styling of an option. - // Use caution when using this - keyboard users need to know what they're - // focused on in order to interact with the product! - hideFocusState?: boolean; - // An optional test id that can be used to identify this Option in automated tests. - testId?: string; - // Text to provide for assistive tech users - ariaLabel?: string; + // The value to use when the option is selected + value: string; + // The display of the option + children?: React.ReactNode; + // Is the current option selected? + selected?: boolean; + // Is the current option disabled? + disabled?: boolean; + // An event when an option is clicked + onClick?: () => void; + // An optional function to call when the dropdown should close + // Only relevant if the Option is inside of a dropdown menu + onDropdownClose?: () => void; + // An optional value to override the focus styling of an option. + // Use caution when using this - keyboard users need to know what they're + // focused on in order to interact with the product! + hideFocusState?: boolean; + // An optional test id that can be used to identify this Option in automated tests. + testId?: string; + // Text to provide for assistive tech users + ariaLabel?: string; }; const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10 @@ -58,89 +58,92 @@ const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10 const optionHeight = 30; class Option extends React.Component { - // @ts-expect-error - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor. - node: HTMLDivElement; + // @ts-expect-error - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor. + node: HTMLDivElement; - handleKeyDown(event: any): void { - const { onDropdownClose } = this.props; - const pressedKey = event.key; - const focusedElement = event.target; + handleKeyDown(event: any): void { + const {onDropdownClose} = this.props; + const pressedKey = event.key; + const focusedElement = event.target; - if (pressedKey === "ArrowDown" && focusedElement.nextSibling) { - event.preventDefault(); - focusedElement.nextSibling.focus(); - } - if (pressedKey === "ArrowUp" && focusedElement.previousSibling) { - event.preventDefault(); - focusedElement.previousSibling.focus(); - } - if ( - pressedKey === "ArrowUp" && - !focusedElement.previousSibling && - onDropdownClose - ) { - event.preventDefault(); - onDropdownClose(); - } - if ((pressedKey === "Escape" || pressedKey === "Tab") && onDropdownClose) { - onDropdownClose(); - } - } + if (pressedKey === "ArrowDown" && focusedElement.nextSibling) { + event.preventDefault(); + focusedElement.nextSibling.focus(); + } + if (pressedKey === "ArrowUp" && focusedElement.previousSibling) { + event.preventDefault(); + focusedElement.previousSibling.focus(); + } + if ( + pressedKey === "ArrowUp" && + !focusedElement.previousSibling && + onDropdownClose + ) { + event.preventDefault(); + onDropdownClose(); + } + if ( + (pressedKey === "Escape" || pressedKey === "Tab") && + onDropdownClose + ) { + onDropdownClose(); + } + } - render(): React.ReactNode { - const { - selected, - value, - onClick, - children, - disabled, - hideFocusState, - testId, - ariaLabel, - } = this.props; + render(): React.ReactNode { + const { + selected, + value, + onClick, + children, + disabled, + hideFocusState, + testId, + ariaLabel, + } = this.props; - return ( - - ); - } + return ( + + ); + } } // TODO(kevinb): @@ -148,132 +151,132 @@ class Option extends React.Component { // - do we really want to dismiss this on scroll // - how does the drop down interact with tooltips? what's the z-index order? class OptionGroup extends React.Component<{ - // An event when an option is selected - onSelected: (value: string) => void; - // The list of options to display - children?: Array>>; - // The currently selected options - selectedValues: Array; - // An override to skip the bit of top/bottom spacing around the group - noMargin?: boolean; - // An optional function to call when the dropdown should close - onDropdownClose?: () => void; - // An optional value to override the focus styling of an option. - // Use caution when using this - keyboard users need to know what - // they're focused on in order to interact with the product! - hideFocusState?: boolean; + // An event when an option is selected + onSelected: (value: string) => void; + // The list of options to display + children?: Array>>; + // The currently selected options + selectedValues: Array; + // An override to skip the bit of top/bottom spacing around the group + noMargin?: boolean; + // An optional function to call when the dropdown should close + onDropdownClose?: () => void; + // An optional value to override the focus styling of an option. + // Use caution when using this - keyboard users need to know what + // they're focused on in order to interact with the product! + hideFocusState?: boolean; }> { - // @ts-expect-error - TS2564 - Property 'focusedElement' has no initializer and is not definitely assigned in the constructor. - focusedElement: Element; + // @ts-expect-error - TS2564 - Property 'focusedElement' has no initializer and is not definitely assigned in the constructor. + focusedElement: Element; - componentDidMount() { - if (this.focusedElement) { - findAndFocusElement(this.focusedElement); - } - } + componentDidMount() { + if (this.focusedElement) { + findAndFocusElement(this.focusedElement); + } + } - render(): React.ReactNode { - const { - children, - onSelected, - selectedValues, - noMargin, - onDropdownClose, - hideFocusState, - } = this.props; + render(): React.ReactNode { + const { + children, + onSelected, + selectedValues, + noMargin, + onDropdownClose, + hideFocusState, + } = this.props; - return ( -
| undefined'. - style={{ top }} - className={css( - styles.optionGroup, - noMargin && styles.optionGroupNoMargin, - )} - > - {React.Children.map(children, (child, index) => { - // @ts-expect-error - TS2532 - Object is possibly 'undefined'. - const selected = selectedValues.includes(child.props.value); + return ( +
| undefined'. + style={{top}} + className={css( + styles.optionGroup, + noMargin && styles.optionGroupNoMargin, + )} + > + {React.Children.map(children, (child, index) => { + // @ts-expect-error - TS2532 - Object is possibly 'undefined'. + const selected = selectedValues.includes(child.props.value); - const reference = - selected || index === 0 - ? (node: Element) => (this.focusedElement = node) - : null; + const reference = + selected || index === 0 + ? (node: Element) => (this.focusedElement = node) + : null; - // @ts-expect-error - TS2769 - No overload matches this call. - return React.cloneElement(child, { - // @ts-expect-error - TS2532 - Object is possibly 'undefined'. - ...child.props, - key: index, - selected: selected, - // @ts-expect-error - TS2532 - Object is possibly 'undefined'. - onClick: () => onSelected(child.props.value), - ref: reference, - onDropdownClose: onDropdownClose, - hideFocusState: hideFocusState, - }); - })} -
- ); - } + // @ts-expect-error - TS2769 - No overload matches this call. + return React.cloneElement(child, { + // @ts-expect-error - TS2532 - Object is possibly 'undefined'. + ...child.props, + key: index, + selected: selected, + // @ts-expect-error - TS2532 - Object is possibly 'undefined'. + onClick: () => onSelected(child.props.value), + ref: reference, + onDropdownClose: onDropdownClose, + hideFocusState: hideFocusState, + }); + })} +
+ ); + } } const styles = StyleSheet.create({ - optionGroup: { - margin: "4px 0", - }, - optionGroupNoMargin: { - margin: 0, - }, - option: { - display: "flex", - flexDirection: "row", - alignItems: "center", - paddingLeft: 32, - paddingRight: 32, - height: optionHeight, - whiteSpace: "nowrap", - overflow: "hidden", - textOverflow: "ellipsis", - color: colors.gray17, - userSelect: "none", + optionGroup: { + margin: "4px 0", + }, + optionGroupNoMargin: { + margin: 0, + }, + option: { + display: "flex", + flexDirection: "row", + alignItems: "center", + paddingLeft: 32, + paddingRight: 32, + height: optionHeight, + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + color: colors.gray17, + userSelect: "none", - ":hover": { - backgroundColor: colors.gray95, - }, - }, - optionSelected: { - backgroundColor: colors.gray95, - color: "#11ACCD", - }, - optionDisabled: { - color: colors.gray76, - ":hover": { - backgroundColor: "transparent", - }, - }, - check: { - position: "absolute", - left: 11, - }, - notAButton: { - backgroundColor: "transparent", - border: "none", - display: "block", - padding: 0, - margin: 0, - width: "100%", - //