@itcase/ui 1.1.8 → 1.1.10

package/dist/components/Search/Search.interface.d.ts

@@ -0,0 +1,69 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { borderColorHoverPropsType, borderColorPropsType, borderTypePropsType, borderWidthPropsType, fillPropsType, iconSizePropsType, itemColorPropsType, shapePropsType, sizePropsType, textColorPropsType, textSizePropsType, textStylePropsType, textWeightPropsType, widthPropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+export interface ISearchThemeColor {
+    borderColor?: borderColorPropsType;
+    borderHover?: borderColorHoverPropsType;
+    borderType?: borderTypePropsType;
+    borderWidth?: borderWidthPropsType;
+    fill?: fillPropsType;
+    iconAfterFill?: itemColorPropsType;
+    iconAfterSize?: iconSizePropsType;
+    iconBeforeFill?: itemColorPropsType;
+    iconBeforeSize?: iconSizePropsType;
+    iconClearFill?: itemColorPropsType;
+    iconClearSize?: iconSizePropsType;
+    inputFill?: fillPropsType;
+    inputShape?: shapePropsType;
+    inputTextColor?: textColorPropsType;
+    inputTextSize?: textSizePropsType;
+    inputTextStyle?: textStylePropsType;
+    inputTextWeight?: textWeightPropsType;
+    placeholderTextColor?: textColorPropsType;
+    placeholderTextSize?: textSizePropsType;
+    placeholderTextStyle?: textStylePropsType;
+    placeholderTextWeight?: textWeightPropsType;
+    shape?: shapePropsType;
+    size?: sizePropsType;
+    width?: widthPropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+export type searchAppearanceType = {
+    [key in appearanceKeysType]?: ISearchThemeColor;
+};
+export interface ISearchConfig {
+    appearance: searchAppearanceType | undefined;
+    setAppearance: (newComponent: searchAppearanceType) => void;
+}
+export interface ISearchProps extends ISearchThemeColor, TypeStyleAttributes {
+    after?: ReactNode;
+    appearance?: appearanceKeysType;
+    before?: ReactNode;
+    className?: string;
+    dataTour?: string;
+    iconAfter?: string;
+    iconAfterSrc?: string;
+    iconBefore?: string;
+    iconBeforeSrc?: string;
+    iconClear?: string;
+    iconClearSrc?: string;
+    placeholder?: string;
+    style?: CSSProperties;
+    type?: string;
+    value?: string;
+    onChange?: (targetValue: string) => void;
+    onClickClean?: () => void;
+    onFocus?: (() => void) | undefined;
+    onKeyDown?: (() => void) | undefined;
+}
+export interface ISearchResultProps extends TypeStyleAttributes {
+    after?: ReactNode;
+    before?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    fill?: fillPropsType;
+    scrollHeight: number | string;
+    type?: string;
+}
+export {};

package/dist/components/Search/SearchInput.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ISearchConfig, ISearchProps } from './Search.interface';
+declare const searchInputConfig: ISearchConfig;
+declare const SearchInput: React.ForwardRefExoticComponent<ISearchProps & React.RefAttributes<HTMLInputElement>>;
+export { SearchInput, searchInputConfig };

package/dist/components/Search/SearchResult.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISearchResultProps } from './Search.interface';
+declare const SearchResult: React.ForwardRefExoticComponent<ISearchResultProps & React.RefAttributes<unknown>>;
+export { SearchResult };

package/dist/components/Search/index.d.ts

@@ -0,0 +1,3 @@
+import { SearchInput, searchInputConfig } from './SearchInput';
+import { SearchResult } from './SearchResult';
+export { SearchInput, searchInputConfig, SearchResult };

package/dist/components/Search.js

@@ -1,35 +1,24 @@
-export { S as SearchInput, a as SearchResult, s as searchInputConfig } from '../SearchResult-erxB06IL.js';
+export { S as SearchInput, a as SearchResult, s as searchInputConfig } from '../SearchResult-C0kjGm-o.js';
+import '../jsx-runtime-C2uP7l8s.js';
 import 'react';
-import 'prop-types';
 import 'clsx';
-import '../constants/componentProps/fill.js';
-import '../Icon-Dn2eEZvb.js';
-import '../Link-ByBzBRDH.js';
-import '../jsx-runtime-ClDdVO4Q.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+import '../Icon-C1j6rkeI.js';
+import '../_tslib-S-VPg1Cw.js';
 import 'react-inlinesvg';
