@stokr/components-library 3.0.36 → 3.0.38

package/dist/components/Input/Select.js

@@ -1,105 +1,165 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import ReactSelect, { components } from "react-select";
-import CreatableSelect from "react-select/creatable";
 import { Wrapper, Label } from "./Input.styles.js";
+import { useState, useMemo } from "react";
+import CreatableSelect from "react-select/creatable";
+import ReactSelect, { components } from "react-select";
 import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
-import { SelectContainer, SelectOption, SelectMenu, SelectControl, SelectMenuList, SelectIcon } from "./Select.styles.js";
+import { SelectContainer, SelectMenu, SelectControl, SelectedChipsWrapper, SelectedChipsTitle, SelectedChipsList, SelectedChip, SelectedChipLabel, SelectedChipRemove, SelectOption, OptionRow, OptionLabel, OptionCheckbox, SelectMenuList, SelectIcon, OptionIcon } from "./Select.styles.js";
 import { SelectValueContainer, SelectWrapper } from "./Select.styles.js";
-const DropdownIndicator = (props) => {
-  const { selectProps } = props;
-  return /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(SelectIcon, { isMenuOpen: selectProps.menuIsOpen }) });
+const renderIcon = (icon) => {
+  if (!icon) return null;
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ jsx(OptionIcon, { children: /* @__PURE__ */ jsx("img", { src: icon, alt: "" }) });
+  }
+  return /* @__PURE__ */ jsx(OptionIcon, { children: icon });
 };
+const buildOptionStyle = (multiple) => (_base, state) => {
+  if (multiple) {
+    return {
+      cursor: "pointer",
+      padding: "10px 14px",
+      fontSize: 13,
+      lineHeight: "18px",
+      border: 0,
+      color: "#202020",
+      transition: "background-color 0.12s ease",
+      fontWeight: state.isSelected ? 600 : 400,
+      backgroundColor: state.isSelected ? "rgba(0, 80, 202, 0.08)" : state.isFocused ? "#f5f7fb" : "transparent"
+    };
+  }
+  return {
+    ...SelectOption,
+    cursor: "pointer",
+    fontWeight: state.isSelected || state.isFocused ? "bold" : "normal"
+  };
+};
+const DropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(SelectIcon, { isMenuOpen: props.selectProps.menuIsOpen }) });
 DropdownIndicator.propTypes = {
   selectProps: PropTypes.instanceOf(Object).isRequired
 };
