@moysklad/uikit 28.1.0

package/dist/components/Checkbox/Checkbox_module.css

@@ -0,0 +1,183 @@
+.container-PjCvxn {
+  --checkbox-top-row-flex-direction: row;
+  --checkbox-control-flex-direction: row;
+  --checkbox-top-row-align-self: auto;
+  --checkbox-label-text-align: left;
+  --checkbox-label-padding-left: 8px;
+  --checkbox-label-padding-right: 0;
+  --checkbox-info-padding-left: 24px;
+  --checkbox-info-padding-right: 0;
+  --checkbox-info-text-align: left;
+  flex-direction: column;
+  gap: 2px;
+  width: fit-content;
+  max-width: 100%;
+  display: flex;
+}
+
+.labelPrepend-cnaw67 {
+  --checkbox-top-row-flex-direction: row-reverse;
+  --checkbox-control-flex-direction: row-reverse;
+  --checkbox-top-row-align-self: flex-end;
+  --checkbox-label-text-align: right;
+  --checkbox-label-padding-left: 0;
+  --checkbox-label-padding-right: 8px;
+  --checkbox-info-padding-left: 0;
+  --checkbox-info-padding-right: 24px;
+  --checkbox-info-text-align: right;
+  justify-self: start;
+}
+
+.topRow-ZVHuHj {
+  flex-direction: var(--checkbox-top-row-flex-direction);
+  align-self: var(--checkbox-top-row-align-self);
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
+  display: inline-flex;
+}
+
+.control-bBud5X {
+  flex-direction: var(--checkbox-control-flex-direction);
+  align-items: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+}
+
+.input-flxvde {
+  appearance: none;
+}
+
+.input-flxvde:focus {
+  outline: none;
+}
+
+.icon-O8vPAM {
+  box-sizing: border-box;
+  cursor: pointer;
+  border: 1px solid var(--border-normal, #d1d6df);
+  background: var(--bgd-white, #fff);
+  color: var(--invert-element-white, #fff);
+  -webkit-user-select: none;
+  user-select: none;
+  border-radius: 4px;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  display: flex;
+}
+
+.iconSvg-pjyMzN {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.iconWithContent-XDJ74A {
+  margin-top: 2px;
+}
+
+.icon-O8vPAM:hover, .input-flxvde:hover ~ .icon-O8vPAM {
+  border-color: var(--elements-normal, #5f6d79);
+}
+
+.input-flxvde:checked ~ .icon-O8vPAM {
+  border-color: var(--button-primary-normal, #036ce5);
+  background: var(--button-primary-normal, #036ce5);
+}
+
+.input-flxvde:checked ~ .icon-O8vPAM:hover, .input-flxvde:checked:hover ~ .icon-O8vPAM {
+  border-color: var(--button-primary-hover, #0b7cff);
+  background: var(--button-primary-hover, #0b7cff);
+}
+
+.icon-O8vPAM:active, .input-flxvde:active ~ .icon-O8vPAM {
+  border-color: var(--elements-hover, #091739);
+}
+
+.input-flxvde:checked ~ .icon-O8vPAM:active, .input-flxvde:checked:active ~ .icon-O8vPAM {
+  border-color: var(--button-primary-pressed, #005dc9);
+  background: var(--button-primary-pressed, #005dc9);
+}
+
+.input-flxvde:focus-visible ~ .icon-O8vPAM {
+  border-color: var(--elements-normal, #5f6d79);
+  box-shadow: 0 0 0 4px #d5dff433;
+}
+
+.input-flxvde:focus-visible:checked ~ .icon-O8vPAM {
+  border-color: var(--button-primary-focus, #2f8fff);
+  background: var(--button-primary-focus, #2f8fff);
+}
+
+.input-flxvde:disabled ~ .icon-O8vPAM {
+  border-color: var(--border-normal, #d1d6df);
+  background: var(--bgd-secondary, #f1f4f9);
+  box-shadow: none;
+}
+
+.input-flxvde:disabled:checked ~ .icon-O8vPAM {
+  border-color: var(--elements-disable, #d1d6df);
+  background: var(--elements-disable, #d1d6df);
+}
+
+.controlDisabled-gR37nj .icon-O8vPAM, .controlDisabled-gR37nj .content-i0_RI5, .controlDisabled-gR37nj .label-oaFoy2 {
+  cursor: default;
+}
+
+.content-i0_RI5 {
+  cursor: pointer;
+  min-width: 0;
+  max-width: 100%;
+  padding-right: var(--checkbox-label-padding-right);
+  padding-left: var(--checkbox-label-padding-left);
+  align-items: flex-start;
+  gap: 8px;
+  display: inline-flex;
+}
+
+.labelIndicatorGroup-lIiDuX {
+  flex: 0 auto;
+  align-items: flex-start;
+  gap: 4px;
+  min-width: 0;
+  display: inline-flex;
+}
+
+.label-oaFoy2 {
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  text-align: var(--checkbox-label-text-align);
+  margin: 0;
+}
+
+.labelDisabled-lUUtWw, .labelDisabled-lUUtWw:hover, .labelDisabled-lUUtWw:focus {
+  color: var(--text-secondary, #5f6d79);
+}
+
+.help-AHZxGf {
+  -webkit-user-select: none;
+  user-select: none;
+  flex: none;
+}
+
+.archivedIcon-i477N8 {
+  color: var(--elements-inactive, #9fa7af);
+  flex: none;
+  display: block;
+}
+
+.infoWrapper-ML_fI8 {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  padding-right: var(--checkbox-info-padding-right);
+  padding-left: var(--checkbox-info-padding-left);
+  overflow-wrap: anywhere;
+  text-align: var(--checkbox-info-text-align);
+  display: block;
+}
+

package/dist/components/Checkbox/components/CheckboxContent.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+type CheckboxContentProps = {
+    id: string;
+    content: ReactNode;
+    indicatorNode: ReactNode;
+    isArchived: boolean;
+    disabled?: boolean;
+    testId?: string;
+};
+export declare const CheckboxContent: ({ id, testId, content, disabled, indicatorNode, isArchived, }: CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Checkbox/components/CheckboxContent.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../common/css/cn.js";
+import { getTestId } from "../../../common/testId/index.js";
+import { Text } from "../../Text/Text.js";
+import { Archived20Icon } from "../../../icon/index.js";
+import Checkbox_module from "../Checkbox.module.js";
+const CheckboxContent = ({ id, testId, content, disabled, indicatorNode, isArchived })=>/*#__PURE__*/ jsxs("label", {
+        htmlFor: id,
+        "data-test-id": testId ? getTestId(testId, 'content') : void 0,
+        className: Checkbox_module.content,
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                "data-test-id": testId ? getTestId(testId, 'label-indicator-group') : void 0,
+                className: Checkbox_module.labelIndicatorGroup,
+                children: [
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        as: "span",
+                        testId: testId ? getTestId(testId, 'label') : void 0,
+                        className: cn(Checkbox_module.label, disabled && Checkbox_module.labelDisabled),
+                        children: content
+                    }),
+                    indicatorNode
+                ]
+            }),
+            isArchived ? /*#__PURE__*/ jsx(Archived20Icon, {
+                className: Checkbox_module.archivedIcon
+            }) : null
+        ]
+    });
+export { CheckboxContent };

package/dist/components/Checkbox/components/CheckboxHelp.d.ts

@@ -0,0 +1,7 @@
+import { type HelpProps } from '../../Help/Help';
+interface CheckboxHelpProps extends Omit<HelpProps, 'testId'> {
+    labelPrepend: boolean;
+    testId?: string;
+}
+export declare const CheckboxHelp: ({ testId, labelPrepend, placement, className, ...helpProps }: CheckboxHelpProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Checkbox/components/CheckboxHelp.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../common/css/cn.js";
+import { getTestId } from "../../../common/testId/index.js";
+import { Help, Placement } from "../../Help/Help.js";
+import Checkbox_module from "../Checkbox.module.js";
+const resolveHelpPlacement = (labelPrepend, placement)=>placement ?? (labelPrepend ? Placement.LEFT_TOP : Placement.RIGHT_TOP);
+const CheckboxHelp = ({ testId, labelPrepend, placement, className, ...helpProps })=>/*#__PURE__*/ jsx(Help, {
+        ...helpProps,
+        testId: testId ? getTestId(testId, 'help') : void 0,
+        placement: resolveHelpPlacement(labelPrepend, placement),
+        className: cn(Checkbox_module.help, className)
+    });
+export { CheckboxHelp };

package/dist/components/Checkbox/components/CheckboxIcon.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEventHandler } from 'react';
+import type { CheckboxVisualState } from '../Checkbox.types';
+type CheckboxIconProps = {
+    visualState: CheckboxVisualState;
+    hasContent: boolean;
+    testId?: string;
+    onClick: MouseEventHandler<HTMLSpanElement>;
+};
+export declare const CheckboxIcon: ({ visualState, hasContent, testId, onClick, }: CheckboxIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Checkbox/components/CheckboxIcon.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../common/css/cn.js";
+import { Minus } from "../icons/Minus.js";
+import { Success } from "../icons/Success.js";
+import Checkbox_module from "../Checkbox.module.js";
+const CheckboxIcon = ({ visualState, hasContent, testId, onClick })=>/*#__PURE__*/ jsxs("span", {
+        onClick: onClick,
+        "data-test-id": testId,
+        className: cn(Checkbox_module.icon, hasContent && Checkbox_module.iconWithContent),
+        children: [
+            'checked' === visualState ? /*#__PURE__*/ jsx(Success, {}) : null,
+            'indeterminate' === visualState ? /*#__PURE__*/ jsx(Minus, {}) : null
+        ]
+    });
+export { CheckboxIcon };

package/dist/components/Checkbox/icons/Minus.d.ts

@@ -0,0 +1 @@
+export declare const Minus: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/icons/Minus.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import Checkbox_module from "../Checkbox.module.js";
+const Minus = ()=>/*#__PURE__*/ jsx("svg", {
+        viewBox: "-2 -6 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        pointerEvents: "none",
+        className: Checkbox_module.iconSvg,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M1 1H9",
+            stroke: "currentColor",
+            strokeWidth: "1.2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+export { Minus };

package/dist/components/Checkbox/icons/Success.d.ts

@@ -0,0 +1 @@
+export declare const Success: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/icons/Success.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import Checkbox_module from "../Checkbox.module.js";
+const Success = ()=>/*#__PURE__*/ jsx("svg", {
+        viewBox: "-2 -3 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        pointerEvents: "none",
+        className: Checkbox_module.iconSvg,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M1 4.85319L2.68 6.78529C2.73669 6.85117 2.80933 6.90471 2.89246 6.94189C2.97559 6.97907 3.06706 6.99893 3.16 6.99996C3.25144 7.00091 3.34197 6.98362 3.425 6.94934C3.50803 6.91506 3.58148 6.86466 3.64 6.8018L9 1",
+            stroke: "currentColor",
+            strokeWidth: "1.2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+export { Success };

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,4 @@
+import { type IHasTestId } from '../../common/types';
+import type { ChipLegacyProps, ChipNewProps } from './Chip.types';
+export type ChipProps = ChipLegacyProps | ChipNewProps;
+export declare const Chip: import("react").ForwardRefExoticComponent<(ChipProps & IHasTestId) & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Chip/Chip.helpers.d.ts

@@ -0,0 +1,3 @@
+import { type IHasTestId } from '../../common/types';
+import type { ChipLegacyProps, ChipNewProps, Resolved } from './Chip.types';
+export declare const resolveProps: (props: (ChipLegacyProps | ChipNewProps) & IHasTestId) => Resolved;

package/dist/components/Chip/Chip.helpers.js

@@ -0,0 +1,205 @@
+import { normalizeCounterValue } from "../Counter/Counter.helpers.js";
+const DEFAULT_MAX_WIDTH_PX = 256;
+const isPositiveInt = (v)=>'number' == typeof v && Number.isFinite(v) && Number.isInteger(v) && v > 0;
+const resolveSizeFromLegacy = (small)=>small ? 'compact' : 'regular';
+const resolveLegacyProps = (props)=>{
+    const { isActive, onClick, children, className, overrideActiveClass, isTextEllipsis, icon, iconPosition = 'end', bodyTextClassName, disabled = false, small = false, tabIndex, style, onFocus, onBlur, onKeyDown, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, onMouseMove, onMouseOver, title, 'data-active': dataActive, 'data-status': dataStatus, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    return {
+        isActive,
+        children,
+        className,
+        overrideActiveClass,
+        isTextEllipsis,
+        icon,
+        iconPosition,
+        bodyTextClassName,
+        disabled,
+        small,
+        clickHandler: ()=>onClick(isActive),
+        buttonCompatProps: {
+            tabIndex,
+            style,
+            onFocus,
+            onBlur,
+            onKeyDown,
+            onMouseEnter,
+            onMouseLeave,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseMove,
+            onMouseOver,
+            title,
+            'data-active': dataActive,
+            'data-status': dataStatus,
+            'aria-describedby': ariaDescribedBy,
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledBy
+        }
+    };
+};
+const isLegacyProps = (props)=>'isActive' in props && 'onClick' in props && 'children' in props;
+const resolveIndicators = (args)=>{
+    const { size, disabled, variant, indicatorMode, count, novelty } = args;
+    if ('compact' === size) return {
+        mode: 'none'
+    };
+    const normalizedCount = normalizeCounterValue(count);
+    const none = {
+        mode: 'none'
+    };
+    if ('regular' !== variant) switch(indicatorMode){
+        case 'count':
+            return null === normalizedCount ? none : {
+                mode: 'count',
+                count: normalizedCount
+            };
+        case 'novelty':
+            if ('number' !== novelty || disabled) return none;
+            return null === normalizedCount ? none : {
+                mode: 'noveltyNumber',
+                count: normalizedCount
+            };
+        default:
+            return none;
+    }
+    if (!indicatorMode || 'none' === indicatorMode) return none;
+    switch(indicatorMode){
+        case 'count':
+            return null === normalizedCount ? none : {
+                mode: 'count',
+                count: normalizedCount
+            };
+        case 'countDot':
+            if (disabled) return none;
+            return null === normalizedCount ? none : {
+                mode: 'countDot',
+                count: normalizedCount
+            };
+        case 'novelty':
+            if (disabled) return none;
+            if ('dot' === novelty) return {
+                mode: 'noveltyDot'
+            };
+            if ('number' === novelty) return null === normalizedCount ? none : {
+                mode: 'noveltyNumber',
+                count: normalizedCount
+            };
+            return none;
+        default:
+            return none;
+    }
+};
+const resolveTextBehavior = (props)=>{
+    const constrainWidth = props.constrainWidth ?? true;
+    if (!constrainWidth) return {
+        constrainWidth: false
+    };
+    const maxWidthPx = isPositiveInt(props.maxWidthPx) ? props.maxWidthPx : DEFAULT_MAX_WIDTH_PX;
+    return {
+        constrainWidth: true,
+        maxWidthPx
+    };
+};
+const resolveButtonMeta = (args)=>{
+    const { hintText, onClick } = args;
+    const normalizedHintText = 'string' == typeof hintText && hintText.trim().length > 0 ? hintText : void 0;
+    return {
+        hintText: normalizedHintText,
+        ariaLabel: normalizedHintText,
+        onClick: (e)=>onClick?.(e)
+    };
+};
+const resolveTrailing = (args)=>{
+    const { trailingIcon, trailingIconBehavior, trailingIconHint, onTrailingIconClick } = args;
+    if (!trailingIcon) return {
+        mode: 'none'
+    };
+    const normalizedBehavior = trailingIconBehavior ?? 'partOfChip';
+    if ('button' === normalizedBehavior) {
+        const buttonMeta = resolveButtonMeta({
+            hintText: trailingIconHint,
+            onClick: onTrailingIconClick
+        });
+        return {
+            mode: 'button',
+            icon: trailingIcon,
+            ...buttonMeta
+        };
+    }
+    return {
+        mode: 'partOfChip',
+        icon: trailingIcon
+    };
+};
+const resolveClear = (args)=>{
+    const { size, clearable, onClear, clearIconHint } = args;
+    if ('compact' === size || !clearable) return {
+        mode: 'none'
+    };
+    const buttonMeta = resolveButtonMeta({
+        hintText: clearIconHint,
+        onClick: onClear
+    });
+    return {
+        mode: 'button',
+        ...buttonMeta
+    };
+};
+const resolveProps = (props)=>{
+    if (isLegacyProps(props)) {
+        const legacy = resolveLegacyProps(props);
+        return {
+            mode: 'legacy',
+            variant: 'regular',
+            size: resolveSizeFromLegacy(legacy.small),
+            disabled: legacy.disabled,
+            selected: legacy.isActive,
+            legacy
+        };
+    }
+    const { variant = 'regular', size = 'regular', disabled = false, label, leadingIcon, onPress, selected, onSelectedChange, trailingIcon, trailingIconBehavior, onTrailingIconClick, trailingIconHint, indicatorMode, count, novelty, clearable, onClear, clearIconHint, constrainWidth, maxWidthPx, hintZIndex } = props;
+    const clickHandler = (e)=>{
+        onPress?.(e);
+        onSelectedChange(!selected);
+    };
+    const indicators = resolveIndicators({
+        size,
+        disabled,
+        variant,
+        indicatorMode,
+        count,
+        novelty
+    });
+    const trailing = resolveTrailing({
+        trailingIcon,
+        trailingIconBehavior,
+        trailingIconHint,
+        onTrailingIconClick
+    });
+    const clear = resolveClear({
+        size,
+        clearable,
+        onClear,
+        clearIconHint
+    });
+    const textBehavior = resolveTextBehavior({
+        constrainWidth,
+        maxWidthPx
+    });
+    return {
+        mode: 'new',
+        variant,
+        size,
+        disabled,
+        selected,
+        label,
+        leadingIcon,
+        trailing,
+        indicators,
+        clear,
+        textBehavior,
+        hintZIndex,
+        clickHandler
+    };
+};
+export { resolveProps };