-import './Tooltip.js';
-import '../Text-BcGbRc14.js';
-import './Title.js';
-import '../constants/componentProps/textAlign.js';
-import '../constants/componentProps/textColor.js';
-import '../constants/componentProps/textGradient.js';
-import '../constants/componentProps/textStyle.js';
-import '../constants/componentProps/textWeight.js';
-import '../constants/componentProps/titleSize.js';
-import '../constants/componentProps/type.js';
-import '../constants/componentProps/wrap.js';
-import '../constants/componentProps/size.js';
-import '../constants/componentProps/textSize.js';
-import '../constants/componentProps/shape.js';
-import './Scrollbar.js';
+import '../Link-CbCqej5B.js';
+import '../Tooltip-jT5A43he.js';
+import '../Text-edtauAM6.js';
+import '../Title-BUN57fWw.js';
+import '../Scrollbar-DrRNpn12.js';
 import 'react-scrollbars-custom';

package/dist/components/Segmented/Segmented.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ISegmentedConfig, ISegmentedProps } from './Segmented.interface';
+declare const segmentedConfig: ISegmentedConfig;
+declare const Segmented: React.ForwardRefExoticComponent<ISegmentedProps & React.RefAttributes<HTMLDivElement>>;
+export { Segmented, segmentedConfig };

package/dist/components/Segmented/Segmented.interface.d.ts

