@itcase/ui 1.1.9 → 1.1.11

package/dist/cjs/components/Pagination.js

@@ -1,371 +1,32 @@
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var ceil = require('lodash/ceil');
-var ReactPaginate = require('react-paginate');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var DropdownItem = require('../DropdownItem-Bl-Ghc_6.js');
-var Icon = require('../Icon-UBahY607.js');
-var Text = require('../Text-D7Aq1i5R.js');
+var Pagination = require('../Pagination-B0-KGWSv.js');
+require('../jsx-runtime-BBxmckJR.js');
+require('react');
+require('clsx');
+require('lodash/ceil');
+require('react-paginate');
+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('../DropdownItem-bjpmcFH1.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Divider-CIYsHYud.js');
-require('../jsx-runtime-BCmQOGxJ.js');
-require('../Link-BoShjCEw.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../constants/componentProps/size.js');
+require('../Divider-D92wY8Fn.js');
+require('../Link-3qPujNn9.js');
+require('../_tslib-CKiUdo7p.js');
+require('../Text-C8vlKWNN.js');
+require('../Icon-DzJtiBBk.js');
 require('react-inlinesvg');
-require('./Tooltip.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/wrap.js');
-require('../constants/componentProps/textSize.js');
+require('../Tooltip-CnnungCh.js');
+require('../Title-C3lN-EvU.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-var ceil__default = /*#__PURE__*/_interopDefault(ceil);
-var ReactPaginate__default = /*#__PURE__*/_interopDefault(ReactPaginate);
 
-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] = React.useState(false);
-  const [showPagination, setShowPagination] = React.useState(true);
-  const [pageCountDropdownArray, setPageCountDropdownArray] = React.useState([]);
-  const [activeDropdownItem, setActiveDropdownItem] = React.useState(10);
-  // Toggle command menu
-  const onClickCommandMenuButton = React.useCallback(event => {
-    setIsOpenDropdown(state => !state);
-  }, []);
-  const handleDropdownItemClick = React.useCallback((event, item) => {
-    event.stopPropagation();
-    onPerPageCountChange(item);
-    setActiveDropdownItem(item);
-    setIsOpenDropdown(false);
-  }, [onPerPageCountChange]);
-  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'pagination_justify-content_',
-    propsKey: 'justifyContent'
-  });
-  const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'gap_',
-    propsKey: 'gap'
-  });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-
-  // Calculate count of pages for all items
-  const paginationPagesCount = React.useMemo(() => {
-    if (allItemsCount && allItemsCount > 0) {
-      // Round up. "perPageCount" may be is a query params "limit"
-      return ceil__default.default(allItemsCount / perPageCount);
-    }
-    return 0;
-  }, [allItemsCount, perPageCount]);
-
-  // Index for pagination state
-  const paginationPageIndex = React.useMemo(() => {
-    const intPageNumber = parseInt(pageNumber);
-    // For pagination need index of page, not number
-    if (!isNaN(intPageNumber) && intPageNumber > 1) {
-      return intPageNumber - 1;
-    }
-    return 0;
-  }, [pageNumber]);
-  React.useEffect(() => {
-    setPageCountDropdownArray(isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray);
-  }, [pageCountArray, isPageCountDropdownReversed]);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: "pagination"
-  }, showPagination && /*#__PURE__*/React__default.default.createElement(ReactPaginate__default.default, {
-    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__default.default(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.default.createElement("div", {
-    className: clsx__default.default(className, 'pagination__count', gapClass)
-  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    size: pageCountDescTextSize,
-    textColor: pageCountDescTextColor
-  }, pageCountDesc), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass),
-    onClick: onClickCommandMenuButton
-  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    size: pageCountInputTextSize,
-    textColor: pageCountInputTextColor
-  }, activeDropdownItem), /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
-    fillSize: pageCountInputIconFillSize,
-    iconFill: pageCountInputIconColor,
-    SvgImage: pageCountInputIcon
-  }), /*#__PURE__*/React__default.default.createElement(DropdownItem.Dropdown, {
-    alignment: pageCountDropdownAlignment,
-    elevation: pageCountDropdownElevation,
-    fill: pageCountDropdownFill,
-    isOpen: isOpenDropdown,
-    set: pageCountDropdownSet,
-    setIsOpen: setIsOpenDropdown,
-    shape: pageCountDropdownShape
-  }, pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.default.createElement(DropdownItem.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.default.createElement(DropdownItem.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__default.default.number,
-  isPageCountDropdownReversed: PropTypes__default.default.bool,
-  /**
-   * Количество страниц, отображаемых после троеточия
-   */
-  marginPagesDisplayed: PropTypes__default.default.number,
-  /**
-   *Кнопка навигации вперед
-   */
-  nextLabel: PropTypes__default.default.element,
-  pageCountArray: PropTypes__default.default.array,
-  pageCountDropdownItemLabelColorActive: PropTypes__default.default.string,
-  /**
-   * Количество страниц, отображаемых до троеточия
-   */
-  pageRangeDisplayed: PropTypes__default.default.number,
-  /**
-   * Количество элементов, отображаемых на станице
-   */
-  perPageCount: PropTypes__default.default.number,
-  /**
-   * Кнопка навигации назад
-   */
-  previousLabel: PropTypes__default.default.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
-    }
-  }
-};
-
-exports.Pagination = Pagination;
+exports.Pagination = Pagination.Pagination;

package/dist/cjs/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/cjs/components/Panel.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var jsxRuntime = require('../jsx-runtime-BCmQOGxJ.js');
+var jsxRuntime = require('../jsx-runtime-BBxmckJR.js');
+var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../Group-4zWTDvKx.js');
-var Text = require('../Text-D7Aq1i5R.js');
-require('react');
+var Group = require('../Group-C9BxTKs-.js');
+var Text = require('../Text-C8vlKWNN.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -91,7 +91,7 @@ function Panel(props) {
     });
     // @ts-expect-error
     var _a = useStyles.useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
-    var appearanceConfig = appearance && panelConfig.appearance && panelConfig.appearance[appearance];
+    var appearanceConfig = React.useMemo(function () { return appearance && panelConfig.appearance && panelConfig.appearance[appearance]; }, [appearance, panelConfig]);
     return (jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { className: clsx__default.default(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/cjs/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/cjs/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/cjs/components/Radio/index.d.ts

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