@stokr/components-library 3.0.16 → 3.0.18

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

@@ -0,0 +1,92 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+const SearchInputContainer = styled.div`
+  width: 100%;
+  display: flex;
+`;
+const SearchInputWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["variant", "disabled"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-radius: 8px;
+  padding: 0 16px;
+  min-height: 40px;
+  transition: all 0.2s ease;
+
+  /* Default filled variant */
+  background-color: ${(props) => props.variant === "outlined" ? "transparent" : colors.grey3};
+  border: ${(props) => props.variant === "outlined" ? `1px solid ${colors.lightGrey}` : "1px solid transparent"};
+
+  ${(props) => props.disabled && `
+    opacity: 0.6;
+    cursor: not-allowed;
+  `}
+
+  &:focus-within {
+    background-color: ${(props) => props.variant === "outlined" ? "transparent" : colors.white};
+    border-color: ${(props) => props.variant === "outlined" ? colors.grey2 : "transparent"};
+    box-shadow: ${(props) => props.variant === "outlined" ? "none" : `0 0 0 2px ${colors.lightGrey}`};
+  }
+
+  &:hover {
+    border-color: ${(props) => props.variant === "outlined" ? colors.grey2 : "transparent"};
+  }
+`;
+const SearchIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  color: ${colors.grey2};
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  ${SearchInputWrapper}:focus-within & {
+    color: ${colors.black};
+  }
+`;
+const SearchInputField = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  color: ${colors.black};
+  width: 100%;
+  min-width: 0;
+  letter-spacing: 0.6px;
+
+  &::placeholder {
+    color: ${colors.grey2};
+    opacity: 1;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+`;
+export {
+  SearchIconWrapper,
+  SearchInputContainer,
+  SearchInputField,
+  SearchInputWrapper
+};

package/dist/components/Input/Select.js

@@ -0,0 +1,151 @@
+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 { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+import { SelectContainer, SelectOption, SelectMenu, SelectControl, SelectMenuList, SelectIcon } 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 }) });
+};
+DropdownIndicator.propTypes = {
+  selectProps: PropTypes.instanceOf(Object).isRequired
+};
+const SelectMenuListWithScroll = (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
+};
+const Select = (props) => {
+  const {
+    id,
+    name,
+    label = "",
+    options,
+    search = false,
+    error = false,
+    touched = false,
+    value = "",
+    disabled,
+    menuHeight,
+    creatable = false,
+    formatCreateLabel = null,
+    ...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 onBlur = (_e) => {
+    props.onBlur?.({ name, value });
+    setTimeout(() => {
+      setHasFocus(false);
+    }, 1);
+  };
+  const onChange = (selectedOption) => {
+    props.onChange?.({
+      name,
+      value: selectedOption.value
+    });
+    setTimeout(() => {
+      setHasFocus(true);
+    }, 1);
+  };
+  const SelectComponent = creatable ? CreatableSelect : ReactSelect;
+  const selectStyles = {
+    control: () => SelectControl,
+    menu: (baseStyle) => ({
+      ...baseStyle,
+      marginTop: 0,
+      zIndex: 1e3,
+      SelectMenu
+    }),
+    option: (baseStyle, state) => ({
+      fontWeight: state.isSelected || state.isFocused ? "bold" : "normal",
+      cursor: "pointer",
+      ...SelectOption
+    }),
+    selectContainer: () => SelectContainer,
+    valueContainer: (baseStyle) => ({
+      ...baseStyle,
+      padding: 0
+    })
+  };
+  const selectComponents = {
+    DropdownIndicator,
+    IndicatorSeparator: null,
+    MenuList: SelectMenuListWithScroll
+  };
+  const currentValue = creatable ? options?.find((option) => option.value === value) || (value ? { value, label: value } : null) : options?.find((option) => option.value === value);
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    /* @__PURE__ */ jsx(IoniconsStyles, {}),
+    label && /* @__PURE__ */ jsx(Label, { isUp: labelUp, active: hasFocus, error: error && touched, htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      SelectComponent,
+      {
+        ...otherProps,
+        id,
+        name,
+        options,
+        isDisabled: disabled,
+        onChange,
+        onBlur,
+        onFocus,
+        value: currentValue,
+        placeholder: "",
+        isSearchable: creatable || search,
+        maxMenuHeight: menuHeight,
+        styles: selectStyles,
+        components: selectComponents,
+        ...creatable && {
+          formatCreateLabel: formatCreateLabel || ((inputValue) => `Create "${inputValue}"`)
+        }
+      }
+    )
+  ] });
+};
+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]),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+    })
+  ).isRequired,
+  search: PropTypes.bool,
+  creatable: PropTypes.bool,
+  formatCreateLabel: PropTypes.func,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func
+};
+export {
+  Select,
+  SelectContainer,
+  SelectControl,
+  SelectIcon,
+  SelectMenu,
+  SelectMenuList,
+  SelectOption,
+  SelectValueContainer,
+  SelectWrapper
+};

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

@@ -0,0 +1,148 @@
+import styled, { css } from "styled-components";
+import { TrackV } from "../ComponentScroll/ComponentScroll.styles.js";
+import stdin_default from "../ComponentScroll/ComponentScroll.js";
+const SelectControl = css`
+  &&& {
+    z-index: 10 !important;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 15px 0;
+    padding-bottom: 5px;
+    border-radius: 0;
+    box-shadow: none;
+    border: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #e1e1e1;
+    color: #202020;
+    background-color: transparent;
+    transition: border-color 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: none;
+      border-top-color: transparent;
+      border-bottom-color: #0050ca;
+    }
+
+    &.active {
+      z-index: 12 !important;
+    }
+  }
+`;
+const SelectMenu = css`
+  margin-top: -1px;
+  border-radius: 0;
+  box-shadow: none;
+  border: 0;
+  border-top: 1px solid #e1e1e1 !important;
+  border-bottom: 1px solid #e1e1e1 !important;
+  background-color: #ffffff;
+  opacity: 999 !important;
+`;
+const SelectMenuList = styled(stdin_default)`
+  &&& {
+    overflow: hidden;
+
+    ${TrackV} {
+      right: 6px;
+    }
+  }
+`;
+const SelectOption = css`
+  cursor: pointer;
+  padding: 8px 0 !important;
+  padding-left: 4px !important;
+  font-size: 12px;
+  line-height: 18px;
+  border: 0;
+  background-color: transparent;
+  color: #202020;
+
+  &:hover {
+    background-color: transparent;
+    font-weight: bold;
+  }
+`;
+const SelectContainer = css`
+  z-index: 100;
+  ${(props) => props.selectProps.menuIsOpen && `
+    z-index: 150 !important;
+  `}
+`;
+const SelectValueContainer = css`
+  &&& {
+    padding-left: 0;
+    margin-left: -2px;
+  }
+`;
+const SelectIcon = styled.i.withConfig({
+  shouldForwardProp: (props) => !["isMenuOpen"].includes(props)
+}).attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  &&& {
+    transition: 0.3s transform;
+    transform: rotate(0);
+    color: #202020;
+
+    ${(props) => props.isMenuOpen && `
+      transform: rotate(180deg);
+    `}
+  }
+`;
+const SelectWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["minWidth", "noMargin"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 24px;
+
+  ${(props) => props.minWidth && `
+    min-width: ${props.minWidth};
+  `}
+
+  ${(props) => props.noMargin && `
+    margin-left: 0;
+  `}
+
+  &&& ${SelectControl} {
+    height: 24px;
+    font-weight: normal;
+    font-size: 11px;
+    line-height: 18px;
+    padding: 3px 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  &&& ${SelectMenu} {
+    left: 0;
+    right: 0;
+    width: auto;
+    margin: -6px -12px;
+    margin-top: 0;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+    border: 0;
+    padding: 6px 12px;
+  }
+
+  &&& ${SelectValueContainer} {
+    top: 0;
+  }
+`;
+export {
+  SelectContainer,
+  SelectControl,
+  SelectIcon,
+  SelectMenu,
+  SelectMenuList,
+  SelectOption,
+  SelectValueContainer,
+  SelectWrapper
+};

package/dist/components/Input/TableFilterDropdown.js

@@ -0,0 +1,247 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import SvgCheckIcon from "../../static/images/check-icon.svg.js";
+import SvgFilterIcon from "../../static/images/filter-icon.svg.js";
+import { CheckboxWrapperDiv, CheckboxDiv, OptionLabel } from "./MultiSelect.js";
+const TriggerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+`;
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  position: relative;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  svg path,
+  svg line,
+  svg circle,
+  svg rect {
+    stroke: currentColor;
+  }
+`;
+const ActiveDot = styled.div`
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 6px;
+  height: 6px;
+  background-color: ${colors.blue};
+  border-radius: 50%;
+`;
+const DropdownContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+const DropdownMenu = styled.div`
+  position: fixed;
+  z-index: 10000;
+  min-width: 150px;
+  max-width: 300px;
+  background-color: ${colors.white};
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid ${colors.lightGrey};
+  overflow: hidden;
+`;
+const OptionsList = styled.div`
+  max-height: 300px;
+  overflow-y: auto;
+`;
+const ClearAllOption = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 16px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  color: ${colors.blue};
+  border-top: 1px solid ${colors.lightGrey};
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: ${colors.grey};
+  }
+`;
+const TableFilterDropdown = ({
+  label,
+  options,
+  value = [],
+  onChange = () => {
+  },
+  icon: CustomIcon,
+  minWidth = 150,
+  maxWidth = 300,
+  menuAlign = "left",
+  menuTop = 8,
+  showClearAll = false,
+  clearAllText = "Clear all",
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const hasActiveFilters = value.length > 0;
+  const updateMenuPosition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const menuWidth = minWidth || 150;
+    let left = triggerRect.left;
+    if (menuAlign === "right") {
+      left = triggerRect.right - menuWidth;
+    }
+    const viewportWidth = window.innerWidth;
+    if (left + menuWidth > viewportWidth - 10) {
+      left = viewportWidth - menuWidth - 10;
+    }
+    if (left < 10) {
+      left = 10;
+    }
+    setMenuPosition({
+      top: triggerRect.bottom + menuTop,
+      left
+    });
+  }, [menuAlign, menuTop, minWidth]);
+  useEffect(() => {
+    if (isOpen) {
+      updateMenuPosition();
+      const handleScrollOrResize = () => {
+        updateMenuPosition();
+      };
+      window.addEventListener("scroll", handleScrollOrResize, true);
+      window.addEventListener("resize", handleScrollOrResize);
+      return () => {
+        window.removeEventListener("scroll", handleScrollOrResize, true);
+        window.removeEventListener("resize", handleScrollOrResize);
+      };
+    }
+  }, [isOpen, updateMenuPosition]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (event) => {
+      const clickedOutsideContainer = containerRef.current && !containerRef.current.contains(event.target);
+      const clickedOutsideMenu = menuRef.current && !menuRef.current.contains(event.target);
+      if (clickedOutsideContainer && clickedOutsideMenu) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  const handleTriggerClick = useCallback((e) => {
+    e.stopPropagation();
+    setIsOpen((prev) => !prev);
+  }, []);
+  const handleOptionClick = useCallback(
+    (optionValue, e) => {
+      e.stopPropagation();
+      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+      onChange?.(newValue);
+    },
+    [value, onChange]
+  );
+  const handleClearAll = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+  const IconComponent = CustomIcon || SvgFilterIcon;
+  const renderMenu = () => {
+    if (!isOpen) return null;
+    const menu = /* @__PURE__ */ jsxs(
+      DropdownMenu,
+      {
+        ref: menuRef,
+        style: {
+          top: menuPosition.top,
+          left: menuPosition.left,
+          minWidth: minWidth || 150,
+          maxWidth: maxWidth || 300
+        },
+        children: [
+          /* @__PURE__ */ jsx(OptionsList, { children: options.map((option) => {
+            const isSelected = value.includes(option.value);
+            return /* @__PURE__ */ jsxs(CheckboxWrapperDiv, { onClick: (e) => handleOptionClick(option.value, e), children: [
+              /* @__PURE__ */ jsx(CheckboxDiv, { isSelected, children: /* @__PURE__ */ jsx(SvgCheckIcon, {}) }),
+              /* @__PURE__ */ jsx(OptionLabel, { children: option.label })
+            ] }, option.value);
+          }) }),
+          showClearAll && hasActiveFilters && /* @__PURE__ */ jsx(ClearAllOption, { onClick: handleClearAll, children: clearAllText })
+        ]
+      }
+    );
+    return createPortal(menu, document.body);
+  };
+  return /* @__PURE__ */ jsxs(DropdownContainer, { ref: containerRef, ...props, children: [
+    /* @__PURE__ */ jsxs(TriggerContainer, { ref: triggerRef, onClick: handleTriggerClick, "data-clickable": "true", children: [
+      label && /* @__PURE__ */ jsx("span", { children: label }),
+      /* @__PURE__ */ jsxs(IconWrapper, { children: [
+        /* @__PURE__ */ jsx(IconComponent, {}),
+        hasActiveFilters && /* @__PURE__ */ jsx(ActiveDot, {})
+      ] })
+    ] }),
+    renderMenu()
+  ] });
+};
+TableFilterDropdown.propTypes = {
+  /** Label text displayed next to the filter icon */
+  label: PropTypes.string,
+  /** Array of options to display */
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+    })
+  ).isRequired,
+  /** Array of selected values */
+  value: PropTypes.arrayOf(PropTypes.string),
+  /** Callback when selection changes: (newValues) => void */
+  onChange: PropTypes.func,
+  /** Custom icon component (defaults to FilterIcon) */
+  icon: PropTypes.elementType,
+  /** Minimum width of the dropdown menu */
+  minWidth: PropTypes.number,
+  /** Maximum width of the dropdown menu */
+  maxWidth: PropTypes.number,
+  /** Alignment of the dropdown menu */
+  menuAlign: PropTypes.oneOf(["left", "right"]),
+  /** Top offset for the dropdown menu in pixels (default: 8) */
+  menuTop: PropTypes.number,
+  /** Show "Clear all" option at the bottom of the list */
+  showClearAll: PropTypes.bool,
+  /** Custom text for the "Clear all" option */
+  clearAllText: PropTypes.string
+};
+export {
+  TableFilterDropdown
+};

package/dist/components/Input/Textarea.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { TextareaWrapper, StyledTextarea } from "./Textarea.styles.js";
+const Textarea = ({
+  id,
+  name,
+  placeholder,
+  value,
+  error,
+  touched,
+  readOnly,
+  disabled,
+  rows,
+  minHeight,
+  wrapperStyle,
+  onChange,
+  onBlur,
+  onFocus,
+  ...restProps
+}) => {
+  const handleChange = (e) => {
+    onChange?.(e);
+  };
+  const handleBlur = (e) => {
+    onBlur?.(e);
+  };
+  const handleFocus = (e) => {
+    onFocus?.(e);
+  };
+  return /* @__PURE__ */ jsx(TextareaWrapper, { style: wrapperStyle, children: /* @__PURE__ */ jsx(
+    StyledTextarea,
+    {
+      id,
+      name,
+      value,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      readOnly,
+      placeholder,
+      disabled,
+      rows,
+      minHeight,
+      error: error && touched,
+      ...restProps
+    }
+  ) });
+};
+export {
+  Textarea
+};