@itcase/ui 1.1.9 → 1.1.11

package/dist/components/Pagination.js

@@ -1,361 +1,26 @@
-import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import ceil from 'lodash/ceil';
-import ReactPaginate from 'react-paginate';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-Dgf0LRhx.js';
-import { I as Icon } from '../Icon-Dn2eEZvb.js';
-import { T as Text } from '../Text-BcGbRc14.js';
+export { P as Pagination } from '../Pagination-LXBlrbZT.js';
+import '../jsx-runtime-C2uP7l8s.js';
+import 'react';
+import 'clsx';
+import 'lodash/ceil';
+import 'react-paginate';
+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 '../DropdownItem-BaQXZu0w.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Divider-BlBwMHgl.js';
-import '../jsx-runtime-ClDdVO4Q.js';
-import '../Link-ByBzBRDH.js';
-import '../constants/componentProps/fill.js';
-import '../constants/componentProps/shape.js';
-import '../constants/componentProps/type.js';
-import '../constants/componentProps/underline.js';
-import '../constants/componentProps/size.js';
+import '../Divider-Dhj6sMWd.js';
+import '../Link-CbCqej5B.js';
+import '../_tslib-S-VPg1Cw.js';
+import '../Text-CxrzHFN1.js';
+import '../Icon-Duj1nynQ.js';
 import 'react-inlinesvg';
