armtek-uikit-react 1.0.260 → 1.0.265

package/assets/styles.scss

@@ -1,47 +1,47 @@
-
-@use "global";
-@use "variables";
-@use "Accordion";
-@use "Adornment";
-@use "Avatar";
-@use "AvatarGroup";
-@use "BackDrop";
-@use "Badge";
-@use "Button";
-@use "ButtonGroup";
-@use "ButtonIcon";
-@use "Alert";
-@use "Card";
-@use "Checkbox";
-@use "Chip";
-@use "DateField";
-@use "DatePicker";
-@use "Dropdown";
-@use "FormControls";
-@use "HelperText";
-@use "Icon";
-@use "Interval";
-@use "Link";
-@use "ListItem";
-@use "Loader";
-@use "Logo";
-@use "Modal";
-@use "Paper";
-@use "Period";
-@use "Rating";
-@use "Select";
-@use "Skeleton";
-@use "Slider";
-@use "Stack";
-@use "Status";
-@use "StepItem";
-@use "StepItemIcon";
-@use "Stepper";
-@use "Switch";
-@use "Table";
-@use "TextField";
-@use "TextArea";
-@use "Tooltip";
-@use "Pagination";
-@use "Popper";
+
+@use "global";
+@use "variables";
+@use "Accordion";
+@use "Adornment";
+@use "Avatar";
+@use "AvatarGroup";
+@use "BackDrop";
+@use "Badge";
+@use "Button";
+@use "ButtonGroup";
+@use "ButtonIcon";
+@use "Alert";
+@use "Card";
+@use "Checkbox";
+@use "Chip";
+@use "DateField";
+@use "DatePicker";
+@use "Dropdown";
+@use "FormControls";
+@use "HelperText";
+@use "Icon";
+@use "Interval";
+@use "Link";
+@use "ListItem";
+@use "Loader";
+@use "Logo";
+@use "Modal";
+@use "Paper";
+@use "Period";
+@use "Rating";
+@use "Select";
+@use "Skeleton";
+@use "Slider";
+@use "Stack";
+@use "Status";
+@use "StepItem";
+@use "StepItemIcon";
+@use "Stepper";
+@use "Switch";
+@use "Table";
+@use "TextField";
+@use "TextArea";
+@use "Tooltip";
+@use "Pagination";
+@use "Popper";
 @use "classes";

package/assets/variables.scss

@@ -1,13 +1,13 @@
-
-.react-datepicker-popper{
-  z-index: 6;
-}
-
-@mixin transition($time: 0.5s, $target: all, $animation: ease) {
-  transition: $time $target $animation;
-}
-@mixin flex($justifyContent: flex-start, $alignItems: center) {
-  display: flex;
-  align-items: $alignItems;
-  justify-content: $justifyContent;
-}
+
+.react-datepicker-popper{
+  z-index: 6;
+}
+
+@mixin transition($time: 0.5s, $target: all, $animation: ease) {
+  transition: $time $target $animation;
+}
+@mixin flex($justifyContent: flex-start, $alignItems: center) {
+  display: flex;
+  align-items: $alignItems;
+  justify-content: $justifyContent;
+}

package/lib/helpers/helpers.d.ts

@@ -1,7 +1,7 @@
 import { ColorStatusType, ColorType, VariantType } from '../../types/theme';
 export declare enum SizeEnum {
     SMALL = "small",
-    MEDIUM = "meidum",
+    MEDIUM = "medium",
     LARGE = "large",
     EXTRA_LARGE = "extraLarge"
 }

package/lib/helpers/helpers.js

