@ndla/ui 28.0.0 → 29.0.0

package/src/TagSelector/TagSelector.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2022-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
@@ -6,107 +6,128 @@
  *
  */
 
-import React, { useState, useRef, useEffect, ChangeEvent } from 'react';
+import React, { KeyboardEvent, useMemo, useState } from 'react';
+import CreatableSelect from 'react-select/creatable';
+import { MultiValue, StylesConfig } from 'react-select';
 import styled from '@emotion/styled';
-import { spacingUnit, fonts } from '@ndla/core';
-import { uuid } from '@ndla/util';
-import SuggestionInput from './SuggestionInput';
+import { colors, fonts, spacing, utils } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
+import { TagType } from './types';
+import ValueButton from './ValueButton';
+import DropdownIndicator from './DropdownIndicator';
+import SelectContainer from './SelectContainer';
+import MenuList from './MenuList';
+import Control from './Control';
+import Option from './Option';
+import Menu from './Menu';
+import { createAriaMessages } from './ariaMessages';
+import Input from './Input';
 
-const DEFAULT_DROPDOWN_MAXHEIGHT = '240px';
+const styles: StylesConfig<TagType, true> = {
+  menu: () => ({}),
+  dropdownIndicator: () => ({}),
+  placeholder: (provided) => ({
+    ...provided,
+    padding: `0 ${spacing.small}`,
+    color: colors.brand.primary,
+    margin: 0,
+  }),
+  valueContainer: (provided) => ({ ...provided, padding: 0 }),
+  indicatorSeparator: () => ({
+    display: 'none',
+  }),
+  indicatorsContainer: (provided) => ({
+    ...provided,
+    alignSelf: 'flex-end',
+  }),
+};
 
-const StyledLabel = styled.label`
-  font-weight: ${fonts.weight.semibold};
+const StyledTagSelector = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 `;
 
-export interface TagType {
-  name: string;
-  id: string;
+interface StyledLabelProps {
+  labelHidden?: boolean;
 }
 
+const StyledLabel = styled.label<StyledLabelProps>`
+  font-weight: ${fonts.weight.semibold};
+  ${(p) => p.labelHidden && utils.labelHidden}
+`;
+
 interface Props {
   label: string;
-  tags: TagType[];
-  tagsSelected: string[];
-  onToggleTag: (id: string) => void;
-  onCreateTag: (tagName: string) => void;
-  inline?: boolean;
-  prefix?: string;
+  tags: string[];
+  selected: string[];
+  onChange: (tags: string[]) => void;
+  onCreateTag: (name: string) => void;
+  className?: string;
+  labelHidden?: boolean;
 }
 
-const sortedTags = (tags: TagType[], selectedTags: string[]): TagType[] => {
-  const returnTags = selectedTags
-    .map((selectedId) => tags.find(({ id }) => selectedId === id))
-    .filter((notUndefined) => notUndefined) as unknown as TagType[];
-  return returnTags;
-};
+const TagSelector = ({ selected: _selected, tags: _tags, onChange, onCreateTag, className, label }: Props) => {
+  const { t } = useTranslation();
+  const [input, setInput] = useState('');
+  const tags = useMemo(() => _tags.map((tag) => ({ value: tag, label: tag })), [_tags]);
+  const selected = useMemo(() => _selected.map((tag) => ({ value: tag, label: tag })), [_selected]);
 
-const getSuggestions = (tags: TagType[], inputValue: string): TagType[] => {
-  if (inputValue === '') {
-    return [];
-  }
-  const inputLowercase = inputValue.toLowerCase();
-  return tags
-    .filter(({ name }) => name.toLowerCase().startsWith(inputLowercase))
-    .sort((a, b) => a.name.localeCompare(b.name, 'nb'));
-};
-
-const TagSelector = ({ label, tags, tagsSelected, onCreateTag, onToggleTag, inline, prefix }: Props) => {
-  const [inputValue, setInputValue] = useState('');
-  const [expanded, setExpanded] = useState(false);
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useState(DEFAULT_DROPDOWN_MAXHEIGHT);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputIdRef = useRef<string>(uuid());
-
-  useEffect(() => {
-    setExpanded(false);
-  }, [tagsSelected]);
-
-  useEffect(() => {
-    const setMaxDropdownMaxHeight = () => {
-      if (!inline && containerRef.current && typeof window !== 'undefined') {
-        // Calculate distance from bottom of container to bottom of viewport
-        const containerBottom = containerRef.current.getBoundingClientRect().bottom;
-        const viewportBottom = document.documentElement.scrollHeight;
-        const maxDropdownHeight = viewportBottom - containerBottom;
-        setDropdownMaxHeight(`${maxDropdownHeight - spacingUnit}px`);
-      }
-    };
-    if (!inline && typeof window !== 'undefined') {
-      if (expanded) {
-        setMaxDropdownMaxHeight();
-        window.addEventListener('resize', setMaxDropdownMaxHeight);
-      } else {
-        window.removeEventListener('resize', setMaxDropdownMaxHeight);
+  const handleSpaceClick = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === ' ') {
+      e.preventDefault();
+      if (!_selected.find((tag) => tag === input) && input !== '') {
+        onChange(_selected.concat(input));
       }
+      setInput('');
     }
-    return () => {
-      typeof window !== 'undefined' && window.removeEventListener('resize', setMaxDropdownMaxHeight);
-    };
-  }, [expanded, inline]);
+  };
+
+  const handleChange = (tags: MultiValue<TagType>) => {
+    onChange(tags.map((tag) => tag.value));
+  };
+
+  const createLabel = (tag: string) => t('tagSelector.createLabel', { tag });
 
   return (
-    <div ref={containerRef}>
-      <StyledLabel htmlFor={inputIdRef.current}>{label}</StyledLabel>
-      <SuggestionInput
-        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-          const target = e.target as HTMLInputElement;
-          setInputValue(target.value);
-          setExpanded(false);
+    <StyledTagSelector className={className}>
+      {label && (
+        <StyledLabel labelHidden htmlFor="tagselector-creatable" id="tagselector-label">
+          {label}
+        </StyledLabel>
+      )}
+      <CreatableSelect
+        id="tagselector-creatable"
+        aria-labelledby={label ? 'tagselector-label' : undefined}
+        ariaLiveMessages={createAriaMessages(t)}
+        components={{
+          DropdownIndicator,
+          MultiValue: ValueButton,
+          SelectContainer,
+          MenuList,
+          Control,
+          Option,
+          Menu,
+          Input,
         }}
-        suggestions={expanded ? tags : getSuggestions(tags, inputValue)}
-        value={inputValue}
-        onCreateTag={onCreateTag}
-        onToggleTag={onToggleTag}
-        setInputValue={setInputValue}
-        addedTags={sortedTags(tags, tagsSelected)}
-        expanded={expanded}
-        setExpanded={setExpanded}
-        dropdownMaxHeight={dropdownMaxHeight}
-        inline={inline}
-        scrollAnchorElement={containerRef}
-        prefix={prefix}
+        formatCreateLabel={createLabel}
+        inputValue={input}
+        isClearable={false}
+        isMulti
+        noOptionsMessage={() => t('tagSelector.noOptions')}
+        onChange={handleChange}
+        onCreateOption={onCreateTag}
+        onInputChange={setInput}
+        onKeyDown={handleSpaceClick}
+        options={tags}
+        placeholder={t('tagSelector.placeholder')}
+        screenReaderStatus={({ count }) => t('tagSelector.aria.screenReaderStatus', { count })}
+        styles={styles}
+        tabSelectsValue={false}
+        value={selected}
       />
-    </div>
+    </StyledTagSelector>
   );
 };
 

package/src/TagSelector/ValueButton.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import { MultiValueProps } from 'react-select';
+import { buttonStyleV2 as buttonStyle } from '@ndla/button';
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
+import { Cross } from '@ndla/icons/action';
+import { TagType } from './types';
+
+interface StyledProps {
+  selected: boolean;
+}
+
+export const StyledValueButton = styled.div<StyledProps>`
+  && {
+    background: ${({ selected }) => selected && colors.brand.primary};
+    color: ${({ selected }) => selected && colors.white};
+    padding: ${spacing.xxsmall} ${spacing.small};
+    margin: ${spacing.xxsmall};
+    border: none;
+  }
+`;
+
+const ValueButton = ({ innerProps, children, removeProps, isFocused }: MultiValueProps<TagType, true>) => {
+  return (
+    <StyledValueButton
+      selected={isFocused}
+      role="button"
+      css={buttonStyle({ colorTheme: 'lighter', shape: 'pill', size: 'small' })}
+      {...innerProps}
+      {...removeProps}>
+      <span aria-hidden>#</span>
+      {children}
+      <Cross />
+    </StyledValueButton>
+  );
+};
+
+export default ValueButton;

package/src/TagSelector/ariaMessages.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { TFunction } from 'react-i18next';
+import {
+  AriaGuidanceProps,
+  AriaOnChangeProps,
+  AriaOnFilterProps,
+  AriaOnFocusProps,
+  GroupBase,
+  OptionsOrGroups,
+} from 'react-select';
+import { TagType } from './types';
+
+export const createAriaMessages = (t: TFunction) => ({
+  guidance: (props: AriaGuidanceProps) => {
+    const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } = props;
+    switch (context) {
+      case 'menu':
+        return `${t('tagSelector.aria.guidance.menu.updown')}${
+          isDisabled ? '' : `, ${t('tagSelector.aria.guidance.menu.enter')}`
+        }, ${t('tagSelector.aria.guidance.menu.escape')}${
+          tabSelectsValue ? `, ${t('tagSelector.aria.guidance.menu.tab')}` : ''
+        }.`;
+      case 'input':
+        return `${props['aria-label'] || t('tagSelector.aria.guidance.input.select')} ${t(
+          'tagSelector.aria.guidance.input.focused',
+        )} ${isSearchable ? `, ${t('tagSelector.aria.guidance.input.refine')}` : ''}, ${t(
+          'tagSelector.aria.guidance.input.down',
+        )}, ${isMulti ? ` ${t('tagSelector.aria.guidance.input.left')}` : ''}, ${t(
+          'tagSelector.aria.guidance.input.space',
+        )}`;
+      case 'value':
+        return t('tagSelector.aria.guidance.value');
+      default:
+        return '';
+    }
+  },
+
+  onChange: (props: AriaOnChangeProps<TagType, true>) => {
+    const { action, label = '', labels, isDisabled } = props;
+    switch (action) {
+      case 'deselect-option':
+      case 'pop-value':
+      case 'remove-value':
+        return t('tagSelector.aria.onChange.deselect', { label });
+      case 'clear':
+        return t('tagSelector.aria.onChange.clear');
+      case 'initial-input-focus':
+        return t('tagSelector.aria.onChange.initialFocus', { labels: labels.join(',') });
+      case 'select-option':
+        return isDisabled
+          ? t('tagSelector.aria.onChange.selectedDisabled', { label })
+          : t('tagSelector.aria.onChange.selected', { label });
+      default:
+        return '';
+    }
+  },
+
+  onFocus: (props: AriaOnFocusProps<TagType, GroupBase<TagType>>) => {
+    const { context, focused, options, label = '', selectValue, isDisabled, isSelected } = props;
+
+    const getArrayIndex = (arr: OptionsOrGroups<TagType, GroupBase<TagType>>, item: TagType) =>
+      arr && arr.length ? `${arr.indexOf(item) + 1} ${t('tagSelector.aria.onFocus.of')} ${arr.length}` : '';
+
+    if (context === 'value' && selectValue) {
+      return t('tagSelector.aria.onFocus.value', { label, position: getArrayIndex(selectValue, focused) });
+    }
+
+    if (context === 'menu') {
+      const disabled = isDisabled ? ` ${t('tagSelector.aria.disabled')}` : '';
+      const status = `${isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')}${disabled}`;
+      return t('tagSelector.aria.onFocus.menu', { label, status, position: getArrayIndex(options, focused) });
+    }
+    return '';
+  },
+
+  onFilter: (props: AriaOnFilterProps) => {
+    const { inputValue, resultsMessage } = props;
+    return `${resultsMessage}${inputValue ? ` ${t('tagSelector.aria.onFilter')} ` + inputValue : ''}.`;
+  },
+});

package/src/TagSelector/index.ts

@@ -6,7 +6,8 @@
  *
  */
 
-import TagSelector, { TagType } from './TagSelector';
+import TagSelector from './TagSelector';
+import { TagType } from './types';
 
 export type { TagType };
 

package/src/TagSelector/types.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export interface TagType {
+  readonly value: string;
+  readonly label: string;
+}

package/src/TreeStructure/ComboboxButton.tsx

@@ -31,6 +31,7 @@ const StyledSelectedFolder = styled(Button)`
   flex: 1;
   justify-content: flex-start;
   color: ${colors.black};
+  border: none;
   :hover,
   :focus {
     background: none;
@@ -82,6 +83,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
 
     const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
       if (e.key === 'Enter') {
+        onToggleTree(!showTree);
         if (showTree && focusedFolder) {
           setSelectedFolder(focusedFolder);
         }
@@ -89,6 +91,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       }
       if (e.key === 'Escape') {
         onToggleTree(false);
+        e.preventDefault();
         return;
       }
       if (['ArrowUp', 'ArrowDown'].includes(e.key) && !showTree) {
@@ -101,7 +104,16 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
     };
 
     return (
-      <StyledRow isOpen={showTree}>
+      <StyledRow
+        isOpen={showTree}
+        onMouseDown={(e) => {
+          if (!e.defaultPrevented) {
+            e.preventDefault();
+            e.stopPropagation();
+            onToggleTree(!showTree);
+            innerRef.current?.focus();
+          }
+        }}>
         <StyledSelectedFolder
           ref={innerRef}
           tabIndex={0}
@@ -116,24 +128,10 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
           colorTheme="light"
           fontWeight="normal"
           shape="sharp"
-          onKeyDown={onKeyDown}
-          onClick={() => {
-            innerRef.current?.focus();
-            onToggleTree(!showTree);
-          }}>
+          onKeyDown={onKeyDown}>
           {selectedFolder?.name}
         </StyledSelectedFolder>
-        <IconButton
-          aria-hidden
-          aria-label=""
-          tabIndex={-1}
-          variant="ghost"
-          colorTheme="greyLighter"
-          size="small"
-          onClick={() => {
-            innerRef.current?.focus();
-            onToggleTree(!showTree);
-          }}>
+        <IconButton aria-hidden aria-label="" tabIndex={-1} variant="ghost" colorTheme="greyLighter" size="small">
           {showTree ? <ChevronUp /> : <ChevronDown />}
         </IconButton>
       </StyledRow>

package/src/TreeStructure/TreeStructure.tsx

@@ -8,7 +8,7 @@
 
 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
-import { colors, fonts, misc, spacing } from '@ndla/core';
+import { colors, fonts, misc, utils } from '@ndla/core';
 import { css } from '@emotion/core';
 import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
@@ -62,16 +62,7 @@ const ScrollableDiv = styled.div<ScrollableDivProps>`
     type === 'picker' &&
     css`
       overflow: overlay;
-      ::-webkit-scrollbar {
-        width: ${spacing.small};
-      }
-      ::-webkit-scrollbar-thumb {
-        border: 4px solid transparent;
-        border-radius: 14px;
-        background-clip: padding-box;
-        padding: 0 4px;
-        background-color: ${colors.brand.neutral7};
-      }
+      ${utils.scrollbar}
     `}
 `;
 

package/src/locale/messages-en.ts

@@ -30,11 +30,50 @@ const messages = {
     },
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} results available',
+      disabled: 'disabled',
+      selected: 'selected',
+      focused: 'focused',
+      guidance: {
+        menu: {
+          updown: 'Use Up and Down to choose tags',
+          enter: 'press Enter to select the currently focused tag',
+          escape: 'press Escape to exit the menu',
+          tab: 'press Tab to select the tag and exit the menu',
+        },
+        input: {
+          select: 'Tag menu',
+          focused: 'is focused',
+          refine: 'type to refine list',
+          down: 'press Down to open the menu',
+          left: 'press Left to focus selected tags',
+          space: 'press Space to create new tag',
+        },
+        value:
+          'Use left and right to toggle between focused tags, press Backspace to remove the currently focused value. The last tag will be removed if none are selected.',
+      },
+      onChange: {
+        deselect: 'tag {{label}}, deselected.',
+        clear: 'All selected options have been cleared.',
+        initialFocus: `Tags {{labels}}, selected.`,
+        selectedDisabled: 'Tag {{label}} is disabled. Select another option.',
+        selected: 'Tag {{label}}, selected.',
+      },
+      onFocus: {
+        value: 'tag {{label}} focused, {{position}}.',
+        menu: 'tag {{label}} {{status}}, {{position}}.',
+        of: 'of',
+      },
+      onFilter: ' for search term ',
+    },
+    noOptions: 'No options',
     label: 'Add tag',
+    createLabel: 'Add tag {{tag}}',
     placeholder: 'Enter tag name',
     removeTag: 'Remove tag {{name}}',
-    hideAllTags: 'Hide all tags',
-    showAllTags: 'Show all tags',
+    hideTags: 'Hide tags',
+    showTags: 'Show tags',
   },
   htmlTitles: {
     titleTemplate,

package/src/locale/messages-nb.ts

@@ -30,11 +30,50 @@ const messages = {
     },
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultater tilgjengelig',
+      disabled: 'utilgjengelig',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltaster opp og ned for å velge emneknagger',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen',
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere listen med emneknagger',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknagger',
+          space: 'trykk mellomrom for å opprette ny emneknagg',
+        },
+        value:
+          'Bruk høyre og venstre pil for å navigere mellom valgte emneknagger, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.',
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjernet.',
+        clear: 'Alle valgte emneknagger fjernet.',
+        initialFocus: `Emneknagger {{labels}}, valgt.`,
+        selectedDisabled: 'Emneknagg {{label}} kan ikke velges. Velg et annet alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.',
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av',
+      },
+      onFilter: ' for søkeord ',
+    },
+    noOptions: 'Ingen valgmuligheter',
     label: 'Legg til emneknagg',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Skriv inn emneknagg',
     removeTag: 'Ta vekk {{name}}',
-    hideAllTags: 'Skjul alle emneknagger',
-    showAllTags: 'Vis alle emneknagger',
+    hideTags: 'Skjul emneknagger',
+    showTags: 'Vis emneknagger',
   },
   htmlTitles: {
     titleTemplate,

package/src/locale/messages-nn.ts

@@ -30,11 +30,50 @@ const messages = {
     },
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultat tilgjengeleg',
+      disabled: 'utilgjengeleg',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltastar opp og ned for å velge emneknaggar',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen',
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere lista med emneknaggar',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknaggar',
+          space: 'trykk mellomrom for å opprette ny emneknagg',
+        },
+        value:
+          'Bruk høgre og venstre pil for å navigere mellom valgte emneknaggar, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.',
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjerna.',
+        clear: 'Alle valgte emneknaggar fjerna.',
+        initialFocus: `Emneknaggar {{labels}}, valgt.`,
+        selectedDisabled: 'Emneknagg {{label}} kan ikkje velgast. Velg eit anna alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.',
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av',
+      },
+      onFilter: ' for søkeord ',
+    },
+    noOptions: 'Ingen mulige val',
     label: 'Legg til emneknagg',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Skriv inn emneknagg',
     removeTag: 'Ta vekk {{name}}',
-    hideAllTags: 'Skjul alle emneknaggar',
-    showAllTags: 'Vis alle emneknaggar',
+    hideTags: 'Skjul emneknaggar',
+    showTags: 'Vis emneknaggar',
   },
   htmlTitles: {
     titleTemplate,