-import './Tooltip.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/wrap.js';
-import '../constants/componentProps/textSize.js';
-
-function Pagination(props) {
-  const {
-    pageNumber,
-    perPageCount,
-    allItemsCount,
-    className,
-    marginPagesDisplayed,
-    pageRangeDisplayed,
-    previousLabel,
-    nextLabel,
-    isPageCount,
-    pageCountArray,
-    pageCountDesc,
-    pageCountDescTextColor,
-    pageCountDescTextSize,
-    pageCountInputTextColor,
-    pageCountInputTextSize,
-    pageCountInputIcon,
-    pageCountInputIconFillSize,
-    pageCountInputIconColor,
-    pageCountDropdownAlignment,
-    pageCountDropdownElevation,
-    pageCountDropdownFill,
-    pageCountDropdownSet,
-    pageCountDropdownShape,
-    pageCountDropdownItemDividerDirection,
-    pageCountDropdownItemDividerFill,
-    pageCountDropdownItemDividerSize,
-    pageCountDropdownItemShowDivider,
-    onPerPageCountChange,
-    pageCountDropdownItemFill,
-    pageCountDropdownItemFillActive,
-    pageCountDropdownItemFillActiveHover,
-    pageCountDropdownItemFillHover,
-    pageCountDropdownItemLabelColor,
-    pageCountDropdownItemLabelColorActive,
-    pageCountDropdownItemLabelSize,
-    pageCountDropdownItemLabelWrap,
-    pageCountDropdownItemSet,
-    isPageCountDropdownReversed,
-    onPageChange
-  } = props;
-  const [isOpenDropdown, setIsOpenDropdown] = useState(false);
-  const [showPagination, setShowPagination] = useState(true);
-  const [pageCountDropdownArray, setPageCountDropdownArray] = useState([]);
-  const [activeDropdownItem, setActiveDropdownItem] = useState(10);
-  // Toggle command menu
-  const onClickCommandMenuButton = useCallback(event => {
-    setIsOpenDropdown(state => !state);
-  }, []);
-  const handleDropdownItemClick = useCallback((event, item) => {
-    event.stopPropagation();
-    onPerPageCountChange(item);
-    setActiveDropdownItem(item);
-    setIsOpenDropdown(false);
-  }, [onPerPageCountChange]);
-  const justifyContentClass = useDeviceTargetClass(props, {
-    prefix: 'pagination_justify-content_',
-    propsKey: 'justifyContent'
-  });
-  const gapClass = useDeviceTargetClass(props, {
-    prefix: 'gap_',
-    propsKey: 'gap'
-  });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-
-  // Calculate count of pages for all items
-  const paginationPagesCount = useMemo(() => {
-    if (allItemsCount && allItemsCount > 0) {
-      // Round up. "perPageCount" may be is a query params "limit"
-      return ceil(allItemsCount / perPageCount);
-    }
-    return 0;
-  }, [allItemsCount, perPageCount]);
-
-  // Index for pagination state
-  const paginationPageIndex = useMemo(() => {
-    const intPageNumber = parseInt(pageNumber);
-    // For pagination need index of page, not number
-    if (!isNaN(intPageNumber) && intPageNumber > 1) {
-      return intPageNumber - 1;
-    }
-    return 0;
-  }, [pageNumber]);
-  useEffect(() => {
-    setPageCountDropdownArray(isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray);
-  }, [pageCountArray, isPageCountDropdownReversed]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "pagination"
-  }, showPagination && /*#__PURE__*/React__default.createElement(ReactPaginate, {
-    activeClassName: "pagination__item_state_active cursor_type_default",
-    breakClassName: "pagination__item pagination__item_break",
-    disabledClassName: "pagination__item_state_disabled cursor_type_default",
-    disabledLinkClassName: "pagination__item_state_disabled",
-    marginPagesDisplayed: marginPagesDisplayed,
-    nextClassName: "pagination__item pagination__item_next",
-    pageCount: paginationPagesCount,
-    pageLinkClassName: "pagination__item-link",
-    pageRangeDisplayed: pageRangeDisplayed,
-    previousClassName: "pagination__item pagination__item_previous",
-    onPageChange: onPageChange,
-    activeLinkClassName: "pagination__item-link_state_active"
-    // previous button
-    ,
-    previousLabel: previousLabel,
-    breakLinkClassName: "pagination__item-link"
-    // pages settings
-    ,
-    forcePage: paginationPageIndex,
-    containerClassName: clsx(className, 'pagination__container', justifyContentClass)
-    // page item
-    ,
-    pageClassName: "pagination__item",
-    nextLinkClassName: "pagination__item-link"
-    // break element
-    ,
-    breakLabel: "...",
-    previousLinkClassName: "pagination__item-link"
-    // next button
-    ,
-    nextLabel: nextLabel
-  }), isPageCount && /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(className, 'pagination__count', gapClass)
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    size: pageCountDescTextSize,
-    textColor: pageCountDescTextColor
-  }, pageCountDesc), /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass),
-    onClick: onClickCommandMenuButton
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    size: pageCountInputTextSize,
-    textColor: pageCountInputTextColor
-  }, activeDropdownItem), /*#__PURE__*/React__default.createElement(Icon, {
-    fillSize: pageCountInputIconFillSize,
-    iconFill: pageCountInputIconColor,
-    SvgImage: pageCountInputIcon
-  }), /*#__PURE__*/React__default.createElement(Dropdown, {
-    alignment: pageCountDropdownAlignment,
-    elevation: pageCountDropdownElevation,
-    fill: pageCountDropdownFill,
-    isOpen: isOpenDropdown,
-    set: pageCountDropdownSet,
-    setIsOpen: setIsOpenDropdown,
-    shape: pageCountDropdownShape
-  }, pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.createElement(DropdownItem, {
-    dividerDirection: pageCountDropdownItemDividerDirection,
-    dividerFill: pageCountDropdownItemDividerFill,
-    dividerSize: pageCountDropdownItemDividerSize,
-    fill: pageCountDropdownItemFill,
-    fillActive: pageCountDropdownItemFillActive,
-    fillActiveHover: pageCountDropdownItemFillActiveHover,
-    fillHover: pageCountDropdownItemFillHover,
-    isActive: true,
-    key: item,
-    label: item,
-    labelTextColor: pageCountDropdownItemLabelColor,
-    labelTextColorActive: pageCountDropdownItemLabelColorActive,
-    labelTextSize: pageCountDropdownItemLabelSize,
-    labelTextWrap: pageCountDropdownItemLabelWrap,
-    set: pageCountDropdownItemSet,
-    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: event => handleDropdownItemClick(event, item)
-  }) : /*#__PURE__*/React__default.createElement(DropdownItem, {
-    dividerDirection: pageCountDropdownItemDividerDirection,
-    dividerFill: pageCountDropdownItemDividerFill,
-    dividerSize: pageCountDropdownItemDividerSize,
-    fill: pageCountDropdownItemFill,
-    fillHover: pageCountDropdownItemFillHover,
-    isActive: false,
-    key: item,
-    label: item,
-    labelTextColor: pageCountDropdownItemLabelColor,
-    labelTextColorActive: pageCountDropdownItemLabelColorActive,
-    labelTextSize: pageCountDropdownItemLabelSize,
-    labelTextWrap: pageCountDropdownItemLabelWrap,
-    set: pageCountDropdownItemSet,
-    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: event => handleDropdownItemClick(event, item)
-  }))))));
-}
-Pagination.propTypes = {
-  /**
-   *Количество всех элементов
-   */
-  allItemsCount: PropTypes.number,
-  isPageCountDropdownReversed: PropTypes.bool,
-  /**
-   * Количество страниц, отображаемых после троеточия
-   */
-  marginPagesDisplayed: PropTypes.number,
-  /**
-   *Кнопка навигации вперед
-   */
-  nextLabel: PropTypes.element,
-  pageCountArray: PropTypes.array,
-  pageCountDropdownItemLabelColorActive: PropTypes.string,
-  /**
-   * Количество страниц, отображаемых до троеточия
-   */
-  pageRangeDisplayed: PropTypes.number,
-  /**
-   * Количество элементов, отображаемых на станице
-   */
-  perPageCount: PropTypes.number,
-  /**
-   * Кнопка навигации назад
-   */
-  previousLabel: PropTypes.element
-};
-Pagination.defaultProps = {
-  pageNumber: 0,
-  perPageCount: 0,
-  allItemsCount: 0,
-  pageCountArray: [10, 20, 50, 100],
-  isPageCountDropdownReversed: false,
-  pageCountDropdownItemLabelColorActive: ''
-};
-Pagination.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Pagination",
-  "props": {
-    "pageNumber": {
-      "defaultValue": {
-        "value": "0",
-        "computed": false
-      },
-      "required": false
-    },
-    "perPageCount": {
-      "defaultValue": {
-        "value": "0",
-        "computed": false
-      },
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u043D\u0430 \u0441\u0442\u0430\u043D\u0438\u0446\u0435",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "allItemsCount": {
-      "defaultValue": {
-        "value": "0",
-        "computed": false
-      },
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0432\u0441\u0435\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "pageCountArray": {
-      "defaultValue": {
-        "value": "[10, 20, 50, 100]",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "array"
-      },
-      "required": false
-    },
-    "isPageCountDropdownReversed": {
-      "defaultValue": {
-        "value": "false",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "pageCountDropdownItemLabelColorActive": {
-      "defaultValue": {
-        "value": "''",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "marginPagesDisplayed": {
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u043F\u043E\u0441\u043B\u0435 \u0442\u0440\u043E\u0435\u0442\u043E\u0447\u0438\u044F",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "nextLabel": {
-      "description": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043F\u0435\u0440\u0435\u0434",
-      "type": {
-        "name": "element"
-      },
-      "required": false
-    },
-    "pageRangeDisplayed": {
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u0434\u043E \u0442\u0440\u043E\u0435\u0442\u043E\u0447\u0438\u044F",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "previousLabel": {
-      "description": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043D\u0430\u0437\u0430\u0434",
-      "type": {
-        "name": "element"
-      },
-      "required": false
-    }
-  }
-};
-
-export { Pagination };
+import '../Tooltip-CcwyN7PD.js';
+import '../Title-BUN57fWw.js';

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

@@ -1,15 +1,15 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { alignDirectionPropsType, borderColorPropsType, borderTypePropsType, borderWidthPropsType, elevationPropsType, fillHoverPropsType, fillPropsType, flexAlignPropsType, flexJustifyContentPropsType, flexWrapPropsType, heightPropsType, positionPropsType, shapePropsType, textColorPropsType, textSizePropsType, textWeightPropsType, widthPropsType } from '../../types';
 import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
 interface ThemeColor {
-    fill?: string;
-    fillHover?: string;
-    labelTextColor?: string;
     border?: string;
     borderColor?: string;
     borderWidth?: string;
     direction?: alignDirectionPropsType;
+    fill?: string;
+    fillHover?: string;
+    labelTextColor?: textColorPropsType;
 }
 type appearanceKeysType = appearanceKeysDefaultType & {};
 type appearanceType = {
@@ -21,36 +21,36 @@ export interface IPanelConfig {
 }
 export interface IPanelProps extends TypeStyleAttributes {
     appearance?: appearanceKeysType;
-    children?: React.ReactNode;
+    children?: ReactNode;
     className?: string;
+    dataTour?: string;
     horizontalScroll?: boolean;
-    verticalScroll?: boolean;
     htmlFor?: string;
     set?: string;
     style?: CSSProperties;
-    dataTour?: string;
+    verticalScroll?: boolean;
     alignContent?: flexJustifyContentPropsType;
     alignItems?: flexAlignPropsType;
-    justifyContent?: flexJustifyContentPropsType;
-    wrap?: flexWrapPropsType;
+    borderColor?: borderColorPropsType;
+    borderType?: borderTypePropsType;
+    borderWidth?: borderWidthPropsType;
     direction?: alignDirectionPropsType;
+    elevation?: elevationPropsType;
     fill?: fillPropsType;
     fillHover?: fillHoverPropsType;
-    shape?: shapePropsType;
-    width?: widthPropsType;
     height?: heightPropsType;
-    borderColor?: borderColorPropsType;
-    borderWidth?: borderWidthPropsType;
-    borderType?: borderTypePropsType;
-    elevation?: elevationPropsType;
+    justifyContent?: flexJustifyContentPropsType;
     position?: positionPropsType;
-    title?: string;
-    titleTextSize?: textSizePropsType;
-    titleTextColor?: textColorPropsType;
-    titleTextWeight?: textWeightPropsType;
+    shape?: shapePropsType;
+    width?: widthPropsType;
+    wrap?: flexWrapPropsType;
     desc?: string;
-    descTextSize?: textSizePropsType;
     descTextColor?: textColorPropsType;
+    descTextSize?: textSizePropsType;
     descTextWeight?: textWeightPropsType;
+    title?: string;
+    titleTextColor?: textColorPropsType;
+    titleTextSize?: textSizePropsType;
+    titleTextWeight?: textWeightPropsType;
 }
 export {};

package/dist/components/Panel.js

@@ -1,10 +1,10 @@
-import { j as jsxRuntimeExports } from '../jsx-runtime-ClDdVO4Q.js';
+import { j as jsxRuntimeExports } from '../jsx-runtime-C2uP7l8s.js';
+import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { G as Group } from '../Group-fbVPmr8W.js';
-import { T as Text } from '../Text-BcGbRc14.js';
-import 'react';
+import { G as Group } from '../Group-C2kJKhWJ.js';
+import { T as Text } from '../Text-CxrzHFN1.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -85,7 +85,7 @@ function Panel(props) {
     });
     // @ts-expect-error
     var _a = useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
-    var appearanceConfig = appearance && panelConfig.appearance && panelConfig.appearance[appearance];
+    var appearanceConfig = useMemo(function () { return appearance && panelConfig.appearance && panelConfig.appearance[appearance]; }, [appearance, panelConfig]);
     return (jsxRuntimeExports.jsxs(Group, { className: clsx(className, 'panel', widthClass, heightClass, fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,10 @@
+import { IRadioConfig, IRadioProps } from './Radio.interface';
+declare const radioConfig: IRadioConfig;
+declare function Radio(props: IRadioProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Radio {
+    var defaultProps: {
+        shape: string;
+        tag: string;
+    };
+}
+export { Radio, radioConfig };

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

@@ -0,0 +1,53 @@
+import { ElementType } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { borderColorHoverPropsType, borderColorPropsType, borderWidthPropsType, fillPropsType, itemColorPropsType, shapePropsType, textColorPropsType, textSizePropsType, textWeightPropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+export interface IRadioThemeColor {
+    descTextColor?: textColorPropsType;
+    descTextSize?: textSizePropsType;
+    descTextWeight?: textWeightPropsType;
+    fill?: fillPropsType;
+    labelTextColor?: textColorPropsType;
+    labelTextSize?: textSizePropsType;
+    labelTextWeight?: textWeightPropsType;
+    shape?: shapePropsType;
+    stateBorderColor?: borderColorPropsType;
+    stateBorderColorChecked?: borderColorPropsType;
+    stateBorderColorDisabled?: borderColorPropsType;
+    stateBorderColorDisabledChecked?: borderColorPropsType;
+    stateBorderColorHover?: borderColorHoverPropsType;
+    stateBorderColorHoverChecked?: borderColorHoverPropsType;
+    stateBorderWidth?: borderWidthPropsType;
+    stateCheckmarkFill?: itemColorPropsType;
+    stateCheckmarkFillDisabled?: itemColorPropsType;
+    stateFill?: fillPropsType;
+    stateFillChecked?: fillPropsType;
+    stateFillDisabled?: fillPropsType;
+    stateFillDisabledChecked?: fillPropsType;
+    stateShape?: shapePropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+export type radioStateType = {
+    [key in appearanceKeysType]?: IRadioThemeColor;
+};
+export type radioAppearanceType = {
+    [key in appearanceKeysType]?: IRadioThemeColor;
+};
+export interface IRadioConfig {
+    state: radioStateType | undefined;
+    setState: (newComponent: radioStateType) => void;
+    appearance: radioAppearanceType | undefined;
+    setAppearance: (newComponent: radioAppearanceType) => void;
+}
+export interface IRadioProps extends IRadioThemeColor, TypeStyleAttributes {
+    appearance?: appearanceKeysType;
+    checked?: boolean;
+    className?: string;
+    desc?: string;
+    disabled?: boolean;
+    id?: number | string;
+    label?: string;
+    tag: ElementType;
+    onChange?: () => void;
+}
+export {};

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

@@ -0,0 +1 @@
+export { Radio, radioConfig } from './Radio';