indicator-ui 1.1.19 → 1.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +14 -14
- package/dist/index.js +10721 -10549
- package/dist/indicator-ui.css +1 -1
- package/dist/types/src/hooks/ui-animations/assets/index.d.ts +0 -1
- package/dist/types/src/hooks/ui-animations/{assets/collapsibleAnimations.d.ts → drawer/animation.d.ts} +1 -1
- package/dist/types/src/hooks/ui-animations/drawer/index.d.ts +2 -0
- package/dist/types/src/hooks/ui-animations/drawer/useDrawer.d.ts +15 -0
- package/dist/types/src/hooks/ui-animations/drawer/useDrawerActions.d.ts +17 -0
- package/dist/types/src/hooks/ui-animations/drawer/useDrawerAnimation.d.ts +8 -0
- package/dist/types/src/hooks/ui-animations/drawer/useDrawerRefs.d.ts +14 -0
- package/dist/types/src/hooks/ui-animations/index.d.ts +1 -1
- package/dist/types/src/ui/Drawer/hooks/index.d.ts +1 -0
- package/dist/types/src/ui/Drawer/hooks/useDrawerProvider.d.ts +34 -0
- package/dist/types/src/ui/Drawer/ui/Drawer.d.ts +5 -0
- package/dist/types/src/ui/Drawer/ui/index.d.ts +1 -0
- package/dist/types/src/ui/TagV2/index.d.ts +1 -0
- package/dist/types/src/ui/TagV2/styles/components/index.d.ts +5 -0
- package/dist/types/src/ui/TagV2/styles/index.d.ts +0 -0
- package/dist/types/src/ui/TagV2/types/index.d.ts +1 -0
- package/dist/types/src/ui/TagV2/ui/TagV2.d.ts +16 -0
- package/dist/types/src/ui/TagV2/ui/components/DismissButton.d.ts +10 -0
- package/dist/types/src/ui/TagV2/ui/components/Dot.d.ts +7 -0
- package/dist/types/src/ui/TagV2/ui/components/TagCheckbox.d.ts +10 -0
- package/dist/types/src/ui/TagV2/ui/components/TagCount.d.ts +9 -0
- package/dist/types/src/ui/TagV2/ui/components/Wrapper.d.ts +9 -0
- package/dist/types/src/ui/TagV2/ui/components/index.d.ts +5 -0
- package/dist/types/src/ui/TagV2/ui/index.d.ts +1 -0
- package/dist/types/src/ui/formFields/FormSelectField/ui/FormSelectFieldBase.d.ts +5 -2
- package/dist/types/src/ui/formFields/dates/FormDateField/hooks/useDatePickerController.d.ts +3 -0
- package/dist/types/src/ui/formFields/dates/FormDateField/hooks/useFormDateFieldProvider.d.ts +2 -0
- package/dist/types/src/ui/formFields/dates/FormDateRangeField/hooks/useDateTimePickerController.d.ts +3 -0
- package/dist/types/src/ui/formFields/dates/FormDateRangeField/hooks/useFormDateRangeFieldProvider.d.ts +2 -0
- package/dist/types/src/ui/formFields/dates/FormDateTimeField/hooks/useDateTimePickerController.d.ts +3 -0
- package/dist/types/src/ui/formFields/dates/FormDateTimeField/hooks/useFormDateTimeFieldProvider.d.ts +2 -0
- package/dist/types/src/ui/formFields/dates/FormTimeField/hooks/useFormTimeFieldProvider.d.ts +2 -0
- package/dist/types/src/ui/formFields/dates/FormTimeField/hooks/useTimePickerController.d.ts +3 -0
- package/dist/types/src/ui/index.d.ts +2 -1
- package/package.json +1 -1
- package/dist/types/src/hooks/ui-animations/useCollapsible.d.ts +0 -65
- package/dist/types/src/ui/Collapse/hooks/index.d.ts +0 -1
- package/dist/types/src/ui/Collapse/hooks/useCollapse.d.ts +0 -19
- package/dist/types/src/ui/Collapse/ui/Collapse.d.ts +0 -60
- package/dist/types/src/ui/Collapse/ui/index.d.ts +0 -1
- /package/dist/types/src/ui/{Collapse → Drawer}/index.d.ts +0 -0
|
@@ -2,6 +2,5 @@ export * from './modalAnimations';
|
|
|
2
2
|
export * from './backdropModalAnimations';
|
|
3
3
|
export * from './shimmerAnimation';
|
|
4
4
|
export * from './movingAnimations';
|
|
5
|
-
export * from './collapsibleAnimations';
|
|
6
5
|
export * from './textAutoScrollAnimations';
|
|
7
6
|
export * from './carouselAnimations';
|
|
@@ -3,7 +3,7 @@ type PropsType = [
|
|
|
3
3
|
content: HTMLElement,
|
|
4
4
|
timeline: gsap.core.Timeline
|
|
5
5
|
];
|
|
6
|
-
export declare function
|
|
6
|
+
export declare function DRAWER_ANIM(...args: PropsType): {
|
|
7
7
|
appear: (height: number) => gsap.core.Timeline;
|
|
8
8
|
disappear: () => gsap.core.Timeline;
|
|
9
9
|
changeHeight: (height: number) => gsap.core.Timeline;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DrawerState } from './useDrawerActions';
|
|
2
|
+
import { useDrawerRefs } from './useDrawerRefs';
|
|
3
|
+
type PropsType<W extends HTMLElement, C extends HTMLElement> = Pick<Parameters<typeof useDrawerRefs<W, C>>[number], 'wrapperRef' | 'contentRef'> & {
|
|
4
|
+
initElState?: DrawerState;
|
|
5
|
+
};
|
|
6
|
+
export declare function useDrawer<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): {
|
|
7
|
+
elState: DrawerState;
|
|
8
|
+
getElState: () => DrawerState;
|
|
9
|
+
open: () => void;
|
|
10
|
+
close: () => void;
|
|
11
|
+
toggle: () => void;
|
|
12
|
+
getContentInitStyle: () => import('react').CSSProperties;
|
|
13
|
+
getWrapperInitStyle: () => import('react').CSSProperties;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { useDrawerAnimation } from './useDrawerAnimation';
|
|
3
|
+
import { useDrawerRefs } from './useDrawerRefs';
|
|
4
|
+
export type DrawerState = 'open' | 'close';
|
|
5
|
+
type PropsType = Pick<ReturnType<typeof useDrawerRefs>, 'contentRef'> & Pick<ReturnType<typeof useDrawerAnimation>, 'resizeAnim' | 'openAnim' | 'closeAnim'> & {
|
|
6
|
+
initElState: DrawerState;
|
|
7
|
+
};
|
|
8
|
+
export declare function useDrawerActions(props: PropsType): {
|
|
9
|
+
toggle: () => void;
|
|
10
|
+
open: () => void;
|
|
11
|
+
close: () => void;
|
|
12
|
+
elState: DrawerState;
|
|
13
|
+
getElState: () => DrawerState;
|
|
14
|
+
getWrapperInitStyle: () => CSSProperties;
|
|
15
|
+
getContentInitStyle: () => CSSProperties;
|
|
16
|
+
};
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { useDrawerRefs } from './useDrawerRefs';
|
|
2
|
+
type PropsType<W extends HTMLElement, C extends HTMLElement> = Pick<ReturnType<typeof useDrawerRefs<W, C>>, 'getElements'>;
|
|
3
|
+
export declare function useDrawerAnimation<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): {
|
|
4
|
+
openAnim: () => void;
|
|
5
|
+
closeAnim: () => void;
|
|
6
|
+
resizeAnim: () => void;
|
|
7
|
+
};
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
type PropsType<W extends HTMLElement, C extends HTMLElement> = {
|
|
3
|
+
wrapperRef: React.RefObject<W | null>;
|
|
4
|
+
contentRef: React.RefObject<C | null>;
|
|
5
|
+
};
|
|
6
|
+
export declare function useDrawerRefs<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): {
|
|
7
|
+
getElements: () => {
|
|
8
|
+
content: C;
|
|
9
|
+
wrapper: W;
|
|
10
|
+
};
|
|
11
|
+
wrapperRef: React.RefObject<W | null>;
|
|
12
|
+
contentRef: React.RefObject<C | null>;
|
|
13
|
+
};
|
|
14
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useDrawerProvider';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { default as React, CSSProperties, ElementType } from 'react';
|
|
2
|
+
import { DrawerState, useDrawer } from '../../../hooks';
|
|
3
|
+
import { PolyPropsWithInstanceRef } from '../../../types';
|
|
4
|
+
type RefType<W extends ElementType, C extends ElementType> = {
|
|
5
|
+
wrapper: React.ComponentRef<W>;
|
|
6
|
+
content: React.ComponentRef<C>;
|
|
7
|
+
actions: ReturnType<typeof useDrawer>;
|
|
8
|
+
};
|
|
9
|
+
type PropsType<W extends ElementType, C extends ElementType> = PolyPropsWithInstanceRef<C, RefType<W, C>, Pick<Parameters<typeof useDrawer>[number], 'initElState'> & {
|
|
10
|
+
wrapperAs?: W;
|
|
11
|
+
wrapperClassName?: string;
|
|
12
|
+
wrapperStyle?: CSSProperties;
|
|
13
|
+
onUpdateState?: (state: DrawerState) => void;
|
|
14
|
+
offSyncWidth?: boolean;
|
|
15
|
+
}>;
|
|
16
|
+
export declare function useDrawerProvider<W extends ElementType, C extends ElementType>(props: PropsType<W, C>): {
|
|
17
|
+
actions: {
|
|
18
|
+
elState: DrawerState;
|
|
19
|
+
getElState: () => DrawerState;
|
|
20
|
+
open: () => void;
|
|
21
|
+
close: () => void;
|
|
22
|
+
toggle: () => void;
|
|
23
|
+
getContentInitStyle: () => CSSProperties;
|
|
24
|
+
getWrapperInitStyle: () => CSSProperties;
|
|
25
|
+
};
|
|
26
|
+
wrapperRef: React.RefObject<HTMLElement | null>;
|
|
27
|
+
contentRef: React.RefObject<HTMLElement | null>;
|
|
28
|
+
as: C | undefined;
|
|
29
|
+
wrapperAs: W | undefined;
|
|
30
|
+
wrapperStyle: React.CSSProperties | undefined;
|
|
31
|
+
wrapperClassName: string | undefined;
|
|
32
|
+
contentProps: Omit<PropsType<W, C>, "as" | "instanceRef" | "initElState" | "wrapperAs" | "wrapperClassName" | "wrapperStyle" | "onUpdateState" | "offSyncWidth">;
|
|
33
|
+
};
|
|
34
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ElementType } from 'react';
|
|
2
|
+
import { useDrawerProvider } from '../hooks';
|
|
3
|
+
type PropsType<W extends ElementType, C extends ElementType> = Parameters<typeof useDrawerProvider<W, C>>[number];
|
|
4
|
+
export declare function Drawer<W extends ElementType, C extends ElementType>(props: PropsType<W, C>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Drawer';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ui';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as DotStyle } from './Dot.module.scss';
|
|
2
|
+
export { default as WrapperStyle } from './Wrapper.module.scss';
|
|
3
|
+
export { default as TagCountStyle } from './TagCount.module.scss';
|
|
4
|
+
export { default as TagCheckboxStyle } from './TagCheckbox.module.scss';
|
|
5
|
+
export { default as DismissButtonStyle } from './DismissButton.module.scss';
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type TagSize = 'small' | 'medium' | 'large';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TagSize } from '../types';
|
|
3
|
+
import { DismissButton, Dot, TagCheckbox, TagCount, Wrapper } from './components';
|
|
4
|
+
type TagCountProps = React.ComponentProps<typeof TagCount>;
|
|
5
|
+
type DismissButtonProps = React.ComponentProps<typeof DismissButton>;
|
|
6
|
+
type TagCheckboxProps = React.ComponentProps<typeof TagCheckbox>;
|
|
7
|
+
type DotProps = React.ComponentProps<typeof Dot>;
|
|
8
|
+
type PropsType = Omit<React.ComponentProps<typeof Wrapper>, 'size' | 'active'> & Pick<DotProps, 'showDot'> & Pick<TagCountProps, 'counter'> & Pick<TagCheckboxProps, 'checked'> & {
|
|
9
|
+
size?: TagSize;
|
|
10
|
+
active?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
onDismissClick?: DismissButtonProps['onClick'];
|
|
13
|
+
onCheckboxClick?: TagCheckboxProps['onClick'];
|
|
14
|
+
};
|
|
15
|
+
export declare function TagV2(props: PropsType): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { MicroButton } from '../../..';
|
|
3
|
+
import { TagSize } from '../../types';
|
|
4
|
+
type MicroButtonProps = React.ComponentProps<typeof MicroButton>;
|
|
5
|
+
type PropsType = Pick<MicroButtonProps, 'onClick'> & {
|
|
6
|
+
size: TagSize;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare function DismissButton(props: PropsType): import("react/jsx-runtime").JSX.Element | undefined;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TagSize } from '../../types';
|
|
3
|
+
type WrapperProps = React.ComponentProps<'div'>;
|
|
4
|
+
type PropsType = Pick<WrapperProps, 'onClick'> & {
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
size: TagSize;
|
|
8
|
+
};
|
|
9
|
+
export declare function TagCheckbox(props: PropsType): import("react/jsx-runtime").JSX.Element | undefined;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TagSize } from '../../types';
|
|
3
|
+
type PropsType = {
|
|
4
|
+
counter?: React.ReactNode;
|
|
5
|
+
color: 'color' | 'gray';
|
|
6
|
+
size: TagSize;
|
|
7
|
+
};
|
|
8
|
+
export declare function TagCount(props: PropsType): import("react/jsx-runtime").JSX.Element | undefined;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { PropsForWithInstanceRef } from '../../../../types';
|
|
3
|
+
import { TagSize } from '../../types';
|
|
4
|
+
type PropsType = PropsForWithInstanceRef<'div', React.ComponentRef<'div'>, {
|
|
5
|
+
size: TagSize;
|
|
6
|
+
active: boolean;
|
|
7
|
+
}>;
|
|
8
|
+
export declare function Wrapper(props: PropsType): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './TagV2';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { FieldPropsType } from '../../../../hooks';
|
|
2
|
+
import { FieldPropsType, useModal } from '../../../../hooks';
|
|
3
3
|
import { DropdownItemPropsType } from '../../..';
|
|
4
4
|
import { FormFieldBase } from '../../FormField';
|
|
5
5
|
type OptionsExtendItemType<T> = DropdownItemPropsType & {
|
|
@@ -16,6 +16,9 @@ type BasePropsType<D, M extends boolean> = {
|
|
|
16
16
|
disabled?: boolean;
|
|
17
17
|
required?: boolean;
|
|
18
18
|
};
|
|
19
|
-
type
|
|
19
|
+
type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
|
|
20
|
+
type PropsType<D, M extends boolean> = Omit<React.ComponentProps<typeof FormFieldBase>, keyof BasePropsType<D, M> | keyof FieldPropsType<ValueType<D, M>>> & FieldPropsType<ValueType<D, M>> & BasePropsType<D, M> & {
|
|
21
|
+
modalPosition?: PositionSetting;
|
|
22
|
+
};
|
|
20
23
|
export declare function FormSelectFieldBase<D, M extends boolean = false>(props: PropsType<D, M>): import("react/jsx-runtime").JSX.Element;
|
|
21
24
|
export {};
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { useModal } from '../../../../../hooks';
|
|
2
3
|
import { DateInputValue } from './useDateDraft';
|
|
3
4
|
import { useInputFieldController } from './useInputFieldController';
|
|
4
5
|
import { useDateFormats } from './useDateFormats';
|
|
6
|
+
export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
|
|
5
7
|
type PropsType = Pick<ReturnType<typeof useDateFormats>, 'extractDateInputToPickerInputs'> & Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & {
|
|
6
8
|
disablePicker?: boolean;
|
|
9
|
+
pickerPosition?: PositionSetting;
|
|
7
10
|
};
|
|
8
11
|
export declare function useDatePickerController(props: PropsType): {
|
|
9
12
|
datePickerRef: React.RefObject<(Pick<{
|
package/dist/types/src/ui/formFields/dates/FormDateField/hooks/useFormDateFieldProvider.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { default as React } from 'react';
|
|
|
2
2
|
import { FieldPropsType } from '../../../../../hooks';
|
|
3
3
|
import { DatePickerV2 } from '../../../..';
|
|
4
4
|
import { DoubleInputItemProps } from './useInputFieldProps';
|
|
5
|
+
import { PositionSetting } from './useDatePickerController';
|
|
5
6
|
type DatePickerV2Props = React.ComponentProps<typeof DatePickerV2>;
|
|
6
7
|
type ValueBaseType = string;
|
|
7
8
|
type FieldProps = FieldPropsType<ValueBaseType>;
|
|
@@ -27,6 +28,7 @@ type PropsType = FieldProps & Pick<DatePickerV2Props, 'requestDaysData' | 'reque
|
|
|
27
28
|
onDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
|
|
28
29
|
pickerSubtitle?: DatePickerV2Props['subtitle'];
|
|
29
30
|
disablePicker?: boolean;
|
|
31
|
+
pickerPosition?: PositionSetting;
|
|
30
32
|
};
|
|
31
33
|
export declare function useFormDateFieldProvider(props: PropsType): {
|
|
32
34
|
dateInputValue: import('./useDateDraft').DateInputValue;
|
package/dist/types/src/ui/formFields/dates/FormDateRangeField/hooks/useDateTimePickerController.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { useModal } from '../../../../../hooks';
|
|
2
3
|
import { DateRangeInputValue } from './useDateRangeDraft';
|
|
3
4
|
import { useInputFieldController } from './useInputFieldController';
|
|
4
5
|
import { useDateUtils } from './useDateUtils';
|
|
6
|
+
export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
|
|
5
7
|
type PropsType = Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & Pick<ReturnType<typeof useDateUtils>, 'extractDateInputToPickerData'> & {
|
|
6
8
|
disablePicker?: boolean;
|
|
9
|
+
pickerPosition?: PositionSetting;
|
|
7
10
|
};
|
|
8
11
|
export declare function useDateTimePickerController(props: PropsType): {
|
|
9
12
|
dateTimePickerRef: React.RefObject<(Pick<{
|
|
@@ -2,6 +2,7 @@ import { default as React } from 'react';
|
|
|
2
2
|
import { FieldPropsType } from '../../../../../hooks';
|
|
3
3
|
import { DateRangePickerV2 } from '../../../..';
|
|
4
4
|
import { DoubleInputItemProps } from './useInputFieldProps';
|
|
5
|
+
import { PositionSetting } from './useDateTimePickerController';
|
|
5
6
|
type DateRangePickerV2Props = React.ComponentProps<typeof DateRangePickerV2>;
|
|
6
7
|
export type ValueItemType = string;
|
|
7
8
|
export type ValueBaseType = Array<ValueItemType>;
|
|
@@ -31,6 +32,7 @@ type PropsType = FieldProps & Pick<DateRangePickerV2Props, 'requestedDaysData' |
|
|
|
31
32
|
onDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
|
|
32
33
|
pickerSubtitle?: DateRangePickerV2Props['subtitle'];
|
|
33
34
|
disablePicker?: boolean;
|
|
35
|
+
pickerPosition?: PositionSetting;
|
|
34
36
|
};
|
|
35
37
|
export declare function useFormDateRangeFieldProvider(props: PropsType): {
|
|
36
38
|
fromDateValue: import('./useDateRangeDraft').DateRangeInputValue;
|
package/dist/types/src/ui/formFields/dates/FormDateTimeField/hooks/useDateTimePickerController.d.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { useModal } from '../../../../../hooks';
|
|
2
3
|
import { DateInputValue, TimeInputValue } from './useDateTimeDraft';
|
|
3
4
|
import { useInputFieldController } from './useInputFieldController';
|
|
4
5
|
import { useDateTimeFormats } from './useDateTimeFormats';
|
|
5
6
|
import { useDateUtils } from './useDateUtils';
|
|
7
|
+
export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
|
|
6
8
|
type PropsType = Pick<ReturnType<typeof useDateTimeFormats>, 'parseTimeInput' | 'parseDateInput'> & Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & Pick<ReturnType<typeof useDateUtils>, 'extractDateInputValue' | 'extractTimeInputValue'> & {
|
|
7
9
|
disablePicker?: boolean;
|
|
10
|
+
pickerPosition?: PositionSetting;
|
|
8
11
|
};
|
|
9
12
|
export declare function useDateTimePickerController(props: PropsType): {
|
|
10
13
|
dateTimePickerRef: React.RefObject<(Pick<{
|
package/dist/types/src/ui/formFields/dates/FormDateTimeField/hooks/useFormDateTimeFieldProvider.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { default as React } from 'react';
|
|
|
2
2
|
import { FieldPropsType } from '../../../../../hooks';
|
|
3
3
|
import { DateTimePickerV2 } from '../../../..';
|
|
4
4
|
import { DoubleInputItemProps } from './useInputFieldProps';
|
|
5
|
+
import { PositionSetting } from './useDateTimePickerController';
|
|
5
6
|
type DateTimePickerV2Props = React.ComponentProps<typeof DateTimePickerV2>;
|
|
6
7
|
type ValueBaseType = string;
|
|
7
8
|
type FieldProps = FieldPropsType<ValueBaseType>;
|
|
@@ -37,6 +38,7 @@ type PropsType = FieldProps & Pick<DateTimePickerV2Props, 'requestDaysData' | 'r
|
|
|
37
38
|
onDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
|
|
38
39
|
pickerSubtitle?: DateTimePickerV2Props['subtitle'];
|
|
39
40
|
disablePicker?: boolean;
|
|
41
|
+
pickerPosition?: PositionSetting;
|
|
40
42
|
};
|
|
41
43
|
export declare function useFormDateTimeFieldProvider(props: PropsType): {
|
|
42
44
|
dateInputValue: import('./useDateTimeDraft').DateInputValue;
|
package/dist/types/src/ui/formFields/dates/FormTimeField/hooks/useFormTimeFieldProvider.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { default as React } from 'react';
|
|
|
2
2
|
import { FieldPropsType } from '../../../../../hooks';
|
|
3
3
|
import { TimePickerV2 } from '../../../..';
|
|
4
4
|
import { DoubleInputItemProps } from './useInputFieldProps';
|
|
5
|
+
import { PositionSetting } from './useTimePickerController';
|
|
5
6
|
type TimePickerV2Props = React.ComponentProps<typeof TimePickerV2>;
|
|
6
7
|
type ValueBaseType = string;
|
|
7
8
|
type FieldProps = FieldPropsType<ValueBaseType>;
|
|
@@ -27,6 +28,7 @@ type PropsType = FieldProps & {
|
|
|
27
28
|
onTimeDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
|
|
28
29
|
pickerSubtitle?: TimePickerV2Props['subtitle'];
|
|
29
30
|
disablePicker?: boolean;
|
|
31
|
+
pickerPosition?: PositionSetting;
|
|
30
32
|
};
|
|
31
33
|
export declare function useFormTimeFieldProvider(props: PropsType): {
|
|
32
34
|
timeInputValue: import('./useTimeDraft').TimeInputValue;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { useModal } from '../../../../../hooks';
|
|
2
3
|
import { TimeInputValue } from './useTimeDraft';
|
|
3
4
|
import { useInputFieldController } from './useInputFieldController';
|
|
4
5
|
import { useDateUtils } from './useDateUtils';
|
|
6
|
+
export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
|
|
5
7
|
type PropsType = Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & Pick<ReturnType<typeof useDateUtils>, 'extractTimeInput'> & {
|
|
6
8
|
disablePicker?: boolean;
|
|
9
|
+
pickerPosition?: PositionSetting;
|
|
7
10
|
};
|
|
8
11
|
export declare function useTimePickerController(props: PropsType): {
|
|
9
12
|
timePickerRef: React.RefObject<(Pick<{
|
|
@@ -26,10 +26,11 @@ export * from './DateTimePicker';
|
|
|
26
26
|
export * from './Tooltip';
|
|
27
27
|
export * from './Dropdown';
|
|
28
28
|
export * from './Breadcrumbs';
|
|
29
|
-
export * from './
|
|
29
|
+
export * from './Drawer';
|
|
30
30
|
export * from './formFields';
|
|
31
31
|
export * from './DropdownV2';
|
|
32
32
|
export * from './MediaViewerV2';
|
|
33
33
|
export * from './datePickersV2';
|
|
34
34
|
export * from './ToggleV2';
|
|
35
|
+
export * from './TagV2';
|
|
35
36
|
export * from './visual';
|
package/package.json
CHANGED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { default as React, CSSProperties } from 'react';
|
|
2
|
-
export type CollapseState = 'open' | 'close';
|
|
3
|
-
type PropsType<W extends HTMLElement, C extends HTMLElement> = {
|
|
4
|
-
initElState?: CollapseState;
|
|
5
|
-
wrapperRef: React.RefObject<W | null>;
|
|
6
|
-
contentRef: React.RefObject<C | null>;
|
|
7
|
-
};
|
|
8
|
-
type FunReturnType = {
|
|
9
|
-
elState: CollapseState;
|
|
10
|
-
getElState: () => CollapseState;
|
|
11
|
-
open: () => void;
|
|
12
|
-
close: () => void;
|
|
13
|
-
toggle: () => void;
|
|
14
|
-
getContentInitStyle: () => CSSProperties;
|
|
15
|
-
getWrapperInitStyle: () => CSSProperties;
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* Хук React для создания сворачиваемых/разворачиваемых UI элементов с GSAP анимациями.
|
|
19
|
-
*
|
|
20
|
-
* @template W - Тип HTML элемента обёртки (контейнер, высота которого изменяется)
|
|
21
|
-
* @template C - Тип HTML элемента контента (внутреннее содержимое, которое сворачивается/разворачивается)
|
|
22
|
-
*
|
|
23
|
-
* @param {Object} props - Параметры хука
|
|
24
|
-
* @param {CollapseState} [props.initElState='open'] - Начальное состояние элемента ('open' или 'close')
|
|
25
|
-
* @param {React.RefObject<W>} props.wrapperRef - Ref объект для элемента обёртки
|
|
26
|
-
* @param {React.RefObject<C>} props.contentRef - Ref объект для элемента контента
|
|
27
|
-
*
|
|
28
|
-
* @returns {Object} Объект интерфейса хука
|
|
29
|
-
* @returns {CollapseState} returns.elState - Текущее состояние ('open' или 'close') - реактивное значение для рендеринга
|
|
30
|
-
* @returns {Function} returns.getElState - Функция получения последнего состояния - используйте в коллбэках для избежания stale closure
|
|
31
|
-
* @returns {Function} returns.open - Открывает элемент с анимацией
|
|
32
|
-
* @returns {Function} returns.close - Закрывает элемент с анимацией
|
|
33
|
-
* @returns {Function} returns.toggle - Переключает между состояниями открыто/закрыто
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* ```tsx
|
|
37
|
-
* const wrapperRef = useRef<HTMLDivElement>(null);
|
|
38
|
-
* const contentRef = useRef<HTMLDivElement>(null);
|
|
39
|
-
*
|
|
40
|
-
* const { elState, toggle } = useCollapsible({
|
|
41
|
-
* initElState: 'close',
|
|
42
|
-
* wrapperRef,
|
|
43
|
-
* contentRef
|
|
44
|
-
* });
|
|
45
|
-
*
|
|
46
|
-
* return (
|
|
47
|
-
* <div>
|
|
48
|
-
* <button onClick={toggle}>Переключить</button>
|
|
49
|
-
* <div ref={wrapperRef}>
|
|
50
|
-
* <div ref={contentRef}>
|
|
51
|
-
* Сворачиваемый контент здесь
|
|
52
|
-
* </div>
|
|
53
|
-
* </div>
|
|
54
|
-
* </div>
|
|
55
|
-
* );
|
|
56
|
-
* ```
|
|
57
|
-
*
|
|
58
|
-
* @remarks
|
|
59
|
-
* - Автоматически обрабатывает изменение размера контента через ResizeObserver в открытом состоянии
|
|
60
|
-
* - Использует GSAP для плавных анимаций с адаптивной длительностью на основе высоты контента
|
|
61
|
-
* - Элемент обёртки должен иметь overflow: hidden для предотвращения видимости контента при сворачивании
|
|
62
|
-
* - Ref объекты должны быть созданы через useRef перед вызовом хука
|
|
63
|
-
*/
|
|
64
|
-
export declare function useCollapsible<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): FunReturnType;
|
|
65
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './useCollapse';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { CollapseState } from '../../../hooks';
|
|
2
|
-
type PropsType = [
|
|
3
|
-
onUpdateState?: (state: CollapseState) => void,
|
|
4
|
-
initElState?: CollapseState
|
|
5
|
-
];
|
|
6
|
-
export declare function useCollapse<WEl extends HTMLElement, CEl extends HTMLElement>(...args: PropsType): {
|
|
7
|
-
actions: {
|
|
8
|
-
elState: CollapseState;
|
|
9
|
-
getElState: () => CollapseState;
|
|
10
|
-
open: () => void;
|
|
11
|
-
close: () => void;
|
|
12
|
-
toggle: () => void;
|
|
13
|
-
getContentInitStyle: () => import('react').CSSProperties;
|
|
14
|
-
getWrapperInitStyle: () => import('react').CSSProperties;
|
|
15
|
-
};
|
|
16
|
-
wrapperRef: import('react').RefObject<WEl | null>;
|
|
17
|
-
contentRef: import('react').RefObject<CEl | null>;
|
|
18
|
-
};
|
|
19
|
-
export {};
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { default as React, CSSProperties, ElementType } from 'react';
|
|
2
|
-
import { AsProps } from '../../../types';
|
|
3
|
-
import { CollapseState, useCollapsible } from '../../../hooks';
|
|
4
|
-
type CollapsibleReturnType = ReturnType<typeof useCollapsible>;
|
|
5
|
-
type PropsType<C extends ElementType, W extends ElementType> = AsProps<C, {
|
|
6
|
-
wrapperAs?: W;
|
|
7
|
-
wrapperClassName?: string;
|
|
8
|
-
wrapperStyle?: CSSProperties;
|
|
9
|
-
onUpdateState?: (state: CollapseState) => void;
|
|
10
|
-
initialState?: CollapseState;
|
|
11
|
-
style?: CSSProperties;
|
|
12
|
-
}, React.ComponentRef<C>>;
|
|
13
|
-
type RefType = Omit<CollapsibleReturnType, 'getWrapperInitStyle' | 'getContentInitStyle'>;
|
|
14
|
-
/**
|
|
15
|
-
* Collapse — полиморфный JSX-компонент, являющийся компонентной реализацией хука `useCollapsible`.
|
|
16
|
-
*
|
|
17
|
-
* Компонент рендерит “обёртку” (`wrapperAs`) и “контент” (`as`), создаёт `ref`-ы для обоих элементов
|
|
18
|
-
* и подключает к ним логику сворачивания/разворачивания (анимации/изменение размеров) через `useCollapsible`.
|
|
19
|
-
*
|
|
20
|
-
* @template C Тип элемента/компонента контента (prop `as`).
|
|
21
|
-
* @template W Тип элемента/компонента обёртки (prop `wrapperAs`).
|
|
22
|
-
*
|
|
23
|
-
* @param {object} props Props компонента.
|
|
24
|
-
* @param {C} [props.as='div'] Элемент/компонент для контента. В него пробрасываются остальные props.
|
|
25
|
-
* @param {W} [props.wrapperAs='div'] Элемент/компонент для обёртки (контейнер с изменяемой высотой).
|
|
26
|
-
* @param {string} [props.wrapperClassName] `className` для обёртки.
|
|
27
|
-
* @param {import('react').CSSProperties} [props.wrapperStyle] `style` для обёртки (будет объединён с `{ overflow: 'hidden' }`).
|
|
28
|
-
* @param {(state: import('@/hooks').CollapseState) => void} [props.onUpdateState]
|
|
29
|
-
* Коллбэк, вызываемый при смене состояния (`'open' | 'close'`).
|
|
30
|
-
*
|
|
31
|
-
* @returns {import('react').ReactElement | null} React-элемент или `null`.
|
|
32
|
-
*
|
|
33
|
-
* @ref
|
|
34
|
-
* Ref (imperative API) возвращает объект действий из `useCollapsible`, например:
|
|
35
|
-
* `open()`, `close()`, `toggle()`, `elState`, `getElState()` и связанные методы.
|
|
36
|
-
*
|
|
37
|
-
* @remarks
|
|
38
|
-
* - `as` и `wrapperAs` должны поддерживать `ref` на `HTMLElement` (обычно intrinsic теги или компоненты с `forwardRef`).
|
|
39
|
-
* - Обёртке принудительно задаётся `overflow: hidden` (плюс ваш `wrapperStyle`) для корректного визуального коллапса.
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* ```tsx
|
|
43
|
-
* const apiRef = useRef<CollapsibleReturnType>(null);
|
|
44
|
-
*
|
|
45
|
-
* <Collapse
|
|
46
|
-
* wrapperAs="div"
|
|
47
|
-
* as="div"
|
|
48
|
-
* wrapperClassName="my-wrapper"
|
|
49
|
-
* wrapperStyle={{ willChange: 'height' }}
|
|
50
|
-
* onUpdateState={(s) => console.log('state:', s)}
|
|
51
|
-
* ref={apiRef}
|
|
52
|
-
* >
|
|
53
|
-
* Контент
|
|
54
|
-
* </Collapse>
|
|
55
|
-
*
|
|
56
|
-
* // apiRef.current?.toggle();
|
|
57
|
-
* ```
|
|
58
|
-
*/
|
|
59
|
-
export declare const Collapse: <C extends ElementType, W extends ElementType, WEl extends HTMLElement = React.ComponentRef<W> extends HTMLElement ? React.ComponentRef<W> : never, CEl extends HTMLElement = React.ComponentRef<C> extends HTMLElement ? React.ComponentRef<C> : never>(props: PropsType<C, W> & React.RefAttributes<RefType>) => React.ReactElement | null;
|
|
60
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Collapse';
|
|
File without changes
|