@gympass/yoga 7.87.1 → 7.88.0

package/esm/AutoComplete/web/AutoComplete.js

@@ -1,221 +1,351 @@
-var _excluded = ["className", "style", "full", "options", "onChange", "onClean", "onSelect", "value", "error", "openSuggestionsAriaLabel", "closeSuggestionsAriaLabel", "shouldFilterOptions"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import Downshift from "downshift";
+import { arrayOf, string, func, bool, shape } from "prop-types";
+import styled, { css } from "styled-components";
+import { ChevronDown, ChevronUp } from "@gympass/yoga-icons";
+import Input from "../../Input/web/Input";
+const escapeRegExp = (str) => str.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
+const Wrapper = styled.div`
+  position: relative;
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+  ${({ full }) => `width: ${full ? "100%" : "auto"}`}
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+  ${({
+  isOpen,
+  theme: {
+    yoga: {
+      components: { input }
+    }
+  }
+}) => isOpen ? `
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+      ${Input} {
+        border-color: ${input.border.color.typed};
+        border-bottom-width: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
-/* eslint react/no-array-index-key: 0 */
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import Downshift from 'downshift';
-import { arrayOf, string, func, bool, shape } from 'prop-types';
-import styled, { css } from 'styled-components';
-import { ChevronDown, ChevronUp } from '@gympass/yoga-icons';
-import Input from '../../Input/web/Input';
+      fieldset {
+        border-color: ${input.border.color.typed};
+        border-bottom-width: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
-var escapeRegExp = function escapeRegExp(str) {
-  return str.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
-};
+      label {
+        color: ${input.label.color.focus};
+        font-weight: ${input.label.font.weight};
+      }
 
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var full = _ref.full;
-  return "width: " + (full ? '100%' : 'auto');
-}, function (_ref2) {
-  var isOpen = _ref2.isOpen,
-      input = _ref2.theme.yoga.components.input;
-  return isOpen ? "\n\n      " + Input + " {\n        border-color: " + input.border.color.typed + ";\n        border-bottom-width: 0;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n\n      fieldset {\n        border-color: " + input.border.color.typed + ";\n        border-bottom-width: 0;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n\n      label {\n        color: " + input.label.color.focus + ";\n        font-weight: " + input.label.font.weight + ";\n      }\n\n      legend {\n        font-weight: " + input.label.font.weight + ";\n      }\n      " : '';
-});
-var List = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  margin: 0;\n\n  padding: 0;\n\n  z-index: 999;\n\n  ", "\n"])), function (_ref3) {
-  var full = _ref3.full,
-      error = _ref3.error,
-      _ref3$theme$yoga = _ref3.theme.yoga,
-      colors = _ref3$theme$yoga.colors,
-      autocomplete = _ref3$theme$yoga.components.autocomplete;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    top: ", "px;\n\n    width: ", ";\n    max-height: ", "px;\n    overflow-y: auto;\n    box-sizing: border-box;\n\n    background-color: ", ";\n\n    border-width: ", "px;\n    border-style: solid;\n    border-color: ", ";\n\n    border-color: ", ";\n\n    border-top-width: 0;\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n  "])), autocomplete.height, full ? '100%' : autocomplete.width + "px", autocomplete.height * 6, autocomplete.field.backgroundColor, autocomplete.border.width, autocomplete.border.color.typed, error ? colors.feedback.attention[1] : autocomplete.border.color.typed, autocomplete.border.radius, autocomplete.border.radius);
-});
-var Item = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n\n  list-style: none;\n\n  cursor: pointer;\n\n  ", "\n"])), function (_ref4) {
-  var selected = _ref4.selected,
-      autocomplete = _ref4.theme.yoga.components.autocomplete;
-  return "\n    padding:\n      " + autocomplete.list.padding.top + "px\n      " + autocomplete.list.padding.right + "px\n      " + autocomplete.list.padding.bottom + "px\n      " + autocomplete.list.padding.left + "px;\n\n    background-color: " + autocomplete.list.backgroundColor["default"] + ";\n    outline: none;\n\n    font-size: " + autocomplete.list.font.size + "px;\n    font-weight: " + autocomplete.list.font.weight["default"] + ";\n    line-height: " + autocomplete.list.font.lineHeight + "px;\n\n    &:hover {\n      background-color: " + autocomplete.list.backgroundColor.hover + ";\n    }\n\n    " + (selected ? "background-color: " + autocomplete.list.backgroundColor.hover + ";" : '') + "\n  ";
-});
-var Match = styled.mark(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  background: transparent;\n  color: inherit;\n\n  ", "\n"])), function (_ref5) {
-  var autocomplete = _ref5.theme.yoga.components.autocomplete;
-  return "\n    font-weight: " + autocomplete.list.font.weight.matched + ";\n  ";
-});
-/** The autocomplete is a normal input field enhanced by a panel of suggested options. */
-
-var AutoComplete = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
-  var className = _ref6.className,
-      style = _ref6.style,
-      full = _ref6.full,
-      options = _ref6.options,
-      onChange = _ref6.onChange,
-      _onClean = _ref6.onClean,
-      onSelect = _ref6.onSelect,
-      value = _ref6.value,
-      error = _ref6.error,
-      openSuggestionsAriaLabel = _ref6.openSuggestionsAriaLabel,
-      closeSuggestionsAriaLabel = _ref6.closeSuggestionsAriaLabel,
-      shouldFilterOptions = _ref6.shouldFilterOptions,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded);
-
-  var _useState = useState(value),
-      userValue = _useState[0],
-      setUserValue = _useState[1];
-
-  var _useState2 = useState(false),
-      isSuggestionsOpen = _useState2[0],
-      setIsSuggestionsOpen = _useState2[1];
-
-  var inputRef = useRef();
-  var handleOpenSuggestions = useCallback(function () {
-    var _inputRef$current;
-
-    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-    setIsSuggestionsOpen(true);
-  }, []);
-  var handleCloseSuggestions = useCallback(function () {
-    setIsSuggestionsOpen(false);
-  }, []);
-  useEffect(function () {
-    var handleKeyUp = function handleKeyUp(_ref7) {
-      var key = _ref7.key;
-      return key === 'Escape' && handleCloseSuggestions();
-    };
-
-    window.addEventListener('keyup', handleKeyUp);
-    return function () {
-      return window.removeEventListener('keyup', handleKeyUp);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(Downshift, {
-    selectedItem: userValue,
-    onStateChange: function onStateChange(changes) {
-      var selectedItem = changes.selectedItem,
-          inputValue = changes.inputValue;
-
-      if (selectedItem) {
-        setUserValue(selectedItem);
-        onSelect(selectedItem);
-        onChange(selectedItem);
-        handleCloseSuggestions();
-      } else if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
-        setUserValue(inputValue);
-        onChange(inputValue);
+      legend {
+        font-weight: ${input.label.font.weight};
       }
+      ` : ""}
+`;
+const List = styled.ul`
+  position: absolute;
+  margin: 0;
+
+  padding: 0;
+
+  z-index: 999;
+
+  ${({
+  full,
+  error,
+  theme: {
+    yoga: {
+      colors,
+      components: { autocomplete }
     }
-  }, function (_ref8) {
-    var getInputProps = _ref8.getInputProps,
-        getItemProps = _ref8.getItemProps,
-        clearSelection = _ref8.clearSelection,
-        getMenuProps = _ref8.getMenuProps,
-        getRootProps = _ref8.getRootProps,
-        highlightedIndex = _ref8.highlightedIndex,
-        isOpen = _ref8.isOpen,
-        openMenu = _ref8.openMenu,
-        inputValue = _ref8.inputValue;
-    var reg = new RegExp("(" + escapeRegExp(inputValue || '').trim() + ")", 'gi');
-    var suggestionList = shouldFilterOptions ? options.filter(function (option) {
-      return option.match(reg);
-    }).sort(function (first, second) {
-      return first.toLowerCase().indexOf(inputValue) < second.toLowerCase().indexOf(inputValue) ? -1 : 1;
-    }) : options;
-
-    if (!!inputValue && isOpen) {
-      setIsSuggestionsOpen(true);
+  }
+}) => css`
+    top: ${autocomplete.height}px;
+
+    width: ${full ? "100%" : `${autocomplete.width}px`};
+    max-height: ${autocomplete.height * 6}px;
+    overflow-y: auto;
+    box-sizing: border-box;
+
+    background-color: ${autocomplete.field.backgroundColor};
+
+    border-width: ${autocomplete.border.width}px;
+    border-style: solid;
+    border-color: ${autocomplete.border.color.typed};
+
+    border-color: ${error ? colors.feedback.attention[1] : autocomplete.border.color.typed};
+
+    border-top-width: 0;
+    border-bottom-left-radius: ${autocomplete.border.radius}px;
+    border-bottom-right-radius: ${autocomplete.border.radius}px;
+  `}
+`;
+const Item = styled.li`
+  box-sizing: border-box;
+
+  list-style: none;
+
+  cursor: pointer;
+
+  ${({
+  selected,
+  theme: {
+    yoga: {
+      components: { autocomplete }
     }
+  }
+}) => `
+    padding:
+      ${autocomplete.list.padding.top}px
+      ${autocomplete.list.padding.right}px
+      ${autocomplete.list.padding.bottom}px
+      ${autocomplete.list.padding.left}px;
 
-    return /*#__PURE__*/React.createElement(Wrapper, _extends({
-      className: className,
-      style: style,
-      full: full,
-      isOpen: isSuggestionsOpen
-    }, getRootProps(), {
-      ref: ref,
-      onBlur: handleCloseSuggestions
-    }), /*#__PURE__*/React.createElement(Input, _extends({}, props, {
-      error: error,
-      full: full,
-      onClean: function onClean(cleanable) {
-        _onClean(cleanable);
-
-        clearSelection();
-        handleCloseSuggestions();
-      }
-    }, getInputProps({
-      onFocus: function onFocus() {
-        return inputValue.length ? openMenu() : null;
+    background-color: ${autocomplete.list.backgroundColor.default};
+    outline: none;
+
+    font-size: ${autocomplete.list.font.size}px;
+    font-weight: ${autocomplete.list.font.weight.default};
+    line-height: ${autocomplete.list.font.lineHeight}px;
+
+    &:hover {
+      background-color: ${autocomplete.list.backgroundColor.hover};
+    }
+
+    ${selected ? `background-color: ${autocomplete.list.backgroundColor.hover};` : ""}
+  `}
+`;
+const Match = styled.mark`
+  background: transparent;
+  color: inherit;
+
+  ${({
+  theme: {
+    yoga: {
+      components: { autocomplete }
+    }
+  }
+}) => `
+    font-weight: ${autocomplete.list.font.weight.matched};
+  `}
+`;
+const AutoComplete = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      style,
+      full,
+      options,
+      onChange,
+      onClean,
+      onSelect,
+      value,
+      error,
+      openSuggestionsAriaLabel,
+      closeSuggestionsAriaLabel,
+      shouldFilterOptions
+    } = _b, props = __objRest(_b, [
+      "className",
+      "style",
+      "full",
+      "options",
+      "onChange",
+      "onClean",
+      "onSelect",
+      "value",
+      "error",
+      "openSuggestionsAriaLabel",
+      "closeSuggestionsAriaLabel",
+      "shouldFilterOptions"
+    ]);
+    const [userValue, setUserValue] = useState(value);
+    const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
+    const inputRef = useRef();
+    const handleOpenSuggestions = useCallback(() => {
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      setIsSuggestionsOpen(true);
+    }, []);
+    const handleCloseSuggestions = useCallback(() => {
+      setIsSuggestionsOpen(false);
+    }, []);
+    useEffect(() => {
+      const handleKeyUp = ({ key }) => {
+        return key === "Escape" && handleCloseSuggestions();
+      };
+      window.addEventListener("keyup", handleKeyUp);
+      return () => window.removeEventListener("keyup", handleKeyUp);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Downshift,
+      {
+        selectedItem: userValue,
+        onStateChange: (changes) => {
+          const { selectedItem, inputValue } = changes;
+          if (selectedItem) {
+            setUserValue(selectedItem);
+            onSelect(selectedItem);
+            onChange(selectedItem);
+            handleCloseSuggestions();
+          } else if (Object.prototype.hasOwnProperty.call(changes, "inputValue")) {
+            setUserValue(inputValue);
+            onChange(inputValue);
+          }
+        },
+        children: ({
+          getInputProps,
+          getItemProps,
+          clearSelection,
+          getMenuProps,
+          getRootProps,
+          highlightedIndex,
+          isOpen,
+          openMenu,
+          inputValue
+        }) => {
+          const reg = new RegExp(
+            `(${escapeRegExp(inputValue || "").trim()})`,
+            "gi"
+          );
+          const suggestionList = shouldFilterOptions ? options.filter((option) => option.match(reg)).sort(
+            (first, second) => first.toLowerCase().indexOf(inputValue) < second.toLowerCase().indexOf(inputValue) ? -1 : 1
+          ) : options;
+          if (!!inputValue && isOpen) {
+            setIsSuggestionsOpen(true);
+          }
+          return /* @__PURE__ */ jsxs(
+            Wrapper,
+            __spreadProps(__spreadValues({
+              className,
+              style,
+              full,
+              isOpen: isSuggestionsOpen
+            }, getRootProps()), {
+              ref,
+              onBlur: handleCloseSuggestions,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+                    error,
+                    full,
+                    onClean: (cleanable) => {
+                      onClean(cleanable);
+                      clearSelection();
+                      handleCloseSuggestions();
+                    }
+                  }), getInputProps({
+                    onFocus: () => inputValue.length ? openMenu() : null
+                  })), {
+                    rightIcon: isSuggestionsOpen ? /* @__PURE__ */ jsx(
+                      ChevronUp,
+                      {
+                        onClick: handleCloseSuggestions,
+                        "aria-label": closeSuggestionsAriaLabel
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        onClick: handleOpenSuggestions,
+                        "aria-label": openSuggestionsAriaLabel
+                      }
+                    ),
+                    ref: inputRef,
+                    includeAriaAttributes: false
+                  })
+                ),
+                isSuggestionsOpen && /* @__PURE__ */ jsx(List, __spreadProps(__spreadValues({}, getMenuProps()), { full, error: !!error, children: suggestionList.map((option, optionIndex) => /* @__PURE__ */ jsx(
+                  Item,
+                  __spreadProps(__spreadValues({}, getItemProps({
+                    key: `${option}${optionIndex}`,
+                    index: optionIndex,
+                    item: option,
+                    selected: highlightedIndex === optionIndex
+                  })), {
+                    children: option.split(reg).map(
+                      (part, index) => !!inputValue && part.match(reg) ? /* @__PURE__ */ jsx(Match, { children: part }, index) : /* @__PURE__ */ jsx(React.Fragment, { children: part }, `unmatch-${index}`)
+                    )
+                  })
+                )) }))
+              ]
+            })
+          );
+        }
       }
-    }), {
-      rightIcon: isSuggestionsOpen ? /*#__PURE__*/React.createElement(ChevronUp, {
-        onClick: handleCloseSuggestions,
-        "aria-label": closeSuggestionsAriaLabel
-      }) : /*#__PURE__*/React.createElement(ChevronDown, {
-        onClick: handleOpenSuggestions,
-        "aria-label": openSuggestionsAriaLabel
-      }),
-      ref: inputRef,
-      includeAriaAttributes: false
-    })), isSuggestionsOpen && /*#__PURE__*/React.createElement(List, _extends({}, getMenuProps(), {
-      full: full,
-      error: !!error
-    }), suggestionList.map(function (option, optionIndex) {
-      return /*#__PURE__*/React.createElement(Item, getItemProps({
-        key: "" + option + optionIndex,
-        index: optionIndex,
-        item: option,
-        selected: highlightedIndex === optionIndex
-      }), option.split(reg).map(function (part, index) {
-        return !!inputValue && part.match(reg) ? /*#__PURE__*/React.createElement(Match, {
-          key: index
-        }, part) : /*#__PURE__*/React.createElement(React.Fragment, {
-          key: "unmatch-" + index
-        }, part);
-      }));
-    })));
-  });
-});
+    );
+  }
+);
 AutoComplete.propTypes = {
   className: string,
   full: bool,
   options: arrayOf(string),
   style: shape({}),
-
   /** callback to know when a user selects a suggestion */
   onSelect: func,
-
   /** called when user type or clean the field and when selects a suggestion */
   onChange: func,
-
   /** a callback to know when the user cleaned the field */
   onClean: func,
   value: string,
   error: string,
-
   /** an aria label for the open suggestions icon */
   openSuggestionsAriaLabel: string,
-
   /** an aria label for the close suggestions icon */
   closeSuggestionsAriaLabel: string,
-
   /** flag to enable options filtering */
   shouldFilterOptions: bool
 };
 AutoComplete.defaultProps = {
-  className: undefined,
+  className: void 0,
   full: false,
   options: [],
-  style: undefined,
-  onSelect: function onSelect() {},
-  onChange: function onChange() {},
-  onClean: function onClean() {},
-  value: undefined,
-  error: undefined,
-  openSuggestionsAriaLabel: 'Open suggestions',
-  closeSuggestionsAriaLabel: 'Close suggestions',
+  style: void 0,
+  onSelect: () => {
+  },
+  onChange: () => {
+  },
+  onClean: () => {
+  },
+  value: void 0,
+  error: void 0,
+  openSuggestionsAriaLabel: "Open suggestions",
+  closeSuggestionsAriaLabel: "Close suggestions",
   shouldFilterOptions: true
 };
-export default AutoComplete;
+var AutoComplete_default = AutoComplete;
+export {
+  AutoComplete_default as default
+};