@@ -0,0 +1,42 @@
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { borderColorPropsType, borderTypePropsType, borderWidthPropsType, fillHoverPropsType, fillPropsType, itemColorPropsType, shapePropsType, textColorActivePropsType, textColorPropsType, textSizePropsType, textWrapPropsType, widthPropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+export interface ISegmentedThemeColor {
+    borderType?: borderTypePropsType;
+    borderWidth?: borderWidthPropsType;
+    fill?: fillPropsType;
+    fillHover?: fillHoverPropsType;
+    indicatorFill?: itemColorPropsType;
+    inputBorderColor?: borderColorPropsType;
+    labelTextActiveColor?: textColorActivePropsType;
+    labelTextColor?: textColorPropsType;
+    labelTextSize?: textSizePropsType;
+    labelTextWrap?: textWrapPropsType;
+    shape?: shapePropsType;
+    width?: widthPropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+export type segmentedAppearanceType = {
+    [key in appearanceKeysType]?: ISegmentedThemeColor;
+};
+export interface ISegmentedConfig {
+    appearance: segmentedAppearanceType | undefined;
+    setAppearance: (newComponent: segmentedAppearanceType) => void;
+}
+interface ISegment {
+    value: string;
+    label: string;
+}
+export interface ISegmentedProps extends ISegmentedThemeColor, TypeStyleAttributes {
+    activeSegment?: any;
+    appearance?: appearanceKeysType;
+    className?: string;
+    name?: string;
+    segments: ISegment[];
+    size?: string;
+    type?: string;
+    value?: string;
+    setActiveSegment?: (item: ISegment) => void;
+    onChange?: (value: string, name?: string) => void;
+}
+export {};

package/dist/components/Segmented/index.d.ts

@@ -0,0 +1 @@
+export { Segmented, segmentedConfig } from './Segmented';

package/dist/components/Segmented.js

@@ -1,226 +1,16 @@
-import React__default, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { T as Text } from '../Text-BcGbRc14.js';
-import fillProps from '../constants/componentProps/fill.js';
-import textWrapProps from '../constants/componentProps/textWrap.js';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import '../jsx-runtime-ClDdVO4Q.js';
-import '../hooks/useStyles.js';
+export { S as Segmented, s as segmentedConfig } from '../Segmented-C56XBzTH.js';
+import '../jsx-runtime-C2uP7l8s.js';
+import 'react';
+import 'clsx';
+import '../hooks/useDeviceTargetClass.js';
+import 'lodash/castArray';
 import 'lodash/camelCase';
-import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import 'lodash/castArray';
-
-const segmentedConfig = {
-  appearance: {},
-  setAppearance: newComponent => {
-    segmentedConfig.appearance = newComponent;
-  }
-};
-const Segmented = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-    appearance,
-    name,
-    className,
-    type,
-    segments,
-    activeSegment,
-    setActiveSegment,
-    size,
-    labelTextColor,
-    labelTextActiveColor,
-    labelTextSize,
-    labelTextWrap,
-    onChange
-  } = props;
-  const controlRef = useRef(null);
-  const segmentsRefs = useMemo(() => new Map(segments.map(item => [item.value, /*#__PURE__*/createRef()])), [segments]);
-  const onChangeValue = useCallback(item => {
-    onChange && onChange(item.value, name);
-    setActiveSegment && setActiveSegment(item);
-  }, [name, onChange, setActiveSegment]);
-  useEffect(() => {
-    let offsetWidth = 0;
-    let offsetLeft = 0;
-    const activeSegmentRef = segmentsRefs.get(activeSegment.value);
-    if (activeSegmentRef?.current) {
-      offsetWidth = activeSegmentRef.current.offsetWidth;
-      offsetLeft = activeSegmentRef.current.offsetLeft;
-    }
-    controlRef.current.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
-    // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
-    controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
-  }, [activeSegment, segmentsRefs]);
-  const indicatorFillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'indicatorFill'
-  });
-  const borderColorClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'inputBorderColor'
-  });
-  const borderWidthClass = useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'segmented_shape_',
-    propsKey: 'shape'
-  });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const widthClass = useDeviceTargetClass(props, {
-    prefix: 'segmented_width_',
-    propsKey: 'width'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(className, 'segmented', shapeClass || segmentedConfig.appearance[appearance]?.shape && `segmented_shape_${segmentedConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || segmentedConfig.appearance[appearance]?.fill && `fill_${segmentedConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), widthClass || segmentedConfig.appearance[appearance]?.width && `segmented_width_${segmentedConfig.appearance[appearance].width}`.replace(/([A-Z])/g, '-$1').toLowerCase(), size && `segmented_size_${size}`, type && `segmented_type_${type}`, borderColorClass, borderWidthClass, borderTypeClass),
-    ref: controlRef
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "segmented__wrapper"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('segmented__wrapper-inner')
-  }, segments?.map((item, i) => /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('segmented__item', fillHoverClass || segmentedConfig.appearance[appearance]?.fillHover && `fill_hover_${segmentedConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), item.value === activeSegment.value && 'segmented__item_active'),
-    key: item.value,
-    ref: segmentsRefs.get(item.value)
-  }, /*#__PURE__*/React__default.createElement("input", {
-    checked: item.value === activeSegment.value,
-    className: "segmented__item-radio",
-    id: item.label,
-    name: name,
-    type: "radio",
-    value: item.value,
-    onChange: () => onChangeValue(item)
-  }), /*#__PURE__*/React__default.createElement("label", {
-    className: clsx('segmented__item-label'),
-    htmlFor: item.label
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    className: clsx('segmented__item-label-text', labelTextWrap && `word-wrap_${labelTextWrap}`),
-    size: labelTextSize || segmentedConfig.appearance[appearance]?.labelTextSize,
-    textColor: item.value === activeSegment.value ? labelTextActiveColor || segmentedConfig.appearance[appearance]?.labelTextActiveColor : labelTextColor || segmentedConfig.appearance[appearance]?.labelTextColor
-  }, item.label)))), /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('segmented__indicator', indicatorFillClass || segmentedConfig.appearance[appearance]?.indicatorFill && `fill_${segmentedConfig.appearance[appearance].indicatorFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
-  }, "\xA0"))));
-});
-Segmented.displayName = 'Segmented';
-Segmented.propTypes = {
-  activeSegment: PropTypes.object,
-  className: PropTypes.string,
-  fill: PropTypes.string,
-  /**
-   * цвет бэкграунда выбранного элемента
-   */
-  indicatorFill: PropTypes.oneOf(fillProps),
-  labelTextWrap: PropTypes.oneOf(textWrapProps),
-  name: PropTypes.string,
-  segments: PropTypes.array,
-  setActiveSegment: PropTypes.func,
-  type: PropTypes.string
-};
-Segmented.defaultProps = {
-  activeSegment: {},
-  size: 'normal'
-};
-Segmented.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Segmented",
-  "props": {
-    "activeSegment": {
-      "defaultValue": {
-        "value": "{}",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "object"
-      },
-      "required": false
-    },
-    "size": {
-      "defaultValue": {
-        "value": "'normal'",
-        "computed": false
-      },
-      "required": false
-    },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "fill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "indicatorFill": {
-      "description": "\u0446\u0432\u0435\u0442 \u0431\u044D\u043A\u0433\u0440\u0430\u0443\u043D\u0434\u0430 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "labelTextWrap": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "textWrapProps"
-      },
-      "required": false
-    },
-    "name": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "segments": {
-      "description": "",
-      "type": {
-        "name": "array"
-      },
-      "required": false
-    },
-    "setActiveSegment": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    },
-    "type": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    }
-  }
-};
-
-export { Segmented, segmentedConfig };
+import '../Text-edtauAM6.js';
+import '../hooks/useStyles.js';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';