@infomaximum/ui-kit 0.17.4 → 0.18.1

package/dist/components/InternalPicker/styles/Popup.styles.js

@@ -56,6 +56,40 @@ const getPickerNowBtnStyle = (pickerTokens) => ({
     }
   }
 });
+const getPickerPresetsStyle = (pickerTokens, theme) => ({
+  [`.${prefixCls}-panel-layout`]: {
+    display: "flex"
+  },
+  [`.${prefixCls}-presets`]: {
+    display: "flex",
+    flexDirection: "column",
+    width: 128,
+    boxSizing: "border-box",
+    borderRight: `1px solid ${theme.lineDivider}`
+  },
+  [`.${prefixCls}-presets ul`]: {
+    height: 0,
+    flex: "auto",
+    listStyle: "none",
+    overflow: "auto",
+    margin: 0,
+    padding: theme.paddingXS
+  },
+  [`.${prefixCls}-presets li`]: {
+    paddingBlock: theme.paddingXS,
+    paddingInline: theme.paddingM,
+    borderRadius: theme.borderRadiusM,
+    cursor: "pointer",
+    ...theme.typography.body2,
+    color: pickerTokens.pickerText,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    "&:hover": {
+      background: pickerTokens.pickerCellSecondaryBgHover
+    }
+  }
+});
 const getPopupStyle = (pickerTokens) => (theme) => ({
   ...getPickerDropdownStyle(theme),
   ...getPickerRangeWrapperStyle(),
@@ -66,7 +100,8 @@ const getPopupStyle = (pickerTokens) => (theme) => ({
   ...getPickerFooterStyle(theme),
   ...getPickerRangesStyle(theme),
   ...getPickerOkStyle(),
-  ...getPickerNowBtnStyle(pickerTokens)
+  ...getPickerNowBtnStyle(pickerTokens),
+  ...getPickerPresetsStyle(pickerTokens, theme)
 });
 export {
   getPopupStyle

package/dist/components/InternalPicker/styles/RangeSelector.styles.d.ts

@@ -26,6 +26,9 @@ export declare const getRangeSelectorStyle: (pickerTokens: PickerTokens) => (the
     "&.picker-error-status .picker-active-bar": {
         background: "#FF4D4F";
     };
+    "&.picker-warning-status .picker-active-bar": {
+        background: "#FA8C16";
+    };
     "&.picker-focused .picker-active-bar": {
         opacity: number;
     };
@@ -128,4 +131,13 @@ export declare const getRangeSelectorStyle: (pickerTokens: PickerTokens) => (the
     ":not(.picker-disabled).picker-error-status:hover": {
         readonly borderColor: "#FF7875";
     };
+    "&.picker-warning-status": {
+        readonly borderColor: "#FA8C16";
+        readonly ":focus, :focus-within": {
+            readonly boxShadow: `0px 0px 4px 0px rgba(${number}, ${number}, ${number}, 0.5)`;
+        };
+    };
+    ":not(.picker-disabled).picker-warning-status:hover": {
+        readonly borderColor: "#FFA940";
+    };
 };

package/dist/components/InternalPicker/styles/RangeSelector.styles.js

@@ -10,6 +10,9 @@ const getPickerActiveBarStyle = (pickerTokens) => ({
   [`&.${prefixCls}-error-status .${prefixCls}-active-bar`]: {
     background: pickerTokens.pickerBorderDanger
   },
+  [`&.${prefixCls}-warning-status .${prefixCls}-active-bar`]: {
+    background: pickerTokens.pickerBorderWarning
+  },
   [`&.${prefixCls}-focused .${prefixCls}-active-bar`]: {
     opacity: 1
   }

package/dist/components/InternalPicker/styles/SingleSelector.styles.d.ts

@@ -100,4 +100,13 @@ export declare const getSingleSelectorStyle: (pickerTokens: PickerTokens) => (th
     ":not(.picker-disabled).picker-error-status:hover": {
         readonly borderColor: "#FF7875";
     };
+    "&.picker-warning-status": {
+        readonly borderColor: "#FA8C16";
+        readonly ":focus, :focus-within": {
+            readonly boxShadow: `0px 0px 4px 0px rgba(${number}, ${number}, ${number}, 0.5)`;
+        };
+    };
+    ":not(.picker-disabled).picker-warning-status:hover": {
+        readonly borderColor: "#FFA940";
+    };
 };

package/dist/components/InternalPicker/styles/SingleSelector.styles.js

@@ -31,6 +31,15 @@ const getPickerStyle = (pickerTokens, theme) => ({
   },
   [`:not(.${prefixCls}-disabled).${prefixCls}-error-status:hover`]: {
     borderColor: pickerTokens.pickerBorderDangerHover
+  },
+  [`&.${prefixCls}-warning-status`]: {
+    borderColor: pickerTokens.pickerBorderWarning,
+    ":focus, :focus-within": {
+      boxShadow: `0px 0px 4px 0px ${theme.fieldFocusedWarning}`
+    }
+  },
+  [`:not(.${prefixCls}-disabled).${prefixCls}-warning-status:hover`]: {
+    borderColor: pickerTokens.pickerBorderWarningHover
   }
 });
 const getPickerInputWrapperStyle = (theme) => ({

package/dist/components/InternalPicker/tokens.d.ts

@@ -5,6 +5,8 @@ export declare const getPickerTokens: (theme: Theme) => {
     pickerBorder: "#D9D9D9";
     pickerBorderDanger: "#FF4D4F";
     pickerBorderDangerHover: "#FF7875";
+    pickerBorderWarning: "#FA8C16";
+    pickerBorderWarningHover: "#FFA940";
     pickerBg: "#FFFFFF";
     pickerBgDisabled: "#F0F0F0";
     pickerPlaceholder: "#BFBFBF";

package/dist/components/InternalPicker/tokens.js

@@ -4,6 +4,8 @@ const getPickerTokens = (theme) => ({
   pickerBorder: theme.lineBorder,
   pickerBorderDanger: theme.dangerBase,
   pickerBorderDangerHover: theme.dangerHover,
+  pickerBorderWarning: theme.warningBase,
+  pickerBorderWarningHover: theme.warningHover,
   pickerBg: theme.bgContainer,
   pickerBgDisabled: theme.bgContainerDisabled,
   pickerPlaceholder: theme.textHint,

package/dist/components/Radio/components/RadioGroup/RadioGroup.js

@@ -14,13 +14,14 @@ const RadioGroupComponent = (props) => {
     disabled = false,
     optionType = "default",
     buttonType = "text",
+    orientation = "horizontal",
     options,
     onChange,
     children,
     ...restProps
   } = props;
   const theme = useTheme();
-  const isButtonType = optionType === "button";
+  const isDefaultOptionType = optionType === "default";
   const [value, setValue] = useMergedState(defaultValue, {
     value: valueProp
   });
@@ -51,7 +52,11 @@ const RadioGroupComponent = (props) => {
       return /* @__PURE__ */ jsx(Radio, { disabled: option.disabled || disabled, value: option.value, checked: value === option.value, icon: option.icon, children: option.label }, `radio-group-value-options-${option.value}`);
     });
   }
-  return /* @__PURE__ */ jsx("div", { css: getRadioGroupStyle(theme, isButtonType), ...restProps, children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: childrenToRender }) });
+  return /* @__PURE__ */ jsx("div", { css: getRadioGroupStyle({
+    theme,
+    isDefaultOptionType,
+    orientation
+  }), ...restProps, children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: childrenToRender }) });
 };
 const RadioGroup = RadioGroupComponent;
 export {

package/dist/components/Radio/components/RadioGroup/RadioGroup.styles.d.ts

@@ -1,5 +1,12 @@
 import { Theme } from 'themes';
-export declare const getRadioGroupStyle: (theme: Theme, isButtonType: boolean) => {
+import { RadioGroupOrientation } from './RadioGroup.types';
+export declare const getRadioGroupStyle: ({ theme, isDefaultOptionType, orientation, }: {
+    theme: Theme;
+    isDefaultOptionType: boolean;
+    orientation: RadioGroupOrientation;
+}) => {
     readonly display: "inline-flex";
+    readonly flexDirection: "column" | undefined;
     readonly columnGap: 8 | undefined;
+    readonly rowGap: 8 | undefined;
 };

package/dist/components/Radio/components/RadioGroup/RadioGroup.styles.js

@@ -1,7 +1,17 @@
-const getRadioGroupStyle = (theme, isButtonType) => ({
-  display: "inline-flex",
-  columnGap: isButtonType ? void 0 : theme.spaceM
-});
+const getRadioGroupStyle = ({
+  theme,
+  isDefaultOptionType,
+  orientation
+}) => {
+  const isVertical = isDefaultOptionType && orientation === "vertical";
+  const isHorizontal = isDefaultOptionType && orientation === "horizontal";
+  return {
+    display: "inline-flex",
+    flexDirection: isVertical ? "column" : void 0,
+    columnGap: isHorizontal ? theme.spaceM : void 0,
+    rowGap: isVertical ? theme.spaceM : void 0
+  };
+};
 export {
   getRadioGroupStyle
 };

package/dist/components/Radio/components/RadioGroup/RadioGroup.types.d.ts

@@ -3,9 +3,14 @@ import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 interface RadioOptionType extends Pick<RadioProps, "value" | "disabled" | "icon"> {
     label?: ReactNode;
 }
+export type RadioGroupOrientation = "horizontal" | "vertical";
 export interface RadioGroupProps extends PropsWithChildren, Pick<RadioProps, "disabled" | "name" | "value" | "onChange">, Pick<HTMLAttributes<HTMLElement>, "defaultValue" | "className" | "id"> {
     options?: (string | number | RadioOptionType)[];
+    /** @default "default" */
     optionType?: "default" | "button";
+    /** @default "text" */
     buttonType?: "text" | "icon";
+    /** @default "horizontal" */
+    orientation?: RadioGroupOrientation;
 }
 export {};

package/dist/components/Table/hooks/useTableVisualParamsChange/utils.d.ts

@@ -1,4 +1,4 @@
 export declare const forceScroll: (scrollLeft: number, target: HTMLElement | null) => void;
 export declare const getHorizontalScrollPositionRange: (el: HTMLElement) => readonly [number, number];
 export declare const getVerticalScrollBarWidth: (el: HTMLElement) => number;
-export declare const pickedScrollTargetProps: ("clientWidth" | "clientHeight" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth")[];
+export declare const pickedScrollTargetProps: ("clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth")[];

package/dist/components/Tabs/components/TabItem/TabItem.styles.d.ts

@@ -5,7 +5,7 @@ export declare const getTabItemStyle: (iconOnly: boolean, disabled: boolean, sel
         readonly display: "flex";
         readonly flexWrap: "nowrap";
         readonly alignItems: "center";
-        readonly justifyContent: "center" | "unset";
+        readonly justifyContent: "unset" | "center";
         readonly gap: 4;
         readonly padding: `4px 0 ${number}px` | `8px 0 ${number}px`;
         readonly color: "#262626" | "#595959" | "#8C8C8C" | "#BFBFBF";

package/dist/index.d.ts

@@ -50,4 +50,5 @@ export { type SegmentedProps, type SegmentedLabeledOption, Segmented, } from './
 export { ContextIsolator } from './components/ContextIsolator';
 export { type SpinProps, Spin } from './components/Spin';
 export { type TableProps, type DefaultRecord, type RenderFn, type Column, type ColumnWithChildren, Table, } from './components/Table';
+export { Collapse, type CollapseProps, type CollapseItemType, type CollapseKey, type CollapseExpandIconProps, } from './components/Collapse';
 export * from 'react-intersection-observer/test-utils';

package/dist/index.js

@@ -39,12 +39,14 @@ import { Segmented } from "./components/Segmented/Segmented.js";
 import { ContextIsolator } from "./components/ContextIsolator/ContextIsolator.js";
 import { Spin } from "./components/Spin/Spin.js";
 import { Table } from "./components/Table/Table.js";
+import { Collapse } from "./components/Collapse/Collapse.js";
 export {
   Alert,
   Avatar,
   Breadcrumb,
   Button,
   Checkbox,
+  Collapse,
   ConfigProvider,
   ContextIsolator,
   DatePicker,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.17.4",
+  "version": "0.18.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",