-const SelectMenuListWithScroll = (props) => {
+const ScrollableMenuList = (props) => {
   const { children, selectProps } = props;
   const { maxMenuHeight = 300 } = selectProps;
   return /* @__PURE__ */ jsx(SelectMenuList, { autoHeight: true, autoHeightMax: maxMenuHeight, fullHeight: true, children });
 };
-SelectMenuListWithScroll.propTypes = {
-  children: PropTypes.node.isRequired
+ScrollableMenuList.propTypes = {
+  children: PropTypes.node.isRequired,
+  selectProps: PropTypes.instanceOf(Object).isRequired
+};
+const ControlWithDataCy = (props) => {
+  const cy = props.selectProps?.dataCy;
+  if (!cy) return /* @__PURE__ */ jsx(components.Control, { ...props });
+  return /* @__PURE__ */ jsx(components.Control, { ...props, innerProps: { ...props.innerProps, "data-cy": cy } });
+};
+ControlWithDataCy.propTypes = {
+  innerProps: PropTypes.instanceOf(Object),
+  selectProps: PropTypes.instanceOf(Object).isRequired
+};
+const SingleOption = (props) => /* @__PURE__ */ jsx(components.Option, { ...props, children: /* @__PURE__ */ jsxs(OptionRow, { children: [
+  renderIcon(props.data?.icon),
+  /* @__PURE__ */ jsx(OptionLabel, { children: props.label })
+] }) });
+SingleOption.propTypes = {
+  data: PropTypes.instanceOf(Object),
+  label: PropTypes.node
+};
+const MultiOption = (props) => /* @__PURE__ */ jsx(components.Option, { ...props, children: /* @__PURE__ */ jsxs(OptionRow, { children: [
+  /* @__PURE__ */ jsx(OptionCheckbox, { checked: props.isSelected, children: props.isSelected ? "✓" : "" }),
+  renderIcon(props.data?.icon),
+  /* @__PURE__ */ jsx(OptionLabel, { children: props.label })
+] }) });
+MultiOption.propTypes = {
+  data: PropTypes.instanceOf(Object),
+  label: PropTypes.node,
+  isSelected: PropTypes.bool
+};
+const SingleValueWithIcon = (props) => /* @__PURE__ */ jsx(components.SingleValue, { ...props, children: /* @__PURE__ */ jsxs(OptionRow, { children: [
+  renderIcon(props.data?.icon),
+  /* @__PURE__ */ jsx(OptionLabel, { children: props.data?.label })
+] }) });
+SingleValueWithIcon.propTypes = {
+  data: PropTypes.instanceOf(Object).isRequired
 };
-function createControlWithDataCy(dataCy) {
-  return function ControlWithDataCy(ctlProps) {
-    return /* @__PURE__ */ jsx(components.Control, { ...ctlProps, innerProps: { ...ctlProps.innerProps, "data-cy": dataCy } });
-  };
-}
 const Select = (props) => {
   const {
     id,
     name,
     label = "",
     options,
-    search = false,
+    value = "",
+    placeholder = "",
     error = false,
     touched = false,
-    value = "",
-    disabled,
-    menuHeight,
+    disabled = false,
+    search = false,
     creatable = false,
-    formatCreateLabel = null,
+    multiple = false,
+    menuHeight,
+    selectedLabel = "Selected",
+    formatCreateLabel,
     dataCy,
+    onChange,
+    onBlur,
+    onFocus,
     ...otherProps
   } = props;
-  const [labelUp, setLabelUp] = useState(!!value);
   const [hasFocus, setHasFocus] = useState(false);
-  useEffect(() => {
-    setLabelUp(hasFocus || !!value);
-  }, [hasFocus, value]);
-  const onFocus = (_e) => {
-    props.onFocus?.({ name, value });
-    if (search || creatable) {
-      setHasFocus(true);
-    }
+  const handleFocus = () => {
+    onFocus?.({ name, value });
+    setHasFocus(true);
   };
-  const onBlur = (_e) => {
-    props.onBlur?.({ name, value });
-    setTimeout(() => {
-      setHasFocus(false);
-    }, 1);
+  const handleBlur = () => {
+    onBlur?.({ name, value });
+    setTimeout(() => setHasFocus(false), 0);
   };
-  const onChange = (selectedOption) => {
-    props.onChange?.({
-      name,
-      value: selectedOption.value
-    });
-    setTimeout(() => {
-      setHasFocus(true);
-    }, 1);
+  const handleChange = (selected) => {
+    if (multiple) {
+      const arr = Array.isArray(selected) ? selected : [];
+      onChange?.({ name, value: arr.map((o) => o.value) });
+      return;
+    }
+    onChange?.({ name, value: selected?.value ?? "" });
+  };
+  const removeValue = (val) => {
+    const arr = Array.isArray(value) ? value.filter((v) => v !== val) : [];
+    onChange?.({ name, value: arr });
   };
   const SelectComponent = creatable ? CreatableSelect : ReactSelect;
-  const selectStyles = {
-    control: () => SelectControl,
-    menu: (baseStyle) => ({
-      ...baseStyle,
-      marginTop: 0,
-      zIndex: 1e3,
-      SelectMenu
+  const selectStyles = useMemo(
+    () => ({
+      control: () => SelectControl,
+      menu: (base) => ({ ...base, marginTop: 0, zIndex: 1e3, ...SelectMenu }),
+      option: buildOptionStyle(multiple),
+      selectContainer: () => SelectContainer,
+      valueContainer: (base) => ({ ...base, padding: 0 })
     }),
-    option: (baseStyle, state) => ({
-      fontWeight: state.isSelected || state.isFocused ? "bold" : "normal",
-      cursor: "pointer",
-      ...SelectOption
+    [multiple]
+  );
+  const selectComponents = useMemo(
+    () => ({
+      DropdownIndicator,
+      IndicatorSeparator: null,
+      MenuList: ScrollableMenuList,
+      Option: multiple ? MultiOption : SingleOption,
+      SingleValue: SingleValueWithIcon,
+      ...dataCy && { Control: ControlWithDataCy }
     }),
-    selectContainer: () => SelectContainer,
-    valueContainer: (baseStyle) => ({
-      ...baseStyle,
-      padding: 0
-    })
-  };
-  const selectComponents = {
-    DropdownIndicator,
-    IndicatorSeparator: null,
-    MenuList: SelectMenuListWithScroll,
-    ...dataCy ? { Control: createControlWithDataCy(dataCy) } : {}
-  };
-  const currentValue = creatable ? options?.find((option) => option.value === value) || (value ? { value, label: value } : null) : options?.find((option) => option.value === value);
+    [multiple, dataCy]
+  );
+  const currentValue = useMemo(() => {
+    if (multiple) {
+      const arr = Array.isArray(value) ? value : [];
+      return arr.map((v) => options?.find((o) => o.value === v)).filter(Boolean);
+    }
+    if (creatable) {
+      return options?.find((o) => o.value === value) || (value ? { value, label: value } : null);
+    }
+    return options?.find((o) => o.value === value) || null;
+  }, [multiple, creatable, value, options]);
   return /* @__PURE__ */ jsxs(Wrapper, { children: [
     /* @__PURE__ */ jsx(IoniconsStyles, {}),
-    label && /* @__PURE__ */ jsx(Label, { isUp: labelUp, active: hasFocus, error: error && touched, htmlFor: id, children: label }),
+    label && /* @__PURE__ */ jsx(Label, { isUp: Boolean(label), active: hasFocus, error: error && touched, htmlFor: id, children: label }),
     /* @__PURE__ */ jsx(
       SelectComponent,
       {
@@ -107,44 +167,86 @@ const Select = (props) => {
         id,
         name,
         options,
-        isDisabled: disabled,
-        onChange,
-        onBlur,
-        onFocus,
         value: currentValue,
-        placeholder: "",
-        isSearchable: creatable || search,
+        placeholder,
+        isMulti: multiple,
+        isDisabled: disabled,
+        isSearchable: search,
+        isClearable: !multiple,
+        backspaceRemovesValue: !multiple,
+        controlShouldRenderValue: !multiple,
+        closeMenuOnSelect: !multiple,
+        hideSelectedOptions: false,
         maxMenuHeight: menuHeight,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         styles: selectStyles,
         components: selectComponents,
+        dataCy,
         ...creatable && {
-          formatCreateLabel: formatCreateLabel || ((inputValue) => `Create "${inputValue}"`)
+          formatCreateLabel: formatCreateLabel || ((input) => `Create "${input}"`)
         }
       }
-    )
+    ),
+    multiple && currentValue.length > 0 && /* @__PURE__ */ jsxs(SelectedChipsWrapper, { "data-cy": dataCy ? `${dataCy}-chips` : void 0, children: [
+      /* @__PURE__ */ jsxs(SelectedChipsTitle, { children: [
+        selectedLabel,
+        " (",
+        currentValue.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(SelectedChipsList, { children: currentValue.map((opt) => /* @__PURE__ */ jsxs(SelectedChip, { children: [
+        renderIcon(opt.icon),
+        /* @__PURE__ */ jsx(SelectedChipLabel, { children: opt.label }),
+        /* @__PURE__ */ jsx(
+          SelectedChipRemove,
+          {
+            onClick: () => removeValue(opt.value),
+            "aria-label": `Remove ${typeof opt.label === "string" ? opt.label : opt.value}`,
+            disabled,
+            children: "✕"
+          }
+        )
+      ] }, opt.key ?? opt.value)) })
+    ] })
   ] });
 };
 Select.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   label: PropTypes.string,
-  error: PropTypes.bool,
-  touched: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** string|number for single mode, array for multi mode */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+  ]),
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      key: PropTypes.string.isRequired,
+      key: PropTypes.string,
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+      /** URL string (rendered as <img>) or a React node (e.g. an SVG flag) shown left of the label */
+      icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
     })
   ).isRequired,
+  placeholder: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  disabled: PropTypes.bool,
   search: PropTypes.bool,
   creatable: PropTypes.bool,
+  /** Multi-select: checkbox options + chips list rendered below the field. */
+  multiple: PropTypes.bool,
+  menuHeight: PropTypes.number,
+  /** Heading shown above the chips list in multi mode (default: "Selected"). */
+  selectedLabel: PropTypes.string,
   formatCreateLabel: PropTypes.func,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
-  /** Playwright / autocapture: selector on the react-select control */
+  /** Playwright / autocapture: `data-cy` selector on the react-select control. */
   dataCy: PropTypes.string
 };
 export {

package/dist/components/Input/Select.styles.js

@@ -96,6 +96,106 @@ const SelectIcon = styled.i.withConfig({
     `}
   }
 `;
+const OptionRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+`;
+const OptionCheckbox = styled.span.withConfig({
+  shouldForwardProp: (prop) => !["checked"].includes(prop)
+})`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid ${({ checked }) => checked ? "#0050ca" : "#c1c1c1"};
+  border-radius: 3px;
+  background-color: ${({ checked }) => checked ? "#0050ca" : "#fff"};
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+`;
+const OptionIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 14px;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-radius: 2px;
+
+  & > img,
+  & > svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;
+const OptionLabel = styled.span`
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const SelectedChipsWrapper = styled.div`
+  margin-top: 18px;
+`;
+const SelectedChipsTitle = styled.div`
+  font-size: 11px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: #666;
+  margin-bottom: 8px;
+`;
+const SelectedChipsList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+const SelectedChip = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid #e1e1e1;
+  border-radius: 20px;
+  background-color: #fff;
+  font-size: 12px;
+  line-height: 16px;
+  color: #202020;
+`;
+const SelectedChipLabel = styled.span`
+  white-space: nowrap;
+`;
+const SelectedChipRemove = styled.button.attrs({ type: "button" })`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  margin: 0 0 0 2px;
+  cursor: pointer;
+  color: #888;
+  font-size: 14px;
+  line-height: 1;
+  width: 14px;
+  height: 14px;
+
+  &:hover {
+    color: #202020;
+  }
+`;
 const SelectWrapper = styled.div.withConfig({
   shouldForwardProp: (props) => !["minWidth", "noMargin"].includes(props)
 })`
@@ -137,6 +237,10 @@ const SelectWrapper = styled.div.withConfig({
   }
 `;
 export {
+  OptionCheckbox,
+  OptionIcon,
+  OptionLabel,
+  OptionRow,
   SelectContainer,
   SelectControl,
   SelectIcon,
@@ -144,5 +248,11 @@ export {
   SelectMenuList,
   SelectOption,
   SelectValueContainer,
-  SelectWrapper
+  SelectWrapper,
+  SelectedChip,
+  SelectedChipLabel,
+  SelectedChipRemove,
+  SelectedChipsList,
+  SelectedChipsTitle,
+  SelectedChipsWrapper
 };

package/dist/components/LearnMoreSection/LearnMore.js

@@ -13,8 +13,8 @@ import { getMedia } from "../../styles/rwd.js";
 import "../LearnMorePage/LearnMore.js";
 import { Container, TitleContainer, SidebarSubHeading, TabTitle, Arrow, TabNav, TabArrow } from "./LearnMore.styles.js";
 import stdin_default$1 from "./LearnMoreItem.js";
-import { learnMoreCategoryPropTypes, learnMorePostPropTypes } from "../LearnMorePage/LearnMore.propTypes.js";
 import { Tab } from "../Tabs/Tabs.styles.js";
+import { learnMoreCategoryPropTypes, learnMorePostPropTypes } from "../LearnMorePage/LearnMore.propTypes.js";
 class LearnMoreSection extends PureComponent {
   state = {
     activeTab: 0,

package/dist/components/MainMenu/MainMenu.js

@@ -6,9 +6,9 @@ import { StyledMainMenu, MainMenuContainer, MainMenuOptions, MainMenuOption, Exp
 import { Button } from "../Button/Button.styles.js";
 import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
 import { getConfig } from "../../runtime-config.js";
-import { navigateToHref } from "../../routing/navigate-app.js";
 import { withRouter } from "../../utils/withRouter.js";
 import { hasLoggedInSession } from "../../utils/user-identity.js";
+import { navigateToHref } from "../../routing/navigate-app.js";
 class MainMenuClass extends PureComponent {
   state = {
     isSettingsActive: false,

package/dist/components/Modal/NewVentureModal/NewVentureModal.js

@@ -16,8 +16,8 @@ import stdin_default$1 from "../../Checkbox/Checkbox.js";
 import { Button } from "../../Button/Button.styles.js";
 import { useNewVentureForm } from "../../../hooks/useNewVentureForm.js";
 import { getConfig } from "../../../runtime-config.js";
-import { navigateToHref } from "../../../routing/navigate-app.js";
 import { ModalInner } from "../Modal.styles.js";
+import { navigateToHref } from "../../../routing/navigate-app.js";
 import { FormField, FormError } from "../../Form/Form.styles.js";
 const defaultProject = {
   _id: "",

package/dist/components/Modal/PaymentModal.js

@@ -56,8 +56,7 @@ const PaymentModal = ({
   formatAmountInLink = true,
   transactionCostMessage,
   paymentLink: paymentLinkProp,
-  showKYCWarningBox = true,
-  ...props
+  showKYCWarningBox = true
 }) => {
   const { projectData, tokenAmount, tokenSymbol, createdAt, tokenDecimals = 2, GAID, currencyType } = data;
   let newTokenAmount = tokenAmount;

package/dist/components/Newsletter/Newsletter.styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import rwd, { rwdMax } from "../../styles/rwd.js";
-import { BASE_MARGIN, MAX_WIDTH, GRAY_BASE_HEX, RED_BASE_HEX, WHITE_HEX } from "../../constants/style.js";
+import { RED_BASE_HEX, BASE_MARGIN, MAX_WIDTH, GRAY_BASE_HEX, WHITE_HEX } from "../../constants/style.js";
 import { Button } from "../Button/Button.styles.js";
 const withMarginsCss = css`
   padding-left: ${BASE_MARGIN * 2}px;

package/dist/components/RefreshButton/RefreshButton.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import "react";
 import PropTypes from "prop-types";
 import stdin_default$1 from "../SvgIcons/RefreshSvg.js";
-import "../SvgIcons/SocialInstagram.js";
 import { StyledButton, IconWrap, Content } from "./RefreshButton.styles.js";
 const RefreshButton = (props) => {
   const { children } = props;

package/dist/components/Snackbar/Snackbar.styles.js

@@ -1,4 +1,4 @@
-import styled, { keyframes, css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { colors } from "../../styles/colors.js";
 const slideIn = keyframes`
   from {

package/dist/components/TabsNav/TabsNav.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { default as default2 } from "./TabNav.js";
 import PropTypes from "prop-types";
 import { StyledTabs, Scroll, TabsWrapper } from "./TabsNav.styles.js";
 import { LinkText, StyledTab } from "./TabsNav.styles.js";
@@ -23,7 +22,6 @@ export {
   Scroll,
   StyledTab,
   StyledTabs,
-  default2 as TabNav,
   TabsNav,
   TabsWrapper,
   stdin_default as default