@homecode/ui 5.15.0 → 5.15.2
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/esm/index.js +1 -1
- package/dist/esm/src/components/Autocomplete/Autocomplete.js +1 -1
- package/dist/esm/src/components/FoldedLine/FoldedLine.js +2 -3
- package/dist/esm/src/components/FoldedLine/FoldedLine.styl.js +1 -1
- package/dist/esm/src/components/InputFile/InputFile.js +1 -1
- package/dist/esm/src/components/NestedMenu/NestedMenu.js +1 -1
- package/dist/esm/src/components/Scroll/Scroll.js +1 -1
- package/dist/esm/src/components/Select/Select.hooks.js +1 -1
- package/dist/esm/src/components/Select/Select2.js +1 -1
- package/dist/esm/src/components/VideoPlayer/VideoPlayer.js +1 -1
- package/dist/esm/src/hooks/useEvent.js +1 -1
- package/dist/esm/src/hooks/useListKeyboardControl.js +1 -1
- package/dist/esm/types/src/hooks/useEvent.d.ts +2 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -111,7 +111,7 @@ export { queryParams };
|
|
|
111
111
|
export { useAwake } from './src/hooks/useAwake.js';
|
|
112
112
|
export { useThrottle, useThrottleCallback } from './src/hooks/useThrottle.js';
|
|
113
113
|
export { useDebounce, useDebounceCallback } from './src/hooks/useDebounce.js';
|
|
114
|
-
|
|
114
|
+
export { useEvent } from './src/hooks/useEvent.js';
|
|
115
115
|
export { useIsMounted } from './src/hooks/useIsMounted.js';
|
|
116
116
|
export { useListKeyboardControl } from './src/hooks/useListKeyboardControl.js';
|
|
117
117
|
export { useResizeObserver } from './src/hooks/useResizeObserver.js';
|
|
@@ -49,12 +49,12 @@ import '../../tools/queryParams.js';
|
|
|
49
49
|
import '../Draggable/Draggable.styl.js';
|
|
50
50
|
import '../DropZone/DropZone.styl.js';
|
|
51
51
|
import '../Flex/Flex.styl.js';
|
|
52
|
-
import '../Gap/Gap.styl.js';
|
|
53
52
|
import '../FoldedLine/FoldedLine.styl.js';
|
|
54
53
|
import '../FoldedLine/FoldedLineActionsContext.js';
|
|
55
54
|
import '../Form/Form.styl.js';
|
|
56
55
|
import '../Form/Validator.js';
|
|
57
56
|
import '../Form/SubmitButtons/SubmitButtons.styl.js';
|
|
57
|
+
import '../Gap/Gap.styl.js';
|
|
58
58
|
import '../ProgressCircular/ProgressCircular.styl.js';
|
|
59
59
|
import '../Slider/Slider.styl.js';
|
|
60
60
|
import '../VideoPlayer/VideoPlayer.styl.js';
|
|
@@ -2,7 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
4
4
|
import { Button } from '../Button/Button.js';
|
|
5
|
-
import { Gap } from '../Gap/Gap.js';
|
|
6
5
|
import { Icon } from '../Icon/Icon.js';
|
|
7
6
|
import { Scroll } from '../Scroll/Scroll.js';
|
|
8
7
|
import S from './FoldedLine.styl.js';
|
|
@@ -51,10 +50,10 @@ function FoldedLine({ trigger, children, defaultFolded = true, className, folded
|
|
|
51
50
|
setFolded(true);
|
|
52
51
|
}
|
|
53
52
|
};
|
|
54
|
-
return (jsxs("div", { className: cn(S.root, isFolded && S.folded, Boolean(children) && S.hasChildren, isClear && S.clear, className), onClick: handleClick, children: [jsxs("div", { ref: triggerRef, className: cn(Boolean(children) && S.triggerInteractive), children: [typeof trigger === 'function' ? trigger(isFolded) : trigger,
|
|
53
|
+
return (jsxs("div", { className: cn(S.root, isFolded && S.folded, Boolean(children) && S.hasChildren, isClear && S.clear, className), onClick: handleClick, children: [jsxs("div", { ref: triggerRef, className: cn(Boolean(children) && S.triggerInteractive), children: [typeof trigger === 'function' ? trigger(isFolded) : trigger, showChevron && jsx(Icon, { type: "chevronDown", className: S.chevron })] }), !isFolded && children && (jsx("div", { className: S.content, children: jsxs(FoldedLineActionsProvider, { registerAction: registerAction, children: [contentScrolling ? (jsx(Scroll, { y: true, size: "s", autoHide: true, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 4, after: 14 } }, onInnerRef: onScrollInnerRef, onScroll: onScrollInner, children: children })) : (jsx("div", { className: S.scrollInner, children: children })), jsxs("div", { className: S.actions, children: [Array.from(actions.values()), !hideFoldButton && (jsxs(Button, { size: "xs", onClick: e => {
|
|
55
54
|
e.stopPropagation();
|
|
56
55
|
setFolded(true);
|
|
57
|
-
}, children: [jsx(Icon, { type: "chevronUp", size: "
|
|
56
|
+
}, children: [jsx(Icon, { type: "chevronUp", size: "xs" }), "\u00A0Fold"] }))] })] }) }))] }));
|
|
58
57
|
}
|
|
59
58
|
|
|
60
59
|
export { FoldedLine };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".FoldedLine_root__lhi-1{border-radius:12px;display:flex;flex-direction:column;min-height:1rem;padding-left:calc(4px + var(--p-2));position:relative;transition:.1s ease-out;transition-property:border-radius,margin,background-color}.FoldedLine_root__lhi-1:before{background:var(--accent-color);border-radius:2px;bottom:2px;content:\"\";height:calc(100% - 4px);left:6px;opacity:.1;pointer-events:none;position:absolute;top:2px;width:4px}.FoldedLine_root__lhi-1:hover:before,.FoldedLine_root__lhi-1:not(.FoldedLine_folded__6zX8d):before{opacity:.7}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d{border-radius:0;margin:0}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d .FoldedLine_scroll__X7T5v{height:1em}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA.FoldedLine_folded__6zX8d{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA:not(.FoldedLine_folded__6zX8d) .FoldedLine_triggerInteractive__sCLnl{border-top-left-radius:inherit;border-top-right-radius:inherit}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA{border-radius:inherit;min-height:0;padding:0}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA:before{content:none}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_hasChildren__8hCZA{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_folded__6zX8d{-webkit-line-clamp:unset;-webkit-box-orient:unset;line-clamp:none;display:flex;overflow:visible;text-overflow:clip}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA .FoldedLine_triggerInteractive__sCLnl{opacity:1}.FoldedLine_chevron__zxu20{
|
|
3
|
+
var css_248z = ".FoldedLine_root__lhi-1{border-radius:12px;display:flex;flex-direction:column;min-height:1rem;padding-left:calc(4px + var(--p-2));position:relative;transition:.1s ease-out;transition-property:border-radius,margin,background-color}.FoldedLine_root__lhi-1:before{background:var(--accent-color);border-radius:2px;bottom:2px;content:\"\";height:calc(100% - 4px);left:6px;opacity:.1;pointer-events:none;position:absolute;top:2px;width:4px}.FoldedLine_root__lhi-1:hover:before,.FoldedLine_root__lhi-1:not(.FoldedLine_folded__6zX8d):before{opacity:.7}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d{border-radius:0;margin:0}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d .FoldedLine_scroll__X7T5v{height:1em}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA.FoldedLine_folded__6zX8d{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA:not(.FoldedLine_folded__6zX8d) .FoldedLine_triggerInteractive__sCLnl{border-top-left-radius:inherit;border-top-right-radius:inherit}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA{border-radius:inherit;min-height:0;padding:0}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA:before{content:none}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_hasChildren__8hCZA{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_folded__6zX8d{-webkit-line-clamp:unset;-webkit-box-orient:unset;line-clamp:none;display:flex;overflow:visible;text-overflow:clip}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA .FoldedLine_triggerInteractive__sCLnl{opacity:1}.FoldedLine_chevron__zxu20{opacity:.3;position:absolute;right:var(--p-2);transition:transform .1s ease-out,opacity .1s ease-out}.FoldedLine_root__lhi-1:hover .FoldedLine_chevron__zxu20{opacity:1}.FoldedLine_folded__6zX8d .FoldedLine_chevron__zxu20{transform:rotate(-90deg)}.FoldedLine_lineCompleted__sEfzm:before{background:var(--active-color)}.FoldedLine_lineInProgress__VcwjJ:before{animation:FoldedLine_foldedLinePulse__y-Dle 1.4s ease-in-out infinite}.FoldedLine_triggerInteractive__sCLnl{align-items:center;cursor:pointer;display:flex;gap:var(--p-1);opacity:.8;padding-right:var(--p-6);transition:background-color .1s ease-out}.FoldedLine_triggerInteractive__sCLnl:hover{opacity:1}.FoldedLine_triggerInteractive__sCLnl:hover:before{background-color:var(--accent-color-alpha-900)}.FoldedLine_header__gyQpI{cursor:pointer;height:100%;position:absolute;transition:opacity .1s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:1}.FoldedLine_folded__6zX8d{-webkit-line-clamp:1;-webkit-box-orient:vertical;line-clamp:1;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;transition:opacity .1s ease-out}.FoldedLine_folded__6zX8d:before{opacity:.4}.FoldedLine_folded__6zX8d .FoldedLine_scroll__X7T5v{max-height:1.5em}.FoldedLine_content__POIox{position:relative}.FoldedLine_scroll__X7T5v{max-height:50vh}.FoldedLine_scrollInner__1BGOP>div{-webkit-user-select:text;-moz-user-select:text;user-select:text}.FoldedLine_actions__SmF3b{align-items:center;bottom:0;display:flex;flex-shrink:0;flex-wrap:wrap;gap:var(--p-1);justify-content:flex-end;padding:0 var(--p-5) var(--p-3) var(--p-2);position:absolute;right:0}.FoldedLine_actions__SmF3b>button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes FoldedLine_foldedLinePulse__y-Dle{0%,to{background-color:var(--accent-color-alpha-400)}50%{background-color:var(--active-color)}}";
|
|
4
4
|
var S = {"root":"FoldedLine_root__lhi-1","folded":"FoldedLine_folded__6zX8d","scroll":"FoldedLine_scroll__X7T5v","hasChildren":"FoldedLine_hasChildren__8hCZA","triggerInteractive":"FoldedLine_triggerInteractive__sCLnl","clear":"FoldedLine_clear__t47RA","chevron":"FoldedLine_chevron__zxu20","lineCompleted":"FoldedLine_lineCompleted__sEfzm","lineInProgress":"FoldedLine_lineInProgress__VcwjJ","foldedLinePulse":"FoldedLine_foldedLinePulse__y-Dle","header":"FoldedLine_header__gyQpI","content":"FoldedLine_content__POIox","scrollInner":"FoldedLine_scrollInner__1BGOP","actions":"FoldedLine_actions__SmF3b"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -51,12 +51,12 @@ import '../Dialogue/Dialogue.js';
|
|
|
51
51
|
import { Draggable } from '../Draggable/Draggable.js';
|
|
52
52
|
import '../DropZone/DropZone.styl.js';
|
|
53
53
|
import '../Flex/Flex.styl.js';
|
|
54
|
-
import '../Gap/Gap.styl.js';
|
|
55
54
|
import '../FoldedLine/FoldedLine.styl.js';
|
|
56
55
|
import '../FoldedLine/FoldedLineActionsContext.js';
|
|
57
56
|
import '../Form/Form.styl.js';
|
|
58
57
|
import '../Form/Validator.js';
|
|
59
58
|
import '../Form/SubmitButtons/SubmitButtons.styl.js';
|
|
59
|
+
import '../Gap/Gap.styl.js';
|
|
60
60
|
import '../ProgressCircular/ProgressCircular.styl.js';
|
|
61
61
|
import '../Slider/Slider.styl.js';
|
|
62
62
|
import '../VideoPlayer/VideoPlayer.styl.js';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import cn from 'classnames';
|
|
3
2
|
import { useState, useEffect } from 'react';
|
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
|
5
4
|
import { Popup } from '../Popup/Popup.js';
|
|
6
5
|
import S from './NestedMenu.styl.js';
|
|
6
|
+
import cn from 'classnames';
|
|
7
7
|
|
|
8
8
|
const MOBILE_MQ = '(max-width: 720px)';
|
|
9
9
|
const HOVER_MQ = '(hover: hover) and (pointer: fine)';
|
|
@@ -5,7 +5,7 @@ import Time from 'timen';
|
|
|
5
5
|
import { isTouch } from '../../tools/dom.js';
|
|
6
6
|
import { observe, unobserve } from '../../tools/resizeObserver.js';
|
|
7
7
|
import S from './Scroll.styl.js';
|
|
8
|
-
import useEvent from '../../hooks/useEvent.js';
|
|
8
|
+
import { useEvent } from '../../hooks/useEvent.js';
|
|
9
9
|
import { useDebounce } from '../../hooks/useDebounce.js';
|
|
10
10
|
|
|
11
11
|
const getEventCoords = e => ({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
|
|
2
|
-
import useEvent from '../../hooks/useEvent.js';
|
|
2
|
+
import { useEvent } from '../../hooks/useEvent.js';
|
|
3
3
|
import { idsKey, matchesSearch, isSelectable, mapById, toIds } from './Select.helpers.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -14,7 +14,7 @@ import { Popup } from '../Popup/Popup.js';
|
|
|
14
14
|
import { RequiredStar } from '../RequiredStar/RequiredStar.js';
|
|
15
15
|
import { Scroll } from '../Scroll/Scroll.js';
|
|
16
16
|
import { useThrottle } from '../../hooks/useThrottle.js';
|
|
17
|
-
import useEvent from '../../hooks/useEvent.js';
|
|
17
|
+
import { useEvent } from '../../hooks/useEvent.js';
|
|
18
18
|
import { generateUID } from '../../tools/uid.js';
|
|
19
19
|
import { useSelectedIds, useSelectOptions, useSelectOpenState, useKeyboardNav } from './Select.hooks.js';
|
|
20
20
|
import S from './Select.styl.js';
|
|
@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon.js';
|
|
|
6
6
|
import { Popup } from '../Popup/Popup.js';
|
|
7
7
|
import { ProgressCircular } from '../ProgressCircular/ProgressCircular.js';
|
|
8
8
|
import { Slider } from '../Slider/Slider.js';
|
|
9
|
-
import useEvent from '../../hooks/useEvent.js';
|
|
9
|
+
import { useEvent } from '../../hooks/useEvent.js';
|
|
10
10
|
import debounce from '../../tools/debounce.js';
|
|
11
11
|
import S from './VideoPlayer.styl.js';
|
|
12
12
|
import { TIME_PERSIST_DEBOUNCE_MS, saveStorage, formatTime, VOLUME_POPUP_HIDE_MS, clamp, leadingDebounce, isEditableTarget, loadStorage, getBufferedPercent, DOUBLE_TAP_MS, getStorageKey, timeToProgressPct, KEYBOARD_DEBOUNCE_MS, getSeekDelta, VOLUME_STEP } from './VideoPlayer.helpers.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useCallback, useEffect } from 'react';
|
|
2
|
-
import useEvent from './useEvent.js';
|
|
2
|
+
import { useEvent } from './useEvent.js';
|
|
3
3
|
|
|
4
4
|
const useListKeyboardControl = ({ isActive, itemsCount, onSelect, }) => {
|
|
5
5
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
@@ -6,4 +6,5 @@ export type UseEventParams = {
|
|
|
6
6
|
isActive?: boolean;
|
|
7
7
|
isCapture?: boolean;
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export declare function useEvent({ elem, event, callback, isActive, isCapture, }: UseEventParams): void;
|
|
10
|
+
export default useEvent;
|