@itcase/ui 1.1.9 → 1.1.11

package/dist/cjs/components/Scrollbar.js

@@ -1,71 +1,11 @@
 'use strict';
 
-var React = require('react');
-var clsx = require('clsx');
-var reactScrollbarsCustom = require('react-scrollbars-custom');
+var Scrollbar = require('../Scrollbar-DOujlQOb.js');
+require('../jsx-runtime-BBxmckJR.js');
+require('react');
+require('clsx');
+require('react-scrollbars-custom');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-function Scrollbar(props) {
-  const {
-    children,
-    className,
-    scrollbarWidth,
-    scrollHeight,
-    onScroll,
-    noDefaultStyles
-  } = props;
-  console.log(scrollHeight);
-  return /*#__PURE__*/React__default.default.createElement(reactScrollbarsCustom.Scrollbar, {
-    className: clsx__default.default('scrollbar', className),
-    onScroll: onScroll,
-    scrollbarWidth: scrollbarWidth,
-    noDefaultStyles: noDefaultStyles,
-    wrapperProps: {
-      className: 'scrollbar__wrapper'
-    },
-    scrollerProps: {
-      className: 'scrollbar__scroll'
-    },
-    contentProps: {
-      className: 'scrollbar__scroll-content'
-    },
-    trackXProps: {
-      className: 'scrollbar__track-x'
-    },
-    trackYProps: {
-      className: 'scrollbar__track-y'
-    },
-    thumbXProps: {
-      className: 'scrollbar__track-x-item'
-    },
-    thumbYProps: {
-      className: 'scrollbar__track-y-item'
-    },
-    style: {
-      height: scrollHeight + 'px'
-    }
-  }, children);
-}
-Scrollbar.defaultProps = {
-  scrollHeight: '200'
-};
-Scrollbar.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Scrollbar",
-  "props": {
-    "scrollHeight": {
-      "defaultValue": {
-        "value": "'200'",
-        "computed": false
-      },
-      "required": false
-    }
-  }
-};
-
-exports.Scrollbar = Scrollbar;
+exports.Scrollbar = Scrollbar.Scrollbar;

package/dist/cjs/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, 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?: 'compact' | 'normal' | 's' | 'l';
+    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/cjs/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/cjs/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/cjs/components/Search/index.d.ts

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

package/dist/cjs/components/Search.js

@@ -1,39 +1,28 @@
 'use strict';
 
-var SearchResult = require('../SearchResult-bTwR5A-g.js');
+var SearchResult = require('../SearchResult-D147g0-n.js');
+require('../jsx-runtime-BBxmckJR.js');
 require('react');
-require('prop-types');
 require('clsx');
-require('../constants/componentProps/fill.js');
-require('../Icon-UBahY607.js');
-require('../Link-BoShjCEw.js');
-require('../jsx-runtime-BCmQOGxJ.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
+require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../Icon-DzJtiBBk.js');
+require('../_tslib-CKiUdo7p.js');
 require('react-inlinesvg');
-require('./Tooltip.js');
-require('../Text-D7Aq1i5R.js');
-require('./Title.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textSize.js');
-require('../constants/componentProps/shape.js');
-require('./Scrollbar.js');
+require('../Link-3qPujNn9.js');
+require('../Tooltip-CnnungCh.js');
+require('../Text-C8vlKWNN.js');
+require('../Title-C3lN-EvU.js');
+require('../Scrollbar-DOujlQOb.js');
 require('react-scrollbars-custom');
 
 

package/dist/cjs/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/cjs/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/cjs/components/Segmented/index.d.ts

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

package/dist/cjs/components/Segmented.js

@@ -1,235 +1,23 @@
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var Text = require('../Text-D7Aq1i5R.js');
-var fill = require('../constants/componentProps/fill.js');
-var textWrap = require('../constants/componentProps/textWrap.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('../jsx-runtime-BCmQOGxJ.js');
-require('../hooks/useStyles.js');
+var Segmented = require('../Segmented-BHblcvck.js');
+require('../jsx-runtime-BBxmckJR.js');
+require('react');
+require('clsx');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
 require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
+require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('lodash/castArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+require('../Text-C8vlKWNN.js');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-const segmentedConfig = {
-  appearance: {},
-  setAppearance: newComponent => {
-    segmentedConfig.appearance = newComponent;
-  }
-};
-const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
-  const {
-    appearance,
-    name,
-    className,
-    type,
-    segments,
-    activeSegment,
-    setActiveSegment,
-    size,
-    labelTextColor,
-    labelTextActiveColor,
-    labelTextSize,
-    labelTextWrap,
-    onChange
-  } = props;
-  const controlRef = React.useRef(null);
-  const segmentsRefs = React.useMemo(() => new Map(segments.map(item => [item.value, /*#__PURE__*/React.createRef()])), [segments]);
-  const onChangeValue = React.useCallback(item => {
-    onChange && onChange(item.value, name);
-    setActiveSegment && setActiveSegment(item);
-  }, [name, onChange, setActiveSegment]);
-  React.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.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'indicatorFill'
-  });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'inputBorderColor'
-  });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'segmented_shape_',
-    propsKey: 'shape'
-  });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'segmented_width_',
-    propsKey: 'width'
-  });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(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.default.createElement("div", {
-    className: "segmented__wrapper"
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('segmented__wrapper-inner')
-  }, segments?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('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.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.default.createElement("label", {
-    className: clsx__default.default('segmented__item-label'),
-    htmlFor: item.label
-  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    className: clsx__default.default('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.default.createElement("div", {
-    className: clsx__default.default('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__default.default.object,
-  className: PropTypes__default.default.string,
-  fill: PropTypes__default.default.string,
-  /**
-   * цвет бэкграунда выбранного элемента
-   */
-  indicatorFill: PropTypes__default.default.oneOf(fill.default),
-  labelTextWrap: PropTypes__default.default.oneOf(textWrap.default),
-  name: PropTypes__default.default.string,
-  segments: PropTypes__default.default.array,
-  setActiveSegment: PropTypes__default.default.func,
-  type: PropTypes__default.default.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
-    }
-  }
-};
 
-exports.Segmented = Segmented;
-exports.segmentedConfig = segmentedConfig;
+exports.Segmented = Segmented.Segmented;
+exports.segmentedConfig = Segmented.segmentedConfig;