@snack-uikit/fields 0.51.17 → 0.52.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.52.0 (2026-03-04)
+
+
+### Features
+
+* **FF-8094:** add withCharacterCount hoc ([a5e5d8b](https://github.com/cloud-ru-tech/snack-uikit/commit/a5e5d8be1a1a552ca6abbaa9cefc2c7f00badb95))
+
+
+
+
+
 ## 0.51.17 (2026-03-04)
 
 ### Only dependencies have been changed

package/README.md

@@ -927,6 +927,29 @@ FieldStepper в основном предназначен для работы с
 | error | `string` | - |  |
 | ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
+## withCharacterCount
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| __@metadata@877* | `DecoratorMetadataObject` | - |  |
+| __@hasInstance@875* | `(value: any) => boolean` | - | Determines whether the given value inherits from this function if this function was used as a constructor function.  A constructor function can control which objects are recognized as its instances by 'instanceof' by overriding this method. |
+| name* | `string` | - | Returns the name of the function. Function names are read-only and can not be changed. |
+| caller* | `Function` | - |  |
+| arguments* | `any` | - |  |
+| length* | `number` | - |  |
+| prototype* | `any` | - |  |
+| bind* | `(this: Function, thisArg: any, ...argArray: any[]) => any` | - | For a given function, creates a bound function that has the same body as the original function. The this object of the bound function is associated with the specified object, and has the specified initial parameters. @param thisArg An object to which the this keyword can refer inside the new function. @param argArray A list of arguments to be passed to the new function. |
+| call* | `(this: Function, thisArg: any, ...argArray: any[]) => any` | - | Calls a method of an object, substituting another object for the current object. @param thisArg The object to be used as the current object. @param argArray A list of arguments to be passed to the method. |
+| apply* | `(this: Function, thisArg: any, argArray?: any) => any` | - | Calls the function, substituting the specified object for the this value of the function, and the specified array for the arguments of the function. @param thisArg The object to be used as the this object. @param argArray A set of arguments to be passed to the function. |
+| propTypes | `WeakValidationMap<TProps>` | - | Used to declare the types of the props accepted by the component. These types will be checked during rendering and in development only.  We recommend using TypeScript instead of checking prop types at runtime. @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs} @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs} |
+| contextType | `Context<any>` | - |  |
+| contextTypes | `ValidationMap<any>` | - | @deprecated use {@link ComponentClass.contextType } instead  Lets you specify which legacy context is consumed by this component. @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs} @deprecated Lets you specify which legacy context is consumed by this component. @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs} |
+| childContextTypes | `ValidationMap<any>` | - | @deprecated @see {@link https://legacy.reactjs.org/docs/legacy-context.html#how-to-use-context Legacy React Docs} |
+| defaultProps | `Partial<TProps>` | - | Used to define default values for the props accepted by the component. @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs} @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs} @example ```tsx type Props = { name?: string }  const MyComponent: FC<Props> = (props) => {   return <div>{props.name}</div> }  MyComponent.defaultProps = {   name: 'John Doe' } ``` |
+| displayName | `string` | - | Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes. @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs} @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs} @example ```tsx  const MyComponent: FC = () => {   return <div>Hello!</div> }  MyComponent.displayName = 'MyAwesomeComponent' ``` |
+| getDerivedStateFromProps | `GetDerivedStateFromProps<TProps, any>` | - |  |
+| getDerivedStateFromError | `GetDerivedStateFromError<TProps, any>` | - |  |
+| toString | `() => string` | function toString() { [native code] } | Returns a string representation of a function. |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/hocs/index.d.ts

@@ -0,0 +1 @@
+export * from './withCharacterCount';

package/dist/cjs/hocs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./withCharacterCount"), exports);