@@ -5,7 +5,7 @@ exports.getVariants = exports.getStatusColors = exports.getSizes = exports.getCs
 var _styles = require("../const/styles");
 let SizeEnum = exports.SizeEnum = /*#__PURE__*/function (SizeEnum) {
   SizeEnum["SMALL"] = "small";
-  SizeEnum["MEDIUM"] = "meidum";
+  SizeEnum["MEDIUM"] = "medium";
   SizeEnum["LARGE"] = "large";
   SizeEnum["EXTRA_LARGE"] = "extraLarge";
   return SizeEnum;

package/lib/hooks/useEnhancedEffect.js

@@ -5,12 +5,12 @@ exports.__esModule = true;
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
- * This is useful for effects that are only needed for client-side rendering but not for SSR.
- *
- * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
- * and confirm it doesn't apply to your use-case.
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
  */
 const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var _default = exports.default = useEnhancedEffect;

package/lib/hooks/useTimeout.js

@@ -23,8 +23,8 @@ class Timeout {
   static create() {
     return new Timeout();
   }
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
    */
   start(delay, fn) {
     this.clear();

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.260","description":"Armtek UIKit for React","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"@popperjs/core":"^2.11.8","clsx":"^2.0.0","date-fns":"^4.1.0","rc-slider":"^10.2.1","react":"<=18.2.0","react-datepicker":"^8.3.0","react-dom":"<=18.2.0","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"<=18.2.0","react-dom":"<=18.2.0"},"engines":{"node":">=14.0.0"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.265","description":"Armtek UIKit for React","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"@popperjs/core":"^2.11.8","clsx":"^2.0.0","date-fns":"^4.1.0","rc-slider":"^10.2.1","react":"<=18.2.0","react-datepicker":"^8.3.0","react-dom":"<=18.2.0","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"<=18.2.0","react-dom":"<=18.2.0"},"engines":{"node":">=14.0.0"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Avatar/Avatar.d.ts

@@ -11,5 +11,14 @@ export type AvatarProps = {
     variant?: 'square' | 'rounded' | 'roundedXl';
 } & ComponentPropsWithoutRef<'div'>;
 export declare const getLetters: (name: string) => string;
-declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: import("react").ForwardRefExoticComponent<{
+    photo?: string;
+    name?: string;
+    href?: string;
+    linkProps?: HTMLAttributes<HTMLAnchorElement>;
+    icon?: string;
+    size?: Exclude<SizeType, "extraLarge">;
+    status?: Exclude<ColorStatusType, "info">;
+    variant?: "square" | "rounded" | "roundedXl";
+} & Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/ui/Avatar/Avatar.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.getLetters = exports.default = void 0;
+var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
 const getLetters = name => {
@@ -10,7 +11,7 @@ const getLetters = name => {
   return nameParts[0].split('')[0] + (nameParts[1] ? nameParts[1].split('')[0] : '');
 };
 exports.getLetters = getLetters;
-const Avatar = props => {
+const Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     variant = 'roundedXl',
     photo,
@@ -39,6 +40,7 @@ const Avatar = props => {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
       ...divProps,
       className: (0, _clsx.default)('arm-avatar', className, 'arm-avatar_' + variant, {
         ['arm-avatar__photo']: !!photo,
@@ -60,5 +62,5 @@ const Avatar = props => {
       })]
     })
   });
-};
+});
 var _default = exports.default = Avatar;

package/ui/ButtonIcon/ButtonIcon.js

@@ -9,6 +9,8 @@ var _helpers = require("../../lib/helpers");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function ButtonIcon(props, ref) {
+  const hasPresetIcon = !!(props.mi || props.mis);
+  const buttonSize = props.size || 'extraLarge';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       color: 'neutral',
@@ -16,9 +18,10 @@ function ButtonIcon(props, ref) {
       ...props,
       ref: ref,
       asIcon: true,
-      className: (0, _clsx.default)('arm-button-icon', ['arm-button-icon_' + props.size], props.className, {
+      className: (0, _clsx.default)('arm-button-icon', ['arm-button-icon_' + buttonSize], props.className, {
         'arm-button-icon_square': props.radius === false,
-        'border-radius': props.radius === true
+        'border-radius': props.radius === true,
+        'arm-button-icon_with-icon': hasPresetIcon
       }),
       children: props.mi || props.mis ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: props.mi || props.mis,

package/ui/Card/Card.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
 export type CardProps = HTMLAttributes<HTMLDivElement>;
-declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
+declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Card;

package/ui/Card/Card.js

@@ -3,15 +3,17 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-const Card = props => {
+const Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
       ...props,
       className: (0, _clsx.default)('arm-card', props.className)
     })
   });
-};
+});
 var _default = exports.default = Card;
 module.exports = exports.default;

package/ui/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ElementType, MouseEvent, HTMLAttributes, KeyboardEvent } from 'react';
+import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, RefAttributes } from 'react';
 import { ColorStatusType, ColorThemeType, ColorType, SizeType, VariantType, ShapeType } from '../../types/theme';
 type OwnProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement>>> = Omit<ComponentPropsWithoutRef<T>, 'color'> & {
     size?: Exclude<SizeType, 'large' | 'extraLarge'>;
@@ -13,5 +13,6 @@ type OwnProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement
     disabled?: boolean;
 };
 export type ChipProps<T extends ElementType = 'span'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
-declare function Chip<T extends ElementType = 'span'>(props: ChipProps<T>): import("react/jsx-runtime").JSX.Element;
+type ChipComponent = <T extends ElementType = 'span'>(props: ChipProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
+declare const Chip: ChipComponent;
 export default Chip;

package/ui/Chip/Chip.js

@@ -3,9 +3,10 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-function Chip(props) {
+const Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     size,
     text,
@@ -25,6 +26,7 @@ function Chip(props) {
   let isComponentButton = Component === 'button';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      ref: ref,
       ...restProps,
       ...(isComponentButton ? {
         disabled
@@ -67,6 +69,6 @@ function Chip(props) {
       })
     })
   });
-}
+});
 var _default = exports.default = Chip;
 module.exports = exports.default;

package/ui/Form/DateField/DateField.js

@@ -32,8 +32,8 @@ const dateToText = (d, format) => {
   return d.toLocaleString('ru-RU', getDateFormat(format));
 };
 
-/*
-TODO: Не отрабатывает ...register из react-hook-form при предзаполненном поле
+/*
+TODO: Не отрабатывает ...register из react-hook-form при предзаполненном поле
  */
 const DateField = exports.DateField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {