@gympass/yoga 7.87.1 → 7.88.0

package/esm/Dropdown/web/Dropdown.js

@@ -1,190 +1,385 @@
-var _excluded = ["isOpen", "selected"],
-    _excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-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); }
-
-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; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React, { useCallback, useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-import Downshift from 'downshift';
-import { arrayOf, func, shape, string, number, bool, oneOfType } from 'prop-types';
-import { ChevronDown } from '@gympass/yoga-icons';
-import Helper from '../../Input/web/Helper';
-import Input from '../../Input/web/Input';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var full = _ref.full,
-      dropdown = _ref.theme.yoga.components.dropdown;
-  return "\n    position: relative;\n    display: inline-block;\n    vertical-align: top;\n    \n    width: " + (full ? '100%' : dropdown.width + "px") + ";\n  ";
-});
-var labelTransition = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var _ref2$theme$yoga = _ref2.theme.yoga,
-      transition = _ref2$theme$yoga.transition,
-      _ref2$theme$yoga$comp = _ref2$theme$yoga.components,
-      input = _ref2$theme$yoga$comp.input,
-      dropdown = _ref2$theme$yoga$comp.dropdown;
-  return "\n    transform: translateY(-" + (input.height / 2 - 2) + "px);\n    transition-property: transform, font-size, color;\n    transition-duration: " + transition.duration[1] + "ms;\n    transition-timing-function: cubic-bezier(" + transition.timing[0].join() + ");\n\n    font-size: " + input.label.font.size.typed + "px;\n    color: " + dropdown.input.label.color + ";\n  ";
-});
-var Selector = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var isOpen = _ref3.isOpen,
-      disabled = _ref3.disabled,
-      selected = _ref3.selected,
-      error = _ref3.error,
-      _ref3$theme$yoga = _ref3.theme.yoga,
-      colors = _ref3$theme$yoga.colors,
-      dropdown = _ref3$theme$yoga.components.dropdown;
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), !disabled ? "\n          fieldset {\n            " + (isOpen || selected ? "border-color: " + dropdown.hover.selector.border.color + ";" : '') + "\n\n            " + (error && !isOpen ? "border-color: " + colors.feedback.attention[1] + ";\n                " : '') + "\n          }\n          &:hover {\n            fieldset {\n              border-color: " + (error && !isOpen ? dropdown.hover.selector.border.error : dropdown.hover.selector.border.color) + ";\n            }\n          }\n        " : '');
-});
-var Field = styled(Input)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  ", "\n"])), function (_ref4) {
-  var value = _ref4.value,
-      isOpen = _ref4.isOpen,
-      disabled = _ref4.disabled;
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    ", "\n\n    ", "\n  "])), isOpen && !disabled ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n          & ~ legend {\n            max-width: max-content;\n          }\n\n          & ~ label {\n            ", ";\n          }\n        "])), labelTransition) : '', value && !disabled ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n          & ~ label {\n            ", ";\n          }\n        "])), labelTransition) : '');
-});
-var Button = styled.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
-  var disabled = _ref5.disabled,
-      dropdown = _ref5.theme.yoga.components.dropdown;
-  return "\n    display: flex;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-end;\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    padding-right: " + dropdown.button.padding.right + "px;\n    padding-top: " + dropdown.button.padding.top + "px;\n    padding-bottom: " + dropdown.button.padding.bottom + "px;\n\n    border: none;\n    outline: none;\n    background-color: transparent;\n    cursor: " + (disabled ? 'not-allowed' : 'pointer') + ";\n  ";
-});
-var OptionsList = styled.ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
-  var isMaxHeight = _ref6.isMaxHeight,
-      dropdown = _ref6.theme.yoga.components.dropdown;
-  return "\n    position: absolute;\n    top: 46px;\n    z-index: 1;\n    box-sizing: border-box;\n\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    list-style-type: none;\n\n    background: " + dropdown.optionsList.backgroundColor + ";\n    border-width: " + dropdown.optionsList.border.width + "px;\n    border-style: solid;\n    border-color: " + dropdown.optionsList.border.color + ";\n    border-top: none;\n\n    border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n\n    " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n  ";
-});
-var Option = styled.li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
-  var isSelected = _ref7.isSelected,
-      highlighted = _ref7.highlighted,
-      _ref7$theme$yoga = _ref7.theme.yoga,
-      baseFont = _ref7$theme$yoga.baseFont,
-      dropdown = _ref7$theme$yoga.components.dropdown;
-  return "\n    display: flex;\n    align-items: center;\n    height: " + dropdown.option.height + "px;\n    padding:\n      " + dropdown.option.padding.top + "px\n      " + dropdown.option.padding.right + "px\n      " + dropdown.option.padding.bottom + "px\n      " + dropdown.option.padding.left + "px;\n    cursor: pointer;\n\n    font-family: " + baseFont.family + ";\n    font-size: " + (isSelected ? dropdown.selected.option.font.size : dropdown.option.font.size) + "px;\n    line-height: " + dropdown.option.font.lineHeight + "px;\n\n    font-weight: " + (isSelected ? "" + dropdown.selected.option.font.weight : "" + dropdown.option.font.weight) + ";\n\n    color: " + (isSelected ? dropdown.selected.option.font.color : dropdown.option.font.color) + ";\n\n    " + (highlighted ? "background-color: " + dropdown.hover.option.backgroundColor + ";" : '') + "\n\n    &:hover {\n      background-color: " + dropdown.hover.option.backgroundColor + ";\n    }\n\n    &:last-child {\n      border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n    }\n  ";
-});
-var ArrowIcon = styled(function (_ref8) {
-  var isOpen = _ref8.isOpen,
-      selected = _ref8.selected,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded);
-
-  return /*#__PURE__*/React.createElement(ChevronDown, _extends({
-    width: 20,
-    height: 20
-  }, props));
-})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref9) {
-  var isOpen = _ref9.isOpen,
-      selected = _ref9.selected,
-      disabled = _ref9.disabled,
-      dropdown = _ref9.theme.yoga.components.dropdown;
-  return "\n    fill: " + dropdown.arrow.fill + ";\n    " + (disabled ? "fill: " + dropdown.disabled.arrow.fill + ";" : '') + ";\n    " + (selected && !disabled ? "fill: " + dropdown.selected.arrow.fill + ";" : '') + ";\n    transform: rotate(" + (isOpen ? '180deg' : '0') + ");\n  ";
-});
-/** Gympass Dropdown is a multiple choice type of menu. */
-
-var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
-  var error = _ref10.error,
-      label = _ref10.label,
-      disabled = _ref10.disabled,
-      full = _ref10.full,
-      options = _ref10.options,
-      onChange = _ref10.onChange,
-      isMaxHeight = _ref10.isMaxHeight,
-      rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
-
-  var inputRef = ref || React.useRef(null);
-  var selectedOption = options.find(function (item) {
-    return item.selected === true;
-  });
-
-  var _useState = useState(selectedOption),
-      localSelectedItem = _useState[0],
-      setLocalSelectedItem = _useState[1];
-
-  useEffect(function () {
-    setLocalSelectedItem(selectedOption);
-  }, [options]);
-  var onLocalChange = useCallback(function (opt) {
-    setLocalSelectedItem(opt);
-    onChange(opt);
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(Downshift, {
-    initialSelectedItem: selectedOption,
-    selectedItemChanged: function selectedItemChanged(prevItem, item) {
-      return prevItem !== item;
-    },
-    itemToString: function itemToString(item) {
-      return item ? item.label : '';
-    },
-    onChange: onLocalChange,
-    selectedItem: localSelectedItem
-  }, function (_ref11) {
-    var getInputProps = _ref11.getInputProps,
-        getItemProps = _ref11.getItemProps,
-        getRootProps = _ref11.getRootProps,
-        getMenuProps = _ref11.getMenuProps,
-        getToggleButtonProps = _ref11.getToggleButtonProps,
-        selectedItem = _ref11.selectedItem,
-        highlightedIndex = _ref11.highlightedIndex,
-        isOpen = _ref11.isOpen;
-    return /*#__PURE__*/React.createElement(Wrapper, _extends({
-      full: full
-    }, getRootProps(), rest), /*#__PURE__*/React.createElement(Selector, {
-      isOpen: isOpen,
-      disabled: disabled,
-      error: error,
-      selected: selectedItem !== null
-    }, /*#__PURE__*/React.createElement(Field, _extends({
-      readOnly: true,
-      disabled: disabled,
-      selected: selectedItem !== null,
-      isOpen: isOpen,
-      label: label,
-      full: full,
-      ref: inputRef,
-      includeAriaAttributes: false
-    }, getInputProps())), /*#__PURE__*/React.createElement(Button, _extends({
-      isOpen: isOpen,
-      disabled: disabled
-    }, getToggleButtonProps()), /*#__PURE__*/React.createElement(ArrowIcon, {
-      isOpen: isOpen,
-      selected: selectedItem !== null,
-      disabled: disabled
-    }))), isOpen && /*#__PURE__*/React.createElement(OptionsList, _extends({
-      isMaxHeight: isMaxHeight,
-      selected: selectedItem !== null
-    }, getMenuProps()), options.map(function (item, index) {
-      return /*#__PURE__*/React.createElement(Option, getItemProps({
-        key: item.value,
-        item: item,
-        isSelected: selectedItem === item,
-        highlighted: highlightedIndex === index
-      }), item.label);
-    })), error && /*#__PURE__*/React.createElement(Helper, {
-      error: error
-    }));
-  });
-});
+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, { useCallback, useEffect, useState } from "react";
+import styled, { css } from "styled-components";
+import Downshift from "downshift";
+import {
+  arrayOf,
+  func,
+  shape,
+  string,
+  number,
+  bool,
+  oneOfType
+} from "prop-types";
+import { ChevronDown } from "@gympass/yoga-icons";
+import Helper from "../../Input/web/Helper";
+import Input from "../../Input/web/Input";
+const Wrapper = styled.div`
+  ${({
+  full,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    
+    width: ${full ? "100%" : `${dropdown.width}px`};
+  `}
+`;
+const labelTransition = css`
+  ${({
+  theme: {
+    yoga: {
+      transition,
+      components: { input, dropdown }
+    }
+  }
+}) => `
+    transform: translateY(-${input.height / 2 - 2}px);
+    transition-property: transform, font-size, color;
+    transition-duration: ${transition.duration[1]}ms;
+    transition-timing-function: cubic-bezier(${transition.timing[0].join()});
+
+    font-size: ${input.label.font.size.typed}px;
+    color: ${dropdown.input.label.color};
+  `}
+`;
+const Selector = styled.div`
+  ${({
+  isOpen,
+  disabled,
+  selected,
+  error,
+  theme: {
+    yoga: {
+      colors,
+      components: { dropdown }
+    }
+  }
+}) => css`
+    ${!disabled ? `
+          fieldset {
+            ${isOpen || selected ? `border-color: ${dropdown.hover.selector.border.color};` : ""}
+
+            ${error && !isOpen ? `border-color: ${colors.feedback.attention[1]};
+                ` : ""}
+          }
+          &:hover {
+            fieldset {
+              border-color: ${error && !isOpen ? dropdown.hover.selector.border.error : dropdown.hover.selector.border.color};
+            }
+          }
+        ` : ""}
+  `}
+`;
+const Field = styled(Input)`
+  pointer-events: none;
+
+  ${({ value, isOpen, disabled }) => css`
+    ${isOpen && !disabled ? css`
+          & ~ legend {
+            max-width: max-content;
+          }
+
+          & ~ label {
+            ${labelTransition};
+          }
+        ` : ""}
+
+    ${value && !disabled ? css`
+          & ~ label {
+            ${labelTransition};
+          }
+        ` : ""}
+  `}
+`;
+const Button = styled.button`
+  ${({
+  disabled,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    padding-right: ${dropdown.button.padding.right}px;
+    padding-top: ${dropdown.button.padding.top}px;
+    padding-bottom: ${dropdown.button.padding.bottom}px;
+
+    border: none;
+    outline: none;
+    background-color: transparent;
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+  `}
+`;
+const OptionsList = styled.ul`
+  ${({
+  isMaxHeight,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    position: absolute;
+    top: 46px;
+    z-index: 1;
+    box-sizing: border-box;
+
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style-type: none;
+
+    background: ${dropdown.optionsList.backgroundColor};
+    border-width: ${dropdown.optionsList.border.width}px;
+    border-style: solid;
+    border-color: ${dropdown.optionsList.border.color};
+    border-top: none;
+
+    border-radius:
+        ${dropdown.option.border.radius.topLeft}px
+        ${dropdown.option.border.radius.topRight}px
+        ${dropdown.option.border.radius.bottomRight}px
+        ${dropdown.option.border.radius.bottomLeft}px;
+
+    ${isMaxHeight && `max-height: ${dropdown.option.height * 3.5}px;`}
+  `}
+`;
+const Option = styled.li`
+  ${({
+  isSelected,
+  highlighted,
+  theme: {
+    yoga: {
+      baseFont,
+      components: { dropdown }
+    }
+  }
+}) => `
+    display: flex;
+    align-items: center;
+    height: ${dropdown.option.height}px;
+    padding:
+      ${dropdown.option.padding.top}px
+      ${dropdown.option.padding.right}px
+      ${dropdown.option.padding.bottom}px
+      ${dropdown.option.padding.left}px;
+    cursor: pointer;
+
+    font-family: ${baseFont.family};
+    font-size: ${isSelected ? dropdown.selected.option.font.size : dropdown.option.font.size}px;
+    line-height: ${dropdown.option.font.lineHeight}px;
+
+    font-weight: ${isSelected ? `${dropdown.selected.option.font.weight}` : `${dropdown.option.font.weight}`};
+
+    color: ${isSelected ? dropdown.selected.option.font.color : dropdown.option.font.color};
+
+    ${highlighted ? `background-color: ${dropdown.hover.option.backgroundColor};` : ""}
+
+    &:hover {
+      background-color: ${dropdown.hover.option.backgroundColor};
+    }
+
+    &:last-child {
+      border-radius:
+        ${dropdown.option.border.radius.topLeft}px
+        ${dropdown.option.border.radius.topRight}px
+        ${dropdown.option.border.radius.bottomRight}px
+        ${dropdown.option.border.radius.bottomLeft}px;
+    }
+  `}
+`;
+const ArrowIcon = styled((_a) => {
+  var _b = _a, { isOpen, selected } = _b, props = __objRest(_b, ["isOpen", "selected"]);
+  return /* @__PURE__ */ jsx(ChevronDown, __spreadValues({ width: 20, height: 20 }, props));
+})`
+  ${({
+  isOpen,
+  selected,
+  disabled,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    fill: ${dropdown.arrow.fill};
+    ${disabled ? `fill: ${dropdown.disabled.arrow.fill};` : ""};
+    ${selected && !disabled ? `fill: ${dropdown.selected.arrow.fill};` : ""};
+    transform: rotate(${isOpen ? "180deg" : "0"});
+  `}
+`;
+const Dropdown = React.forwardRef(
+  (_c, ref) => {
+    var _d = _c, { error, label, disabled, full, options, onChange, isMaxHeight } = _d, rest = __objRest(_d, ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"]);
+    const inputRef = ref || React.useRef(null);
+    const selectedOption = options.find((item) => item.selected === true);
+    const [localSelectedItem, setLocalSelectedItem] = useState(selectedOption);
+    useEffect(() => {
+      setLocalSelectedItem(selectedOption);
+    }, [options]);
+    const onLocalChange = useCallback(
+      (opt) => {
+        setLocalSelectedItem(opt);
+        onChange(opt);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsx(
+      Downshift,
+      {
+        initialSelectedItem: selectedOption,
+        selectedItemChanged: (prevItem, item) => prevItem !== item,
+        itemToString: (item) => item ? item.label : "",
+        onChange: onLocalChange,
+        selectedItem: localSelectedItem,
+        children: ({
+          getInputProps,
+          getItemProps,
+          getRootProps,
+          getMenuProps,
+          getToggleButtonProps,
+          selectedItem,
+          highlightedIndex,
+          isOpen
+        }) => /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues(__spreadValues({ full }, getRootProps()), rest), { children: [
+          /* @__PURE__ */ jsxs(
+            Selector,
+            {
+              isOpen,
+              disabled,
+              error,
+              selected: selectedItem !== null,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Field,
+                  __spreadValues({
+                    readOnly: true,
+                    disabled,
+                    selected: selectedItem !== null,
+                    isOpen,
+                    label,
+                    full,
+                    ref: inputRef,
+                    includeAriaAttributes: false
+                  }, getInputProps())
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  __spreadProps(__spreadValues({
+                    isOpen,
+                    disabled
+                  }, getToggleButtonProps()), {
+                    children: /* @__PURE__ */ jsx(
+                      ArrowIcon,
+                      {
+                        isOpen,
+                        selected: selectedItem !== null,
+                        disabled
+                      }
+                    )
+                  })
+                )
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx(
+            OptionsList,
+            __spreadProps(__spreadValues({
+              isMaxHeight,
+              selected: selectedItem !== null
+            }, getMenuProps()), {
+              children: options.map((item, index) => /* @__PURE__ */ jsx(
+                Option,
+                __spreadProps(__spreadValues({}, getItemProps({
+                  key: item.value,
+                  item,
+                  isSelected: selectedItem === item,
+                  highlighted: highlightedIndex === index
+                })), {
+                  children: item.label
+                })
+              ))
+            })
+          ),
+          error && /* @__PURE__ */ jsx(Helper, { error })
+        ] }))
+      }
+    );
+  }
+);
 Dropdown.propTypes = {
   label: string,
   disabled: bool,
   error: string,
   full: bool,
-
   /** { label (string), value (string or number), selected: (boolean) } */
-  options: arrayOf(shape({
-    label: string,
-    value: oneOfType([string, number]),
-    selected: bool
-  })).isRequired,
+  options: arrayOf(
+    shape({
+      label: string,
+      value: oneOfType([string, number]),
+      selected: bool
+    })
+  ).isRequired,
   onChange: func,
   isMaxHeight: bool
 };
 Dropdown.defaultProps = {
-  label: '',
-  error: undefined,
+  label: "",
+  error: void 0,
   full: false,
   disabled: false,
-  onChange: function onChange() {},
+  onChange: () => {
+  },
   isMaxHeight: true
 };
-export default Dropdown;
+var Dropdown_default = Dropdown;
+export {
+  Dropdown_default as default
+};