package/dist/cjs/hocs/withCharacterCount.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { InputPrivateProps } from '@snack-uikit/input-private';
+export type WithCharacterCountProps = {
+    handleReachLimit?(): void;
+};
+type FieldProps = Pick<InputPrivateProps, 'onChange' | 'maxLength'>;
+export declare function withCharacterCount<TProps extends FieldProps>(FieldComponent: ComponentType<TProps>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<TProps & WithCharacterCountProps> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/hocs/withCharacterCount.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withCharacterCount = withCharacterCount;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function withCharacterCount(FieldComponent) {
+  return (0, react_1.forwardRef)((_a, ref) => {
+    var {
+        handleReachLimit,
+        onChange,
+        maxLength
+      } = _a,
+      restProps = __rest(_a, ["handleReachLimit", "onChange", "maxLength"]);
+    const handleLimitedChange = (0, react_1.useCallback)((value, e) => {
+      if (!maxLength || value.length > maxLength) {
+        return;
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
+      if (value.length === maxLength && handleReachLimit) {
+        handleReachLimit();
+      }
+    }, [maxLength, handleReachLimit, onChange]);
+    return (0, jsx_runtime_1.jsx)(FieldComponent, Object.assign({}, restProps, {
+      ref: ref,
+      maxLength: maxLength,
+      onChange: handleLimitedChange
+    }));
+  });
+}

package/dist/cjs/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './constants';
+export * from './hocs';
 export { setNonce } from '@snack-uikit/scroll';

package/dist/cjs/index.js

@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.setNonce = void 0;
 __exportStar(require("./components"), exports);
 __exportStar(require("./constants"), exports);
+__exportStar(require("./hocs"), exports);
 var scroll_1 = require("@snack-uikit/scroll");
 Object.defineProperty(exports, "setNonce", {
   enumerable: true,

package/dist/esm/hocs/index.d.ts

@@ -0,0 +1 @@
+export * from './withCharacterCount';

package/dist/esm/hocs/index.js

@@ -0,0 +1 @@
+export * from './withCharacterCount';

package/dist/esm/hocs/withCharacterCount.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { InputPrivateProps } from '@snack-uikit/input-private';
+export type WithCharacterCountProps = {
+    handleReachLimit?(): void;
+};
+type FieldProps = Pick<InputPrivateProps, 'onChange' | 'maxLength'>;
+export declare function withCharacterCount<TProps extends FieldProps>(FieldComponent: ComponentType<TProps>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<TProps & WithCharacterCountProps> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/esm/hocs/withCharacterCount.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+export function withCharacterCount(FieldComponent) {
+    return forwardRef((_a, ref) => {
+        var { handleReachLimit, onChange, maxLength } = _a, restProps = __rest(_a, ["handleReachLimit", "onChange", "maxLength"]);
+        const handleLimitedChange = useCallback((value, e) => {
+            if (!maxLength || value.length > maxLength) {
+                return;
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
+            if (value.length === maxLength && handleReachLimit) {
+                handleReachLimit();
+            }
+        }, [maxLength, handleReachLimit, onChange]);
+        return (_jsx(FieldComponent, Object.assign({}, restProps, { ref: ref, maxLength: maxLength, onChange: handleLimitedChange })));
+    });
+}

package/dist/esm/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './constants';
+export * from './hocs';
 export { setNonce } from '@snack-uikit/scroll';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './constants';
+export * from './hocs';
 export { setNonce } from '@snack-uikit/scroll';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.51.17",
+  "version": "0.52.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0dbf2d0248621db41f5f53a7e4df55338d6ff4bd"
+  "gitHead": "afb2d2dbb5fdeedfed3e1056b6fd2fc197f42ab0"
 }

package/src/hocs/index.ts

@@ -0,0 +1 @@
+export * from './withCharacterCount';

package/src/hocs/withCharacterCount.tsx

@@ -0,0 +1,39 @@
+import { ChangeEvent, ComponentType, forwardRef, Ref, useCallback } from 'react';
+
+import { InputPrivateProps } from '@snack-uikit/input-private';
+
+export type WithCharacterCountProps = {
+  handleReachLimit?(): void;
+};
+
+type FieldProps = Pick<InputPrivateProps, 'onChange' | 'maxLength'>;
+
+export function withCharacterCount<TProps extends FieldProps>(FieldComponent: ComponentType<TProps>) {
+  return forwardRef<HTMLInputElement, TProps & WithCharacterCountProps>(
+    ({ handleReachLimit, onChange, maxLength, ...restProps }, ref) => {
+      const handleLimitedChange = useCallback(
+        (value: string, e?: ChangeEvent<HTMLInputElement>) => {
+          if (!maxLength || value.length > maxLength) {
+            return;
+          }
+
+          onChange?.(value, e);
+
+          if (value.length === maxLength && handleReachLimit) {
+            handleReachLimit();
+          }
+        },
+        [maxLength, handleReachLimit, onChange],
+      );
+
+      return (
+        <FieldComponent
+          {...(restProps as unknown as TProps)}
+          ref={ref as Ref<HTMLInputElement>}
+          maxLength={maxLength}
+          onChange={handleLimitedChange}
+        />
+      );
+    },
+  );
+}

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './constants';
+export * from './hocs';
 export { setNonce } from '@snack-uikit/scroll';