@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/components/ChangeHandlingForm.tsx

@@ -0,0 +1,54 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Form, useFormikContext } from 'formik'
+import React, { MutableRefObject, PropsWithChildren, useEffect } from 'react'
+import styled from 'styled-components'
+
+export interface ChangeHandlingFormProps<Values>
+  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange'> {
+  onChange: (values: Values) => void
+  id?: string
+  formRef?: MutableRefObject<HTMLFormElement | null>
+}
+
+export const ChangeHandlingForm = <Values,>(
+  props: PropsWithChildren<ChangeHandlingFormProps<Values>>
+) => {
+  const { values } = useFormikContext<Values>()
+  const { onChange, id, formRef, children, ...formProps } = props
+
+  useEffect(() => {
+    // you might modify this to fit your use case
+    // like adding a `const prevValues = usePrevious(values)` above and checking for equality
+    // or debounce this whole function but make sure not to use stale values
+    onChange?.(values)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onChange, values])
+
+  return (
+    <FlexForm id={id} ref={formRef} {...formProps}>
+      {children}
+    </FlexForm>
+  )
+}
+
+export const FlexForm = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+`

package/src/components/LanguageDropdown/index.tsx

@@ -0,0 +1,343 @@
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  DropdownContainer,
+  DropdownList,
+  TickIcon,
+  TriangleCollapsedIcon,
+} from '@manuscripts/style-guide'
+import React, { useEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
+
+import { getLanguage, getLanguageLabel, Language } from '../../lib/languages'
+
+interface LanguageDropdownProps {
+  onLanguageSelect: (languageCode: string) => void
+  onClose?: () => void
+  currentLanguage?: string
+  showButton?: boolean
+  buttonLabel?: string
+  selectedLanguageDisplay?: string
+  onCloseParent?: () => void
+  languages: Language[]
+  menuItemRef?: (el: HTMLDivElement | null) => void
+}
+
+const LanguageOptionItem: React.FC<{
+  language: Language
+  isSelected: boolean
+  onSelect: (
+    event: React.MouseEvent | React.KeyboardEvent,
+    languageCode: string
+  ) => void
+}> = ({ language, isSelected, onSelect }) => {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      onSelect(event, language.code)
+    }
+  }
+
+  return (
+    <StyledLanguageOption
+      key={language.code}
+      onClick={(event) => onSelect(event, language.code)}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="submenuitem"
+    >
+      {language.name}
+      {language.nativeName && ` (${language.nativeName})`}
+      {isSelected && (
+        <TickIconWrapper>
+          <TickIcon />
+        </TickIconWrapper>
+      )}
+    </StyledLanguageOption>
+  )
+}
+
+const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
+  onLanguageSelect,
+  onClose,
+  currentLanguage = 'en',
+  showButton = false,
+  selectedLanguageDisplay,
+  onCloseParent,
+  languages,
+  menuItemRef,
+}) => {
+  const [isOpen, setIsOpen] = useState(!showButton)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const dropdownMenuRef = useRef<HTMLDivElement>(null)
+  const languageButtonRef = useRef<HTMLDivElement | null>(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Element)
+      ) {
+        setIsOpen(false)
+        onClose?.()
+        onCloseParent?.()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen, onClose, onCloseParent])
+
+  // Focus first option when dropdown opens
+  useEffect(() => {
+    if (isOpen && dropdownMenuRef.current) {
+      const firstOption = dropdownMenuRef.current.querySelector<HTMLElement>(
+        '[role="submenuitem"]'
+      )
+      firstOption?.focus()
+    }
+  }, [isOpen])
+
+  const toggleDropdown = (event: React.MouseEvent | React.KeyboardEvent) => {
+    event.stopPropagation()
+    setIsOpen(!isOpen)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === 'ArrowRight') {
+      event.preventDefault()
+      toggleDropdown(event)
+    }
+  }
+
+  const handleMenuKeyDown = (event: React.KeyboardEvent) => {
+    if (!dropdownMenuRef.current) return
+
+    const menuItems = Array.from(
+      dropdownMenuRef.current.querySelectorAll<HTMLElement>(
+        '[role="submenuitem"]'
+      )
+    )
+
+    if (menuItems.length === 0) return
+
+    const currentIndex = menuItems.findIndex(
+      (item) => item === document.activeElement
+    )
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      const nextIndex = (currentIndex + 1) % menuItems.length
+      menuItems[nextIndex]?.focus()
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      const prevIndex =
+        currentIndex <= 0 ? menuItems.length - 1 : currentIndex - 1
+      menuItems[prevIndex]?.focus()
+    } else if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      setIsOpen(false)
+      setTimeout(() => languageButtonRef.current?.focus(), 0)
+    }
+  }
+
+  const handleSelect = (
+    event: React.MouseEvent | React.KeyboardEvent,
+    languageCode: string
+  ) => {
+    event.stopPropagation()
+    onLanguageSelect(languageCode)
+  }
+
+  const getDisplayName = (languageCode: string) => {
+    const lang = getLanguage(languageCode, languages)
+    return getLanguageLabel(lang)
+  }
+
+  return (
+    <DropdownContainer ref={dropdownRef}>
+      {showButton && (
+        <LanguageButton
+          ref={(el) => {
+            languageButtonRef.current = el
+            menuItemRef?.(el)
+          }}
+          onClick={toggleDropdown}
+          onKeyDown={handleKeyDown}
+          tabIndex={0}
+          role="menuitem"
+        >
+          <ButtonContent>
+            <ButtonLabel>
+              Document language <TriangleCollapsedIcon />
+            </ButtonLabel>
+            <SelectedLanguage>
+              {selectedLanguageDisplay || getDisplayName(currentLanguage)}
+            </SelectedLanguage>
+          </ButtonContent>
+        </LanguageButton>
+      )}
+
+      {isOpen && (
+        <DropdownMenu
+          ref={dropdownMenuRef}
+          direction="right"
+          width={231}
+          height={400}
+          top={18}
+          onKeyDown={handleMenuKeyDown}
+          role="menu"
+        >
+          {!showButton && <DropdownTitle>Choose language</DropdownTitle>}
+          {languages.map((language) => (
+            <LanguageOptionItem
+              key={language.code}
+              language={language}
+              isSelected={currentLanguage === language.code}
+              onSelect={handleSelect}
+            />
+          ))}
+        </DropdownMenu>
+      )}
+    </DropdownContainer>
+  )
+}
+
+const StyledDropdownList = styled(DropdownList)`
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 8px;
+
+  /* Custom scrollbar styling */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${(props) => props.theme.colors.background.secondary};
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #6e6e6e;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #6e6e6e;
+  }
+`
+
+const LanguageButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: ${(props) => props.theme.font.family.Lato};
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${(props) => props.theme.colors.text.primary};
+  padding: 10px 16px;
+  width: 100%;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+`
+
+const ButtonContent = styled.span`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+const ButtonLabel = styled.span`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+
+  svg {
+    top: 10px;
+    right: -10px;
+    position: relative;
+  }
+`
+
+const SelectedLanguage = styled.span`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-top: 2px;
+`
+
+const DropdownMenu = styled(StyledDropdownList)`
+  // Inherits all styles from StyledDropdownList
+`
+
+const DropdownTitle = styled.div`
+  font-family: 'PT Sans', sans-serif;
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 32px;
+  color: #c9c9c9;
+  padding: 12px 16px 8px 16px;
+  border-bottom: 1px solid #c9c9c9;
+  margin-bottom: 4px;
+`
+
+const TickIconWrapper = styled.div`
+  svg path {
+    fill: #6e6e6e;
+  }
+`
+
+const StyledLanguageOption = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: ${(props) => props.theme.font.family.Lato};
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${(props) => props.theme.colors.text.primary};
+  padding: 10px 16px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f2fbfc;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+`
+
+export default LanguageDropdown

package/src/components/affiliations/AffiliationForm.tsx

@@ -0,0 +1,238 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  FormGroup,
+  FormRow,
+  InputErrorText,
+  RequiredIndicator,
+  SelectField,
+  TextField,
+} from '@manuscripts/style-guide'
+import {
+  Field,
+  FieldProps,
+  FormikErrors,
+  FormikProps,
+  FormikProvider,
+  getIn,
+  useFormik,
+} from 'formik'
+import React, { MutableRefObject, useEffect } from 'react'
+import styled from 'styled-components'
+
+import { COUNTRY_SELECT_OPTIONS } from '@manuscripts/style-guide'
+import { AffiliationAttrs } from '../../lib/authors'
+import { normalizeAffiliation } from '../../lib/normalize'
+import { ChangeHandlingForm } from '../ChangeHandlingForm'
+import { UnsavedLabel } from '../form/UnsavedLabel'
+import { isInstitutionError } from '../hooks/useAffiliationShowsErrorIndicator'
+
+function isAffiliationFieldChanged(
+  formik: FormikProps<AffiliationAttrs>,
+  key: keyof AffiliationAttrs | string
+) {
+  const v = normalizeAffiliation(formik.values)
+  const i = normalizeAffiliation(formik.initialValues)
+  return getIn(v, key) !== getIn(i, key)
+}
+
+export { affiliationShowsErrorIndicator } from '../hooks/useAffiliationShowsErrorIndicator'
+
+export interface FormActions {
+  reset: () => void
+  submitForm: () => Promise<void> | void
+}
+
+export interface AffiliationFormProps {
+  values: AffiliationAttrs
+  onSave: (values: AffiliationAttrs) => void
+  onChange: (values: AffiliationAttrs) => void
+  actionsRef?: MutableRefObject<FormActions | undefined>
+  newEntity?: boolean
+  onAffiliationErrorChange?: (hasError: boolean) => void
+  unsavedContinueActive?: boolean
+}
+
+export const AffiliationForm: React.FC<AffiliationFormProps> = ({
+  values,
+  onSave,
+  onChange,
+  actionsRef,
+  newEntity = false,
+  onAffiliationErrorChange,
+  unsavedContinueActive = false,
+}) => {
+  const validateAffiliation = (vals: AffiliationAttrs) => {
+    const errors: FormikErrors<AffiliationAttrs> = {}
+    if (!vals.institution?.trim()) {
+      errors.institution = 'Institution Name is required'
+    }
+    return errors
+  }
+
+  const formik = useFormik<AffiliationAttrs>({
+    initialValues: values,
+    onSubmit: (attrs) => onSave(attrs),
+    enableReinitialize: true,
+    validate: validateAffiliation,
+    validateOnChange: true,
+  })
+
+  if (actionsRef) {
+    actionsRef.current = {
+      reset: () => formik.resetForm(),
+      submitForm: () => formik.submitForm(),
+    }
+  }
+
+  const showInstitutionError = isInstitutionError(formik, newEntity)
+
+  useEffect(() => {
+    onAffiliationErrorChange?.(showInstitutionError)
+  }, [showInstitutionError, onAffiliationErrorChange])
+
+  const showUnsavedDot = (key: keyof AffiliationAttrs | string) =>
+    unsavedContinueActive && isAffiliationFieldChanged(formik, key)
+
+  return (
+    <FormikProvider value={formik}>
+      <ChangeHandlingForm onChange={onChange} id="affiliation-form" noValidate>
+        <FormRow>
+          <Field name="institution">
+            {(props: FieldProps) => (
+              <>
+                <UnsavedLabel
+                  htmlFor="institution"
+                  showDot={showUnsavedDot('institution')}
+                >
+                  Institution Name
+                  <RequiredIndicator>*</RequiredIndicator>
+                </UnsavedLabel>
+                <TextField
+                  id="institution"
+                  {...props.field}
+                  error={showInstitutionError}
+                />
+                {showInstitutionError && (
+                  <InputErrorText>
+                    {formik.errors.institution as string}
+                  </InputErrorText>
+                )}
+              </>
+            )}
+          </Field>
+        </FormRow>
+        <FormRow>
+          <Field name="department" type="textarea">
+            {(props: FieldProps) => (
+              <>
+                <UnsavedLabel
+                  htmlFor="department"
+                  showDot={showUnsavedDot('department')}
+                >
+                  Department
+                </UnsavedLabel>
+                <TextField id="department" {...props.field} />
+              </>
+            )}
+          </Field>
+        </FormRow>
+        <FormRow>
+          <Field name="addressLine1">
+            {(props: FieldProps) => (
+              <>
+                <UnsavedLabel
+                  htmlFor="addressLine1"
+                  showDot={showUnsavedDot('addressLine1')}
+                >
+                  Street Address
+                </UnsavedLabel>
+                <TextField id="addressLine1" {...props.field} />
+              </>
+            )}
+          </Field>
+        </FormRow>
+        <StyledFormGroup>
+          <FormRow>
+            <UnsavedLabel htmlFor="country" showDot={showUnsavedDot('country')}>
+              Country
+            </UnsavedLabel>
+            <Field
+              id="country"
+              name="country"
+              component={SelectField}
+              options={COUNTRY_SELECT_OPTIONS}
+              isSearchable={true}
+              variant="large"
+              listMaxHeight="140px"
+            />
+          </FormRow>
+          <FormRow>
+            <Field name="city">
+              {(props: FieldProps) => (
+                <>
+                  <UnsavedLabel htmlFor="city" showDot={showUnsavedDot('city')}>
+                    City
+                  </UnsavedLabel>
+                  <TextField id="city" {...props.field} />
+                </>
+              )}
+            </Field>
+          </FormRow>
+        </StyledFormGroup>
+        <StyledFormGroup>
+          <FormRow>
+            <Field name="county">
+              {(props: FieldProps) => (
+                <>
+                  <UnsavedLabel
+                    htmlFor="county"
+                    showDot={showUnsavedDot('county')}
+                  >
+                    State / Province
+                  </UnsavedLabel>
+                  <TextField id="county" {...props.field} />
+                </>
+              )}
+            </Field>
+          </FormRow>
+          <FormRow>
+            <Field name="postCode">
+              {(props: FieldProps) => (
+                <>
+                  <UnsavedLabel
+                    htmlFor="postCode"
+                    showDot={showUnsavedDot('postCode')}
+                  >
+                    Postal Code
+                  </UnsavedLabel>
+                  <TextField id="postCode" {...props.field} />
+                </>
+              )}
+            </Field>
+          </FormRow>
+        </StyledFormGroup>
+      </ChangeHandlingForm>
+    </FormikProvider>
+  )
+}
+
+const StyledFormGroup = styled(FormGroup)`
+  > div {
+    flex: 1;
+    min-width: 0;
+  }
+`