braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Autosuggest/Autosuggest.mjs

@@ -0,0 +1,606 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback, useReducer, useEffect, Fragment } from "react";
+import dedent from "dedent";
+import parseHighlights from "autosuggest-highlight/parse/index.js";
+import { Box } from "../Box/Box.mjs";
+import { Text } from "../Text/Text.mjs";
+import { Strong } from "../Strong/Strong.mjs";
+import { HiddenVisually } from "../HiddenVisually/HiddenVisually.mjs";
+import { Announcement } from "../private/Announcement/Announcement.mjs";
+import { Field } from "../private/Field/Field.mjs";
+import { ButtonIcon } from "../ButtonIcon/ButtonIcon.mjs";
+import { textStyles } from "../../css/typography.mjs";
+import { touchableText } from "../../css/typography.css.mjs";
+import { getNextIndex } from "../private/getNextIndex.mjs";
+import { normalizeKey } from "../private/normalizeKey.mjs";
+import { ClearField } from "../private/Field/ClearField.mjs";
+import { smoothScroll } from "../private/smoothScroll.mjs";
+import { useScrollIntoView } from "./useScrollIntoView.mjs";
+import { useResponsiveValue } from "../useResponsiveValue/useResponsiveValue.mjs";
+import { RemoveScroll } from "react-remove-scroll";
+import { getItemId, createAccessbilityProps } from "./createAccessbilityProps.mjs";
+import { autosuggest } from "../../translations/en.mjs";
+import { backdrop, backdropVisible, menu, groupHeading } from "./Autosuggest.css.mjs";
+import { IconClear } from "../icons/IconClear/IconClear.mjs";
+const INPUT_FOCUS = 0;
+const INPUT_BLUR = 1;
+const INPUT_CHANGE = 2;
+const INPUT_ARROW_UP = 3;
+const INPUT_ARROW_DOWN = 4;
+const INPUT_ESCAPE = 5;
+const INPUT_ENTER = 6;
+const SUGGESTION_MOUSE_CLICK = 7;
+const SUGGESTION_MOUSE_ENTER = 8;
+const HAS_SUGGESTIONS_CHANGED = 9;
+function SuggestionItem({
+  suggestion,
+  highlighted,
+  selected,
+  onHover,
+  id,
+  ...restProps
+}) {
+  const { highlights = [], onClear, clearLabel } = suggestion;
+  const label = suggestion.label ?? suggestion.text;
+  const suggestionParts = parseHighlights(
+    label,
+    highlights.map(({ start, end }) => [start, end])
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "li",
+      cursor: "pointer",
+      onMouseDown: (event) => {
+        event.preventDefault();
+      },
+      onMouseMove: onHover,
+      onTouchStart: onHover,
+      id,
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "span",
+          display: "flex",
+          justifyContent: "spaceBetween",
+          background: highlighted ? "formAccentSoft" : void 0,
+          paddingX: "small",
+          paddingRight: onClear ? "none" : void 0,
+          children: [
+            /* @__PURE__ */ jsxs(Box, { className: touchableText.standard, children: [
+              /* @__PURE__ */ jsx(Text, { baseline: false, children: suggestionParts.map(
+                ({ highlight, text }, index) => selected || highlight ? /* @__PURE__ */ jsx(Strong, { children: text }, index) : /* @__PURE__ */ jsx(Fragment, { children: text }, index)
+              ) }),
+              suggestion.description ? /* @__PURE__ */ jsx(Text, { size: "small", tone: "secondary", baseline: false, children: suggestion.description }) : null
+            ] }),
+            typeof onClear === "function" ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "touchable",
+                height: "touchable",
+                children: /* @__PURE__ */ jsx(
+                  ButtonIcon,
+                  {
+                    id: `${id}-clear`,
+                    icon: /* @__PURE__ */ jsx(IconClear, {}),
+                    tone: "secondary",
+                    tabIndex: -1,
+                    label: clearLabel || "Clear suggestion",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onClear(valueFromSuggestion(suggestion));
+                    }
+                  }
+                )
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function GroupHeading({ children }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      paddingX: "small",
+      className: [
+        groupHeading,
+        touchableText.xsmall,
+        textStyles({
+          size: "xsmall",
+          baseline: false,
+          weight: "strong",
+          tone: "formAccent"
+        })
+      ],
+      "data-testid": process.env.NODE_ENV !== "production" ? `group-heading-${children}` : void 0,
+      children
+    }
+  );
+}
+function normaliseSuggestions(suggestions) {
+  let index = 0;
+  const normalisedSuggestions = [];
+  const groupHeadingIndexes = /* @__PURE__ */ new Map();
+  const groupHeadingForSuggestion = /* @__PURE__ */ new Map();
+  for (const item of suggestions) {
+    if ("suggestions" in item) {
+      groupHeadingIndexes.set(index, item.label);
+      item.suggestions.forEach((suggestion) => {
+        groupHeadingForSuggestion.set(suggestion, item.label);
+      });
+      index = normalisedSuggestions.push(...item.suggestions);
+    } else {
+      index = normalisedSuggestions.push(item);
+    }
+  }
+  return {
+    normalisedSuggestions,
+    groupHeadingIndexes,
+    groupHeadingForSuggestion
+  };
+}
+function valueFromSuggestion(suggestion) {
+  return "value" in suggestion ? {
+    text: suggestion.text,
+    value: suggestion.value
+  } : { text: suggestion.text };
+}
+const noop = () => {
+};
+const fallbackValue = { text: "" };
+const fallbackSuggestions = [];
+function normaliseNoSuggestionMessage(noSuggestionsMessage, suggestionProp) {
+  if (noSuggestionsMessage) {
+    return typeof noSuggestionsMessage === "string" ? { description: noSuggestionsMessage } : noSuggestionsMessage;
+  }
+  if ("message" in suggestionProp) {
+    const message = suggestionProp.message;
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        dedent`
+          Passing \`message\` to \`suggestions\` is deprecated and will be removed in a future version. Use "noSuggestionsMessage" instead. See the documentation for usage: https://seek-oss.github.io/braid-design-system/components/Autosuggest#messaging-when-no-suggestions-are-available
+             <Autosuggest
+            %c-   suggestions={{ message: '${message}' }}
+            %c+   noSuggestionsMessage="${message}"
+             %c/>
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit"
+      );
+    }
+    return { description: message };
+  }
+}
+const Autosuggest = forwardRef(function({
+  id,
+  value = fallbackValue,
+  suggestions: suggestionsProp = fallbackSuggestions,
+  noSuggestionsMessage: noSuggestionsMessageProp,
+  onChange = noop,
+  automaticSelection = false,
+  showMobileBackdrop = false,
+  scrollToTopOnMobile = true,
+  hideSuggestionsOnSelection = true,
+  onFocus = noop,
+  onBlur = noop,
+  placeholder,
+  type = "text",
+  clearLabel,
+  onClear,
+  translations = autosuggest,
+  ...restProps
+}, forwardedRef) {
+  const suggestionsPropValue = typeof suggestionsProp === "function" ? suggestionsProp(value) : suggestionsProp;
+  const suggestions = Array.isArray(suggestionsPropValue) ? suggestionsPropValue : [];
+  const noSuggestionsMessage = normaliseNoSuggestionMessage(
+    noSuggestionsMessageProp,
+    suggestionsPropValue
+  );
+  const hasItems = suggestions.length > 0 || Boolean(noSuggestionsMessage);
+  const defaultRef = useRef(null);
+  const inputRef = forwardedRef || defaultRef;
+  const fireChange = useCallback(
+    (suggestion) => onChange(valueFromSuggestion(suggestion)),
+    [onChange]
+  );
+  const rootRef = useRef(null);
+  const menuRef = useRef(null);
+  const justPressedArrowRef = useRef(false);
+  const {
+    normalisedSuggestions,
+    groupHeadingIndexes,
+    groupHeadingForSuggestion
+  } = normaliseSuggestions(suggestions);
+  const suggestionCount = normalisedSuggestions.length;
+  const hasSuggestions = suggestionCount > 0;
+  const reducer = (state, action) => {
+    switch (action.type) {
+      case INPUT_ARROW_DOWN: {
+        if (hasSuggestions) {
+          const nextIndex = getNextIndex(
+            1,
+            state.highlightedIndex,
+            suggestionCount
+          );
+          return {
+            ...state,
+            showSuggestionsIfAvailable: true,
+            previewValue: normalisedSuggestions[nextIndex],
+            highlightedIndex: nextIndex
+          };
+        }
+      }
+      case INPUT_ARROW_UP: {
+        if (hasSuggestions) {
+          const nextIndex = getNextIndex(
+            -1,
+            state.highlightedIndex,
+            suggestionCount
+          );
+          return {
+            ...state,
+            showSuggestionsIfAvailable: true,
+            previewValue: normalisedSuggestions[nextIndex],
+            highlightedIndex: nextIndex
+          };
+        }
+      }
+      case INPUT_CHANGE: {
+        return {
+          ...state,
+          showSuggestionsIfAvailable: true,
+          inputChangedSinceFocus: true,
+          previewValue: null,
+          highlightedIndex: hasSuggestions && automaticSelection && value.text.length > 0 ? 0 : null
+        };
+      }
+      case INPUT_FOCUS: {
+        return {
+          ...state,
+          showSuggestionsIfAvailable: true,
+          inputChangedSinceFocus: false,
+          isFocused: true
+        };
+      }
+      case INPUT_BLUR: {
+        return {
+          ...state,
+          showSuggestionsIfAvailable: false,
+          previewValue: null,
+          highlightedIndex: null,
+          isFocused: false
+        };
+      }
+      case INPUT_ESCAPE: {
+        if (value.text) {
+          return {
+            ...state,
+            showSuggestionsIfAvailable: false,
+            previewValue: null,
+            highlightedIndex: null
+          };
+        } else if (hasItems) {
+          return {
+            ...state,
+            showSuggestionsIfAvailable: !state.showSuggestionsIfAvailable,
+            previewValue: null
+          };
+        }
+        return state;
+      }
+      case INPUT_ENTER:
+      case SUGGESTION_MOUSE_CLICK: {
+        return {
+          ...state,
+          showSuggestionsIfAvailable: !hideSuggestionsOnSelection,
+          previewValue: null,
+          highlightedIndex: null
+        };
+      }
+      case SUGGESTION_MOUSE_ENTER: {
+        return {
+          ...state,
+          highlightedIndex: action.value
+        };
+      }
+      case HAS_SUGGESTIONS_CHANGED: {
+        return automaticSelection ? {
+          ...state,
+          highlightedIndex: hasSuggestions && value.text.length > 0 ? 0 : null
+        } : state;
+      }
+      default: {
+        console.error(new Error(`Invalid Autosuggest action: ${action}`));
+        return state;
+      }
+    }
+  };
+  const [
+    {
+      showSuggestionsIfAvailable,
+      inputChangedSinceFocus,
+      previewValue,
+      highlightedIndex,
+      isFocused
+    },
+    dispatch
+  ] = useReducer(reducer, {
+    showSuggestionsIfAvailable: false,
+    inputChangedSinceFocus: false,
+    previewValue: null,
+    highlightedIndex: null,
+    isFocused: false
+  });
+  const isOpen = showSuggestionsIfAvailable && hasItems;
+  const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(getItemId(id, highlightedIndex)) : null;
+  useScrollIntoView(highlightedItem, menuRef.current);
+  useEffect(() => {
+    dispatch({
+      type: HAS_SUGGESTIONS_CHANGED
+    });
+  }, [hasSuggestions]);
+  const isMobile = useResponsiveValue()({
+    mobile: true,
+    tablet: false
+  });
+  useEffect(() => {
+    if (menuRef.current && isOpen && !isMobile) {
+      const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
+      const viewportHeight = document.documentElement.clientHeight;
+      if (menuBottom > viewportHeight) {
+        menuRef.current.scrollIntoView(false);
+      }
+    }
+  }, [isOpen, isMobile, suggestionCount]);
+  const inputProps = {
+    value: previewValue ? previewValue.text : value.text,
+    type: type === "search" ? type : "text",
+    placeholder: !restProps.disabled ? placeholder : void 0,
+    onChange: (e) => {
+      const inputValue = e.target.value;
+      dispatch({ type: INPUT_CHANGE });
+      fireChange({ text: inputValue });
+    },
+    onFocus: () => {
+      if (rootRef.current && scrollToTopOnMobile && isMobile) {
+        smoothScroll(rootRef.current);
+      }
+      dispatch({ type: INPUT_FOCUS });
+      onFocus();
+    },
+    onBlur: () => {
+      if (justPressedArrowRef.current === true) {
+        return;
+      }
+      if (previewValue) {
+        fireChange(previewValue);
+      } else if (isOpen && automaticSelection && inputChangedSinceFocus && value.text.length > 0 && suggestionCount > 0) {
+        fireChange(normalisedSuggestions[0]);
+      }
+      dispatch({ type: INPUT_BLUR });
+      onBlur();
+    },
+    onKeyDown: (event) => {
+      const targetKey = normalizeKey(event);
+      if (/^Arrow(Up|Down$)/.test(targetKey)) {
+        justPressedArrowRef.current = true;
+        setTimeout(() => {
+          justPressedArrowRef.current = false;
+        }, 150);
+      }
+      switch (targetKey) {
+        case "ArrowDown": {
+          event.preventDefault();
+          dispatch({ type: INPUT_ARROW_DOWN });
+          return;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          dispatch({ type: INPUT_ARROW_UP });
+          return;
+        }
+        case "Escape": {
+          event.preventDefault();
+          if (previewValue === null && value.text) {
+            fireChange({ text: "" });
+          }
+          dispatch({ type: INPUT_ESCAPE });
+          return;
+        }
+        case "Enter": {
+          if (typeof highlightedIndex === "number") {
+            event.preventDefault();
+            fireChange(normalisedSuggestions[highlightedIndex]);
+          }
+          dispatch({ type: INPUT_ENTER });
+          return;
+        }
+        default: {
+          return;
+        }
+      }
+    }
+  };
+  const a11y = createAccessbilityProps({
+    id,
+    isOpen,
+    highlightedIndex
+  });
+  const clearable = Boolean(
+    typeof onClear !== "undefined" && !restProps.disabled && typeof value !== "undefined" && value.text.length > 0
+  );
+  const announcements = [];
+  const hasAutomaticSelection = automaticSelection && previewValue === null && highlightedIndex === 0;
+  if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) {
+    if (hasSuggestions) {
+      announcements.push(
+        translations.suggestionsAvailableAnnouncement(suggestionCount)
+      );
+      if (hasAutomaticSelection) {
+        announcements.push(
+          translations.suggestionAutoSelectedAnnouncement(
+            normalisedSuggestions[0].text
+          )
+        );
+      }
+      announcements.push(translations.suggestionInstructions);
+    } else if (noSuggestionsMessage) {
+      if (noSuggestionsMessage.title) {
+        announcements.push(noSuggestionsMessage.title);
+      }
+      announcements.push(noSuggestionsMessage.description);
+    } else {
+      announcements.push(translations.noSuggestionsAvailableAnnouncement);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showMobileBackdrop ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "fixed",
+        zIndex: "dropdownBackdrop",
+        transition: "fast",
+        display: ["block", "none"],
+        pointerEvents: isOpen ? void 0 : "none",
+        top: 0,
+        left: 0,
+        opacity: !isOpen ? 0 : void 0,
+        className: [
+          backdrop,
+          isOpen ? backdropVisible : void 0
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...showMobileBackdrop && isOpen ? {
+          position: "relative",
+          zIndex: "dropdown"
+        } : null,
+        children: [
+          /* @__PURE__ */ jsx(Box, { position: "relative", ref: rootRef, children: /* @__PURE__ */ jsx(
+            Field,
+            {
+              ...restProps,
+              id,
+              value: value.text,
+              prefix: void 0,
+              secondaryIcon: onClear ? /* @__PURE__ */ jsx(
+                ClearField,
+                {
+                  id: `${id}-clearfield`,
+                  hide: !clearable,
+                  onClear,
+                  label: clearLabel,
+                  inputRef
+                }
+              ) : null,
+              children: (overlays, fieldProps, icon, secondaryIcon) => /* @__PURE__ */ jsxs(Box, { width: "full", children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "input",
+                    ...fieldProps,
+                    ...a11y.inputProps,
+                    ...inputProps,
+                    position: "relative",
+                    ref: inputRef
+                  }
+                ),
+                icon,
+                /* @__PURE__ */ jsx(RemoveScroll, { ref: menuRef, enabled: isOpen, forwardProps: true, children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    component: "ul",
+                    display: isOpen ? "block" : "none",
+                    position: "absolute",
+                    zIndex: "dropdown",
+                    background: !hasSuggestions && noSuggestionsMessage ? { lightMode: "neutralSoft", darkMode: "neutral" } : "surface",
+                    borderRadius: "standard",
+                    boxShadow: "medium",
+                    width: "full",
+                    marginTop: "xxsmall",
+                    paddingY: "xxsmall",
+                    className: menu,
+                    ...a11y.menuProps,
+                    children: [
+                      isOpen && !hasSuggestions && noSuggestionsMessage ? /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          component: "li",
+                          paddingX: "small",
+                          className: touchableText.standard,
+                          children: [
+                            noSuggestionsMessage.title ? /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                tone: "secondary",
+                                weight: "medium",
+                                baseline: false,
+                                children: noSuggestionsMessage.title
+                              }
+                            ) : null,
+                            /* @__PURE__ */ jsx(Text, { tone: "secondary", baseline: false, children: noSuggestionsMessage.description })
+                          ]
+                        }
+                      ) : null,
+                      isOpen && hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
+                        const { text } = suggestion;
+                        const groupHeading2 = groupHeadingIndexes.get(index);
+                        return /* @__PURE__ */ jsxs(Fragment, { children: [
+                          groupHeading2 ? /* @__PURE__ */ jsx(GroupHeading, { children: groupHeading2 }) : null,
+                          /* @__PURE__ */ jsx(
+                            SuggestionItem,
+                            {
+                              suggestion,
+                              highlighted: highlightedIndex === index,
+                              selected: value === suggestion,
+                              onClick: () => {
+                                fireChange(suggestion);
+                                dispatch({ type: SUGGESTION_MOUSE_CLICK });
+                              },
+                              onHover: () => {
+                                dispatch({
+                                  type: SUGGESTION_MOUSE_ENTER,
+                                  value: index
+                                });
+                              },
+                              ...a11y.getItemProps({
+                                index,
+                                label: suggestion.label ?? suggestion.text,
+                                description: suggestion.description,
+                                groupHeading: groupHeadingForSuggestion.get(suggestion)
+                              })
+                            }
+                          )
+                        ] }, index + text);
+                      }) : null
+                    ]
+                  }
+                ) }),
+                overlays,
+                secondaryIcon
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(HiddenVisually, { ...a11y.assistiveDescriptionProps, children: translations.assistiveDescription }),
+          /* @__PURE__ */ jsx(Announcement, { children: announcements.join(". ") })
+        ]
+      }
+    )
+  ] });
+});
+Autosuggest.displayName = "Autosuggest";
+export {
+  Autosuggest
+};

package/dist/lib/components/Autosuggest/Autosuggest.playroom.cjs

@@ -0,0 +1,36 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_playroomState_cjs = require("../../playroom/playroomState.cjs");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_Autosuggest_Autosuggest_cjs = require("./Autosuggest.cjs");
+function Autosuggest({
+  id,
+  stateName,
+  value,
+  onChange,
+  onClear,
+  ...restProps
+}) {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  const blankValue = { text: "" };
+  const [state, handleChange] = lib_playroom_playroomState_cjs.useFallbackState(
+    stateName,
+    value,
+    onChange,
+    blankValue
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Autosuggest_Autosuggest_cjs.Autosuggest,
+    {
+      id: id ?? fallbackId,
+      value: state,
+      onChange: handleChange,
+      onClear: () => {
+        handleChange(blankValue);
+        onClear == null ? void 0 : onClear();
+      },
+      ...restProps
+    }
+  );
+}
+exports.Autosuggest = Autosuggest;

package/dist/lib/components/Autosuggest/Autosuggest.playroom.mjs

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackState } from "../../playroom/playroomState.mjs";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { Autosuggest as Autosuggest$1 } from "./Autosuggest.mjs";
+function Autosuggest({
+  id,
+  stateName,
+  value,
+  onChange,
+  onClear,
+  ...restProps
+}) {
+  const fallbackId = useFallbackId();
+  const blankValue = { text: "" };
+  const [state, handleChange] = useFallbackState(
+    stateName,
+    value,
+    onChange,
+    blankValue
+  );
+  return /* @__PURE__ */ jsx(
+    Autosuggest$1,
+    {
+      id: id ?? fallbackId,
+      value: state,
+      onChange: handleChange,
+      onClear: () => {
+        handleChange(blankValue);
+        onClear == null ? void 0 : onClear();
+      },
+      ...restProps
+    }
+  );
+}
+export {
+  Autosuggest
+};