@redocly/theme 0.41.0-rc.4 → 0.42.0

package/src/components/Select/SelectInput.tsx

@@ -1,201 +0,0 @@
-import styled from 'styled-components';
-import React, { useRef } from 'react';
-
-import type { SelectOption } from '@redocly/theme/core/types/select';
-
-import { Tag } from '@redocly/theme/components/Tag/Tag';
-import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
-import { Button } from '@redocly/theme/components/Button/Button';
-
-type SelectInputProps<T> = {
-  id?: string;
-  selectedOptions: SelectOption<T>[];
-  searchValue: any;
-  stickyValue: any;
-  onlyIcon?: boolean;
-  icon?: React.ReactNode;
-  customIcon?: React.ReactNode;
-  placeholder?: string;
-  multiple?: boolean;
-  searchable?: boolean;
-  clearable?: boolean;
-  clearHandler?: (value?: any) => void;
-  inputBlurHandler?: (e?: any) => void;
-  inputFocusHandler?: (e?: any) => void;
-  searchHandler?: (e?: any) => void;
-  clickHandler?: (e?: any) => void;
-};
-
-export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
-  const {
-    id,
-    onlyIcon,
-    icon,
-    customIcon,
-    selectedOptions,
-    placeholder,
-    stickyValue,
-    multiple,
-    searchable,
-    clearable,
-    clearHandler,
-    searchHandler,
-    clickHandler,
-    searchValue,
-    inputBlurHandler,
-    inputFocusHandler,
-  } = props;
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const onChangeHandler = (e: any) => {
-    searchHandler?.(e);
-    inputRef.current?.focus();
-  };
-
-  const onKeyDownHandler = (e: any) => {
-    e.stopPropagation();
-    if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
-      clearHandler?.(selectedOptions[selectedOptions.length - 1]);
-      inputRef.current?.focus();
-    }
-  };
-
-  const onClickHandler = (e: React.MouseEvent) => {
-    clickHandler?.(e);
-  };
-
-  const onFocusHandler = (e: React.FocusEvent<HTMLDivElement>) => {
-    inputFocusHandler?.(e);
-    inputRef.current?.focus();
-  };
-
-  const onBlurHandler = (e: React.FocusEvent<HTMLDivElement>) => {
-    inputBlurHandler?.(e);
-  };
-
-  const onClearAllHandler = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    clearHandler?.();
-  };
-
-  const selectTags = selectedOptions.map((option, index) => (
-    <SelectInputTag
-      closable
-      key={index}
-      onClose={() => {
-        clearHandler?.(option);
-        inputRef.current?.focus();
-      }}
-    >
-      {option.label || (option.value as string) || option.element}
-    </SelectInputTag>
-  ));
-
-  const selectInput = (
-    <SelectInternalInput
-      value={
-        searchValue ||
-        (!multiple && !stickyValue && selectedOptions.length
-          ? selectedOptions[0].label || selectedOptions[0].value
-          : '')
-      }
-      placeholder={
-        searchValue || (multiple && selectedOptions.length) ? '' : stickyValue || placeholder
-      }
-      onChange={onChangeHandler}
-      onKeyDown={onKeyDownHandler}
-      onBlur={onBlurHandler}
-      ref={inputRef}
-      width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
-    />
-  );
-
-  const simpleValue = selectedOptions.length ? (
-    selectedOptions[0].label || selectedOptions[0].element || (selectedOptions[0].value as string)
-  ) : (
-    <SelectInternalInputPlaceholder>{placeholder}</SelectInternalInputPlaceholder>
-  );
-
-  const multipleValues = selectedOptions.length ? (
-    selectTags
-  ) : (
-    <SelectInternalInputPlaceholder>{placeholder}</SelectInternalInputPlaceholder>
-  );
-
-  return (
-    <SelectInputWrapper {...props} id={id} onFocus={onFocusHandler} onClick={onClickHandler}>
-      {!onlyIcon && (
-        <>
-          <SelectInputValue>
-            {multiple ? (
-              searchable ? (
-                <>
-                  {selectTags}
-                  {selectInput}
-                </>
-              ) : (
-                multipleValues
-              )
-            ) : searchable ? (
-              selectInput
-            ) : (
-              simpleValue
-            )}
-          </SelectInputValue>
-          {!!(clearable && selectedOptions.length) && (
-            <Button size="small" variant="text" icon={<CloseIcon />} onClick={onClearAllHandler} />
-          )}
-        </>
-      )}
-      {customIcon || icon}
-    </SelectInputWrapper>
-  );
-}
-
-export const SelectInputWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--select-input-border-radius);
-  padding: var(--select-input-padding);
-  cursor: pointer;
-  gap: var(--select-input-gap);
-`;
-
-const SelectInputValue = styled.div`
-  width: calc(100% - 20px);
-  display: flex;
-  min-width: 0;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-wrap: wrap;
-  gap: var(--select-input-value-gap);
-`;
-
-const SelectInputTag = styled(Tag)`
-  --tag-content-padding: 0;
-`;
-
-const SelectInternalInput = styled.input.attrs(() => ({
-  type: 'text',
-}))<{ width?: string }>`
-  outline: none;
-  border-radius: var(--select-input-border-radius);
-  border: none;
-  font-size: var(--select-input-font-size);
-  font-weight: var(--select-input-font-weight);
-  line-height: var(--select-input-line-height);
-  background-color: var(--select-input-bg-color);
-
-  &::placeholder {
-    color: var(--select-input-placeholder-color);
-  }
-
-  width: ${({ width }) => width || 'auto'};
-`;
-
-const SelectInternalInputPlaceholder = styled.div`
-  color: var(--select-input-placeholder-color);
-  padding-left: 8px;
-`;

package/src/core/hooks/search/use-search-filter.ts

@@ -1,57 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import type { SearchFilterItem } from '@redocly/theme/core/types';
-
-export function useSearchFilter(
-  filter: SearchFilterItem[],
-  setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>,
-) {
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
-
-  const onFilterToggle = useCallback(() => {
-    setIsFilterOpen(!isFilterOpen);
-  }, [isFilterOpen]);
-
-  const onFilterChange = (field: string, value: string | string[] | undefined, isTop?: boolean) => {
-    const values = value ? (Array.isArray(value) ? value : [value]) : [];
-
-    const _filter = [...filter];
-    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
-    if (fieldIndex > -1) {
-      // filter field already exists
-      _filter[fieldIndex].values = values;
-    } else {
-      if (!values.length) return;
-      _filter.push({ field, values, isTop });
-    }
-
-    setFilter(_filter.filter((item) => item.values.length));
-  };
-
-  const onFilterReset = () => {
-    setFilter([]);
-  };
-
-  const onTopFacetsReset = () => {
-    const _filter = [...filter];
-    setFilter(_filter.filter((item) => !item.isTop));
-  };
-
-  const onFacetReset = (field: string) => {
-    const _filter = [...filter];
-    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
-    if (fieldIndex !== -1) {
-      _filter[fieldIndex].values = [];
-    }
-    setFilter(_filter.filter((item) => item.values.length));
-  };
-
-  return {
-    onFacetReset,
-    onTopFacetsReset,
-    onFilterChange,
-    onFilterReset,
-    onFilterToggle,
-    isFilterOpen,
-  };
-}

package/src/core/types/select.ts

@@ -1,32 +0,0 @@
-import type React from 'react';
-
-export type SelectOption<T> = {
-  value: T;
-  element?: React.ReactNode | JSX.Element | string;
-  label?: string;
-};
-
-export type SelectProps<T = any> = {
-  value?: SelectOption<T> | SelectOption<T>[] | T | T[];
-  options: SelectOption<T>[];
-  multiple?: boolean;
-  searchable?: boolean;
-  clearable?: boolean;
-  dataAttributes?: Record<string, string>;
-  className?: string;
-  withArrow?: boolean;
-  triggerEvent?: 'click' | 'hover';
-  placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
-  onlyIcon?: boolean;
-  placeholder?: string;
-  disabled?: boolean;
-  hideCheckmarkIcon?: boolean;
-  dataTestId?: string;
-  icon?: React.ReactNode;
-  footer?: React.ReactNode;
-  onChange?: (value: T | T[]) => void;
-  renderInput?: () => React.ReactElement;
-  renderDivider?: () => React.ReactElement;
-  onSearch?: (value: T | null) => void;
-};

package/src/icons/ResetIcon/ResetIcon.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { IconProps } from '@redocly/theme/icons/types';
-
-import { getCssColorVariable } from '@redocly/theme/core/utils';
-
-const Icon = (props: IconProps) => (
-  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M9 14C10.1867 14 11.3467 13.6481 12.3334 12.9888C13.3201 12.3295 14.0892 11.3925 14.5433 10.2961C14.9974 9.19975 15.1162 7.99335 14.8847 6.82946C14.6532 5.66558 14.0818 4.59648 13.2426 3.75736C12.4035 2.91825 11.3344 2.3468 10.1705 2.11529C9.00666 1.88378 7.80026 2.0026 6.7039 2.45673C5.60754 2.91085 4.67047 3.67989 4.01118 4.66658C3.35189 5.65328 3 6.81331 3 8V11.1L1.2 9.3L0.5 10L3.5 13L6.5 10L5.8 9.3L4 11.1V8C4 7.0111 4.29324 6.0444 4.84265 5.22215C5.39206 4.39991 6.17295 3.75904 7.08658 3.38061C8.00021 3.00217 9.00555 2.90315 9.97545 3.09608C10.9454 3.289 11.8363 3.76521 12.5355 4.46447C13.2348 5.16373 13.711 6.05465 13.9039 7.02455C14.0969 7.99446 13.9978 8.99979 13.6194 9.91342C13.241 10.8271 12.6001 11.6079 11.7779 12.1574C10.9556 12.7068 9.98891 13 9 13V14Z"
-      fill="#1A1C21"
-    />
-  </svg>
-);
-
-export const ResetIcon = styled(Icon).attrs(() => ({
-  'data-component-name': 'icons/ResetIcon/ResetIcon',
-}))<IconProps>`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;

package/src/icons/SettingsIcon/SettingsIcon.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { IconProps } from '@redocly/theme/icons/types';
-
-import { getCssColorVariable } from '@redocly/theme/core/utils';
-
-const Icon = (props: IconProps) => (
-  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M15.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z"
-      fill="#22242B"
-    />
-    <path
-      d="M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z"
-      fill="#22242B"
-    />
-  </svg>
-);
-
-export const SettingsIcon = styled(Icon).attrs(() => ({
-  'data-component-name': 'icons/SettingsIcon/SettingsIcon',
-}))<IconProps>`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;