@snack-uikit/utils 3.3.1-preview-94780dcd.0 → 3.4.1-preview-1f246c4a.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.4.0 (2024-09-23)
+
+
+### Bug Fixes
+
+* **PDS-480:** remove direct usage of browser api elements ([1231ff7](https://github.com/cloud-ru-tech/snack-uikit/commit/1231ff7ab7a1b210b579a7b694633ef23bffcf44))
+* **PDS-480:** replace useLayoutEffect -> useIsomorphicLayoutEffect for ssr ([21aa9ad](https://github.com/cloud-ru-tech/snack-uikit/commit/21aa9ad9f113e465766339d396924357ccb1d432))
+
+
+### Features
+
+* **PDS-480:** add isomorphic layoutEffect and isBrowser predicate ([057ce9d](https://github.com/cloud-ru-tech/snack-uikit/commit/057ce9d98564dc33085f031bace53f97c76d22c0))
+
+
+
+
+
 # 3.3.0 (2024-04-23)
 
 

package/dist/cjs/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,28 @@
+"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.ThemeProvider = ThemeProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../hooks");
+const contexts_1 = require("./contexts");
+function ThemeProvider(_a) {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  const themeConfig = (0, hooks_1.useThemeConfig)(props);
+  return (0, jsx_runtime_1.jsx)(contexts_1.ThemeContext.Provider, {
+    value: themeConfig,
+    children: children
+  });
+}

package/dist/cjs/components/ThemeProvider/contexts.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeContext = exports.ThemeContext = void 0;
+const react_1 = require("react");
+exports.ThemeContext = (0, react_1.createContext)({
+  theme: undefined,
+  themeClassName: undefined,
+  changeTheme: undefined
+});
+const useThemeContext = () => (0, react_1.useContext)(exports.ThemeContext);
+exports.useThemeContext = useThemeContext;

package/dist/cjs/components/ThemeProvider/index.js

@@ -0,0 +1,33 @@
+"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
+});
+exports.useThemeContext = void 0;
+const contexts_1 = require("./contexts");
+Object.defineProperty(exports, "useThemeContext", {
+  enumerable: true,
+  get: function () {
+    return contexts_1.useThemeContext;
+  }
+});
+__exportStar(require("./ThemeProvider"), exports);

package/dist/cjs/components/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("./ThemeProvider"), exports);

package/dist/cjs/hooks/index.js

@@ -0,0 +1,29 @@
+"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("./useDebounce"), exports);
+__exportStar(require("./useEventHandler"), exports);
+__exportStar(require("./useIsomorphicLayoutEffect"), exports);
+__exportStar(require("./useThemeConfig"), exports);
+__exportStar(require("./useValueControl"), exports);

package/dist/cjs/hooks/useDebounce.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDebounce = useDebounce;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useEventHandler_1 = require("./useEventHandler");
+function useDebounce(callback) {
+  let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  const timeStampRef = (0, react_1.useRef)(0);
+  let timerId = -1;
+  return (0, useEventHandler_1.useEventHandler)(() => {
+    (0, utils_1.isBrowser)() && requestAnimationFrame(timestamp => {
+      if (timestamp < timeStampRef.current) {
+        clearTimeout(timerId);
+      }
+      timerId = setTimeout(callback, timeout);
+      timeStampRef.current = timestamp + timeout;
+    });
+  });
+}

package/dist/cjs/hooks/useEventHandler.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEventHandler = useEventHandler;
+const react_1 = require("react");
+const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+function useEventHandler(handler) {
+  const handlerRef = (0, react_1.useRef)(null);
+  (0, useIsomorphicLayoutEffect_1.useLayoutEffect)(() => {
+    handlerRef.current = handler;
+  });
+  return (0, react_1.useCallback)(function () {
+    const handler = handlerRef.current;
+    if (handler === null) {
+      console.warn('The event handler cannot be called during render');
+    }
+    return handler === null || handler === void 0 ? void 0 : handler(...arguments);
+  }, []);
+}

package/dist/cjs/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLayoutEffect = void 0;
+// eslint-disable-next-line no-restricted-imports
+const react_1 = require("react");
+const utils_1 = require("../utils");
+exports.useLayoutEffect = (0, utils_1.isBrowser)() ? react_1.useLayoutEffect : react_1.useEffect;

package/dist/cjs/hooks/useThemeConfig.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeConfig = useThemeConfig;
+const react_1 = require("react");
+function hasDefaultTheme(props) {
+  return Boolean(props.defaultTheme);
+}
+function useThemeConfig(props) {
+  const [theme, setTheme] = (0, react_1.useState)(hasDefaultTheme(props) ? props.defaultTheme : undefined);
+  return {
+    theme,
+    themeClassName: theme ? props.themeMap[theme] : undefined,
+    changeTheme: setTheme
+  };
+}

package/dist/cjs/hooks/useValueControl.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useValueControl = useValueControl;
+const uncontrollable_1 = require("uncontrollable");
+function useValueControl(_ref) {
+  let {
+    value,
+    onChange,
+    defaultValue
+  } = _ref;
+  return (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, newValue => {
+    const newState = typeof newValue === 'function' ? newValue(value) : newValue;
+    onChange === null || onChange === void 0 ? void 0 : onChange(newState);
+  });
+}

package/dist/cjs/index.js

@@ -0,0 +1,28 @@
+"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("./hooks"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/types/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils/componentPropsProcessors.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.excludeSupportProps = excludeSupportProps;
+exports.extractDataTestProps = extractDataTestProps;
+exports.extractSupportProps = extractSupportProps;
+const DATA_TEST_REGEXP = /^data-test-/;
+const DATA_AND_ARIA_REGEXP = /^(data|aria)-/;
+function excludeProps(props, regexp) {
+  return Object.keys(props).filter(prop => !prop.match(regexp)).reduce((nextProps, prop) => Object.assign(Object.assign({}, nextProps), {
+    [prop]: props[prop]
+  }), {});
+}
+function extractProps(props, regex) {
+  return Object.keys(props).reduce((nextProps, prop) => {
+    if (prop.match(regex)) nextProps[prop] = props[prop];
+    return nextProps;
+  }, {});
+}
+function excludeSupportProps(props) {
+  return excludeProps(props, DATA_AND_ARIA_REGEXP);
+}
+function extractDataTestProps(props) {
+  return extractProps(props, DATA_TEST_REGEXP);
+}
+function extractSupportProps(props) {
+  return extractProps(props, DATA_AND_ARIA_REGEXP);
+}

package/dist/cjs/utils/index.js

@@ -0,0 +1,26 @@
+"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("./componentPropsProcessors"), exports);
+__exportStar(require("./isBrowser"), exports);

package/dist/cjs/utils/isBrowser.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBrowser = isBrowser;
+function isBrowser() {
+  // eslint-disable-next-line @cloud-ru/ssr-safe-react/domApi
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+}

package/dist/esm/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type UseThemePropsWithDefaultTheme = {
+    themeMap: Record<string, string>;
+    defaultTheme: string;
+};
+type UseThemeProps = {
+    themeMap: Record<string, string>;
+};
+export type ThemeProviderProps = {
+    children: ReactNode;
+} & (UseThemePropsWithDefaultTheme | UseThemeProps);
+export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/ThemeProvider/contexts.d.ts

@@ -0,0 +1,7 @@
+export type ThemeContextType = {
+    theme: string | undefined;
+    themeClassName: string | undefined;
+    changeTheme: ((theme: string) => void) | undefined;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextType>;
+export declare const useThemeContext: () => ThemeContextType;

package/dist/esm/components/ThemeProvider/index.js

@@ -0,0 +1,3 @@
+import { useThemeContext } from './contexts';
+export * from './ThemeProvider';
+export { useThemeContext };

package/dist/esm/components/index.js

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

package/dist/esm/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useDebounce';
+export * from './useEventHandler';
+export * from './useIsomorphicLayoutEffect';
+export * from './useThemeConfig';
+export * from './useValueControl';

package/dist/esm/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce(callback: () => void, timeout?: number): () => void;

package/dist/esm/hooks/useEventHandler.d.ts

@@ -0,0 +1 @@
+export declare function useEventHandler<T extends (...args: never[]) => unknown>(handler: T): T;

package/dist/esm/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect as useLayoutEffectInternal } from 'react';
+export declare const useLayoutEffect: typeof useLayoutEffectInternal;

package/dist/esm/hooks/useThemeConfig.d.ts

@@ -0,0 +1,18 @@
+type UseThemePropsWithDefaultTheme<T extends string> = {
+    themeMap: Record<T, string>;
+    defaultTheme: T;
+};
+type UseThemeProps<T extends string> = {
+    themeMap: Record<T, string>;
+};
+export declare function useThemeConfig<T extends string>(props: UseThemeProps<T>): {
+    theme: T | undefined;
+    themeClassName: string | undefined;
+    changeTheme(theme: T): void;
+};
+export declare function useThemeConfig<T extends string>(props: UseThemePropsWithDefaultTheme<T>): {
+    theme: T;
+    themeClassName: string;
+    changeTheme(theme: T): void;
+};
+export {};

package/dist/esm/hooks/useValueControl.d.ts

@@ -0,0 +1,7 @@
+type UseValueControl<TValue> = {
+    value?: TValue;
+    onChange?(value: TValue): void;
+    defaultValue?: TValue;
+};
+export declare function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>): readonly [TValue | undefined, (value: any, ...args: any[]) => ReturnType<import("uncontrollable").Handler> | void];
+export {};

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './utils';
+export * from './components';
+export * from './types';

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

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/dist/esm/utils/componentPropsProcessors.d.ts

@@ -0,0 +1,7 @@
+import { AriaAttributes } from 'react';
+export type WithSupportProps<T> = {
+    'data-test-id'?: string;
+} & AriaAttributes & T;
+export declare function excludeSupportProps<T extends Record<string, unknown>>(props: T): {};
+export declare function extractDataTestProps<T extends Record<string, unknown>>(props: T): Record<string, unknown>;
+export declare function extractSupportProps<T extends Record<string, unknown>>(props: T): Record<string, unknown>;

package/dist/esm/utils/index.js

@@ -0,0 +1,2 @@
+export * from './componentPropsProcessors';
+export * from './isBrowser';

package/dist/esm/utils/isBrowser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Utils",
-  "version": "3.3.1-preview-94780dcd.0",
+  "version": "3.4.1-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "Пакет с вспомогательными функциями",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/utils",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Anna Kozlova <apkozlova@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -34,5 +36,5 @@
   "dependencies": {
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "0b67805c876ec8ccc1567d110a3b37b04d2f0fb6"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }