npm - @ryuzaki13/react-foundation-ui - Versions diffs - 3.1.10 → 3.2.0 - Mend

@ryuzaki13/react-foundation-ui 3.1.10 → 3.2.0

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.

Files changed (262) hide show

package/dist/notifications/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../src/notifications/model/NotificationsProvider.tsx","../../src/notifications/ui/Notification.module.scss","../../src/notifications/ui/NotificationsHost.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components /\nimport { createContext, PropsWithChildren, useContext, useEffect, useMemo } from \"react\";\n\nimport { createMissingContextError } from \"@ryuzaki13/react-foundation-lib/error\";\nimport {\n\tbindNotifications,\n\tcreateNotificationsStore,\n\tNotificationId,\n\tNotificationPushInput,\n\tNotificationsStoreApi,\n\tNotificationType\n} from \"@ryuzaki13/react-foundation-lib/notifications\";\nimport { useStore } from \"zustand\";\n\nconst NotificationsContext = createContext<NotificationsStoreApi \| null>(null);\n\n/\n Провайдер уведомлений приложения. Хранит состояние списка уведомлений и предоставляет хуки доступа к нему.\n /\nexport function NotificationsProvider({ children }: PropsWithChildren) {\n\tconst store = useMemo(() => createNotificationsStore(), []);\n\n\tuseEffect(() => {\n\t\treturn bindNotifications(store);\n\t}, [store]);\n\n\treturn <NotificationsContext.Provider value={store}>{children}</NotificationsContext.Provider>;\n}\n\nfunction useNotificationApi() {\n\tconst ctx = useContext(NotificationsContext);\n\tif (!ctx) {\n\t\tthrow createMissingContextError({\n\t\t\thookName: \"useNotificationApi\",\n\t\t\tproviderName: \"NotificationsProvider\"\n\t\t});\n\t}\n\treturn ctx;\n}\n\nexport function useNotifications() {\n\tconst api = useNotificationApi();\n\treturn useStore(api, (s) => s.items);\n}\n\nexport function useNotify() {\n\tconst api = useNotificationApi();\n\tconst actions = useStore(api, (s) => s.actions);\n\n\tconst mk = (type: NotificationType) => (message: string, opts?: Omit<NotificationPushInput, \"type\" \| \"message\">) =>\n\t\tactions.push({ type, message, ...opts });\n\n\treturn {\n\t\t...actions,\n\t\tsuccess: mk(\"success\"),\n\t\tinfo: mk(\"info\"),\n\t\twarning: mk(\"warning\"),\n\t\terror: mk(\"error\")\n\t};\n}\n\nexport function useNotificationById(id: NotificationId) {\n\tconst api = useNotificationApi();\n\treturn useStore(api, (s) => s.items.find((n) => n.id === id));\n}\n","@use \"@/styles/mixins\" as ;\n@use \"@/styles/tone-derived\" as toneDerived;\n\n.container {\n\tposition: fixed;\n\tz-index: var(--z-notify);\n\tbottom: 0;\n\tleft: 0;\n\tdisplay: grid;\n\tgap: var(--space-sm);\n\tpadding: var(--space-lg);\n\twidth: min(28em, calc(100dvw - var(--space-lg) * 2));\n\tpointer-events: none;\n}\n\n.card {\n\t--notify-accent: var(--border-1);\n\t--notify-accent-surface: var(--surface-1);\n\t--notify-accent-text: var(--accent-text);\n\n\tposition: relative;\n\toverflow: hidden;\n\tpointer-events: auto;\n\twidth: 100%;\n\tpadding: var(--space-md);\n\t// border: var(--border);\n\tborder-left: 0.3125em solid var(--notify-accent);\n\tborder-radius: var(--radius-md);\n\tbackground: linear-gradient(37deg, var(--notify-accent-surface), var(--surface-0));\n\tcolor: var(--content-0);\n\tbox-shadow: var(--shadow-md);\n}\n\n.info {\n\t--notify-accent: var(--info-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"info\");\n\t--notify-accent-text: var(--info-text);\n}\n\n.success {\n\t--notify-accent: var(--success-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"success\");\n\t--notify-accent-text: var(--success-text);\n}\n\n.warning {\n\t--notify-accent: var(--warning-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"warning\");\n\t--notify-accent-text: var(--warning-text);\n}\n\n.error {\n\t--notify-accent: var(--error-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"error\");\n\t--notify-accent-text: var(--error-text);\n}\n\n.header,\n.content,\n.copy {\n\tmin-width: 0;\n}\n\n.content {\n\tmin-width: 0;\n\tflex: 1;\n}\n\n.icon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: var(--control-height);\n\theight: var(--control-height);\n\tborder-radius: 50%;\n\tbackground-color: var(--notify-accent-surface);\n\tcolor: var(--notify-accent-text);\n\tborder: var(--border-width) solid color-mix(in srgb, var(--notify-accent) 22%, transparent);\n\n\tsvg {\n\t\twidth: 1.125em;\n\t\theight: 1.125em;\n\t}\n}\n\n.kicker {\n\tmargin-bottom: var(--space-xs);\n\tcolor: var(--notify-accent-text);\n\tfont-size: var(--font-size-xs);\n\tfont-weight: 600;\n\tfont-variation-settings: \"wght\" 600;\n\tletter-spacing: 0.04em;\n\ttext-transform: uppercase;\n}\n\n.title {\n\tcolor: var(--notify-accent-text);\n\tfont-weight: 600;\n\tfont-variation-settings: \"wght\" 600;\n}\n\n.message {\n\tmargin-top: var(--space-xs);\n\tcolor: var(--content-0);\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--space-xs);\n\tmargin-top: var(--space-sm);\n}\n\n@include mobile {\n\t.container {\n\t\tpadding: var(--space-md);\n\t\twidth: min(100dvw, calc(100dvw - var(--space-md) * 2));\n\t}\n}\n","import { NotificationType } from \"@ryuzaki13/react-foundation-lib/notifications\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { AlertCircleIcon, CheckCircle2Icon, InfoIcon, TriangleAlertIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"../../button\";\nimport { FlexContainer } from \"../../flex\";\nimport { useNotifications, useNotify } from \"../model/NotificationsProvider\";\n\nimport styles from \"./Notification.module.scss\";\n\nconst notificationConfig: Record<\n\tNotificationType,\n\t{\n\t\ttitle: string;\n\t\tIcon: typeof InfoIcon;\n\t}\n> = {\n\tinfo: {\n\t\ttitle: \"Информация\",\n\t\tIcon: InfoIcon\n\t},\n\tsuccess: {\n\t\ttitle: \"Успешно\",\n\t\tIcon: CheckCircle2Icon\n\t},\n\twarning: {\n\t\ttitle: \"Предупреждение\",\n\t\tIcon: TriangleAlertIcon\n\t},\n\terror: {\n\t\ttitle: \"Ошибка\",\n\t\tIcon: AlertCircleIcon\n\t}\n};\n\n/*\n Хост для визуального отображения очереди уведомлений.\n * Обычно монтируется один раз на уровне приложения рядом с провайдером уведомлений.\n */\nexport function NotificationsHost() {\n\tconst items = useNotifications();\n\tconst { dismiss } = useNotify();\n\n\treturn (\n\t\t<div className={styles.container} aria-label=\"Область уведомлений\" aria-live=\"polite\" aria-relevant=\"additions text\">\n\t\t\t{items.map((notification) => {\n\t\t\t\tconst config = notificationConfig[notification.type];\n\t\t\t\tconst title = notification.title ?? config.title;\n\t\t\t\tconst Icon = config.Icon;\n\n\t\t\t\treturn (\n\t\t\t\t\t<article\n\t\t\t\t\t\tkey={notification.id}\n\t\t\t\t\t\trole={notification.type === \"error\" ? \"alert\" : \"status\"}\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\tclassName={cn(styles.card, styles[notification.type])}>\n\t\t\t\t\t\t<FlexContainer align=\"start\" justify=\"between\" gap=\"sm\" className={styles.header}>\n\t\t\t\t\t\t\t<FlexContainer align=\"start\" gap=\"sm\" className={styles.content}>\n\t\t\t\t\t\t\t\t<span className={styles.icon} aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t<div className={styles.copy}>\n\t\t\t\t\t\t\t\t\t<div className={styles.kicker}>{config.title}</div>\n\t\t\t\t\t\t\t\t\t{notification.title ? <div className={styles.title}>{title}</div> : null}\n\t\t\t\t\t\t\t\t\t<div className={styles.message}>{notification.message}</div>\n\n\t\t\t\t\t\t\t\t\t{notification.actions?.length ? (\n\t\t\t\t\t\t\t\t\t\t<div className={styles.actions}>\n\t\t\t\t\t\t\t\t\t\t\t{notification.actions.map((action) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={action.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\ttone={action.tone ?? notification.type}\n\t\t\t\t\t\t\t\t\t\t\t\t\tappearance=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-ui=\"notification-action-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-action=\"notification-action\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => void action.onClick()}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{action.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</FlexContainer>\n\n\t\t\t\t\t\t\t{notification.dismissible !== false ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={<XIcon />}\n\t\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\t\ttone={notification.type}\n\t\t\t\t\t\t\t\t\tonClick={() => dismiss(notification.id)}\n\t\t\t\t\t\t\t\t\taria-label=\"Закрыть уведомление\"\n\t\t\t\t\t\t\t\t\tdata-ui=\"notification-dismiss-button\"\n\t\t\t\t\t\t\t\t\tdata-action=\"dismiss-notification\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</FlexContainer>\n\t\t\t\t\t</article>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../src/notifications/model/NotificationsProvider.tsx","../../src/notifications/ui/Notification.module.scss","../../src/notifications/ui/NotificationsHost.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components /\nimport { createContext, PropsWithChildren, useContext, useEffect, useMemo } from \"react\";\n\nimport { createMissingContextError } from \"@ryuzaki13/react-foundation-lib/error\";\nimport {\n\tbindNotifications,\n\tcreateNotificationsStore,\n\tNotificationId,\n\tNotificationPushInput,\n\tNotificationsStoreApi,\n\tNotificationType\n} from \"@ryuzaki13/react-foundation-lib/notifications\";\nimport { useStore } from \"zustand\";\n\nconst NotificationsContext = createContext<NotificationsStoreApi \| null>(null);\n\n/\n Провайдер уведомлений приложения. Хранит состояние списка уведомлений и предоставляет хуки доступа к нему.\n /\nexport function NotificationsProvider({ children }: PropsWithChildren) {\n\tconst store = useMemo(() => createNotificationsStore(), []);\n\n\tuseEffect(() => {\n\t\treturn bindNotifications(store);\n\t}, [store]);\n\n\treturn <NotificationsContext.Provider value={store}>{children}</NotificationsContext.Provider>;\n}\n\nfunction useNotificationApi() {\n\tconst ctx = useContext(NotificationsContext);\n\tif (!ctx) {\n\t\tthrow createMissingContextError({\n\t\t\thookName: \"useNotificationApi\",\n\t\t\tproviderName: \"NotificationsProvider\"\n\t\t});\n\t}\n\treturn ctx;\n}\n\nexport function useNotifications() {\n\tconst api = useNotificationApi();\n\treturn useStore(api, (s) => s.items);\n}\n\nexport function useNotify() {\n\tconst api = useNotificationApi();\n\tconst actions = useStore(api, (s) => s.actions);\n\n\tconst mk = (type: NotificationType) => (message: string, opts?: Omit<NotificationPushInput, \"type\" \| \"message\">) =>\n\t\tactions.push({ type, message, ...opts });\n\n\treturn {\n\t\t...actions,\n\t\tsuccess: mk(\"success\"),\n\t\tinfo: mk(\"info\"),\n\t\twarning: mk(\"warning\"),\n\t\terror: mk(\"error\")\n\t};\n}\n\nexport function useNotificationById(id: NotificationId) {\n\tconst api = useNotificationApi();\n\treturn useStore(api, (s) => s.items.find((n) => n.id === id));\n}\n","@use \"@/styles/mixins\" as ;\n@use \"@/styles/tone-derived\" as toneDerived;\n\n.container {\n\tposition: fixed;\n\tz-index: var(--z-notify);\n\tbottom: 0;\n\tleft: 0;\n\tdisplay: grid;\n\tgap: var(--space-sm);\n\tpadding: var(--space-lg);\n\twidth: min(28em, calc(100dvw - var(--space-lg) * 2));\n\tpointer-events: none;\n}\n\n.card {\n\t--notify-accent: var(--border-1);\n\t--notify-accent-surface: var(--surface-1);\n\t--notify-accent-text: var(--accent-text);\n\n\tposition: relative;\n\toverflow: hidden;\n\tpointer-events: auto;\n\twidth: 100%;\n\tpadding: var(--space-md);\n\t// border: var(--border);\n\tborder-left: 0.3125em solid var(--notify-accent);\n\tborder-radius: var(--radius-md);\n\tbackground: linear-gradient(37deg, var(--notify-accent-surface), var(--surface-0));\n\tcolor: var(--content-0);\n\tbox-shadow: var(--shadow-md);\n}\n\n.info {\n\t--notify-accent: var(--info-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"info\");\n\t--notify-accent-text: var(--info-text);\n}\n\n.success {\n\t--notify-accent: var(--success-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"success\");\n\t--notify-accent-text: var(--success-text);\n}\n\n.warning {\n\t--notify-accent: var(--warning-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"warning\");\n\t--notify-accent-text: var(--warning-text);\n}\n\n.error {\n\t--notify-accent: var(--error-border);\n\t@include toneDerived.tone-soft-declaration(\"--notify-accent-surface\", \"error\");\n\t--notify-accent-text: var(--error-text);\n}\n\n.header,\n.content,\n.copy {\n\tmin-width: 0;\n}\n\n.content {\n\tmin-width: 0;\n\tflex: 1;\n}\n\n.icon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: var(--control-height);\n\theight: var(--control-height);\n\tborder-radius: 50%;\n\tbackground-color: var(--notify-accent-surface);\n\tcolor: var(--notify-accent-text);\n\tborder: var(--border-width) solid color-mix(in srgb, var(--notify-accent) 22%, transparent);\n\n\tsvg {\n\t\twidth: 1.125em;\n\t\theight: 1.125em;\n\t}\n}\n\n.kicker {\n\tmargin-bottom: var(--space-xs);\n\tcolor: var(--notify-accent-text);\n\tfont-size: var(--font-size-xs);\n\tfont-weight: 600;\n\tfont-variation-settings: \"wght\" 600;\n\tletter-spacing: 0.04em;\n\ttext-transform: uppercase;\n}\n\n.title {\n\tcolor: var(--notify-accent-text);\n\tfont-weight: 600;\n\tfont-variation-settings: \"wght\" 600;\n}\n\n.message {\n\tmargin-top: var(--space-xs);\n\tcolor: var(--content-0);\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--space-xs);\n\tmargin-top: var(--space-sm);\n}\n\n@include mobile {\n\t.container {\n\t\tpadding: var(--space-md);\n\t\t// Контейнер занимает viewport целиком, а padding задаёт карточкам симметричные отступы от его краёв.\n\t\twidth: 100dvw;\n\t}\n}\n","import { NotificationType } from \"@ryuzaki13/react-foundation-lib/notifications\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { AlertCircleIcon, CheckCircle2Icon, InfoIcon, TriangleAlertIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"../../button\";\nimport { FlexContainer } from \"../../flex\";\nimport { useNotifications, useNotify } from \"../model/NotificationsProvider\";\n\nimport styles from \"./Notification.module.scss\";\n\nconst notificationConfig: Record<\n\tNotificationType,\n\t{\n\t\ttitle: string;\n\t\tIcon: typeof InfoIcon;\n\t}\n> = {\n\tinfo: {\n\t\ttitle: \"Информация\",\n\t\tIcon: InfoIcon\n\t},\n\tsuccess: {\n\t\ttitle: \"Успешно\",\n\t\tIcon: CheckCircle2Icon\n\t},\n\twarning: {\n\t\ttitle: \"Предупреждение\",\n\t\tIcon: TriangleAlertIcon\n\t},\n\terror: {\n\t\ttitle: \"Ошибка\",\n\t\tIcon: AlertCircleIcon\n\t}\n};\n\n/*\n Хост для визуального отображения очереди уведомлений.\n * Обычно монтируется один раз на уровне приложения рядом с провайдером уведомлений.\n */\nexport function NotificationsHost() {\n\tconst items = useNotifications();\n\tconst { dismiss } = useNotify();\n\n\treturn (\n\t\t<div className={styles.container} aria-label=\"Область уведомлений\" aria-live=\"polite\" aria-relevant=\"additions text\">\n\t\t\t{items.map((notification) => {\n\t\t\t\tconst config = notificationConfig[notification.type];\n\t\t\t\tconst title = notification.title ?? config.title;\n\t\t\t\tconst Icon = config.Icon;\n\n\t\t\t\treturn (\n\t\t\t\t\t<article\n\t\t\t\t\t\tkey={notification.id}\n\t\t\t\t\t\trole={notification.type === \"error\" ? \"alert\" : \"status\"}\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\tclassName={cn(styles.card, styles[notification.type])}>\n\t\t\t\t\t\t<FlexContainer align=\"start\" justify=\"between\" gap=\"sm\" className={styles.header}>\n\t\t\t\t\t\t\t<FlexContainer align=\"start\" gap=\"sm\" className={styles.content}>\n\t\t\t\t\t\t\t\t<span className={styles.icon} aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t<div className={styles.copy}>\n\t\t\t\t\t\t\t\t\t<div className={styles.kicker}>{config.title}</div>\n\t\t\t\t\t\t\t\t\t{notification.title ? <div className={styles.title}>{title}</div> : null}\n\t\t\t\t\t\t\t\t\t<div className={styles.message}>{notification.message}</div>\n\n\t\t\t\t\t\t\t\t\t{notification.actions?.length ? (\n\t\t\t\t\t\t\t\t\t\t<div className={styles.actions}>\n\t\t\t\t\t\t\t\t\t\t\t{notification.actions.map((action) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={action.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\ttone={action.tone ?? notification.type}\n\t\t\t\t\t\t\t\t\t\t\t\t\tappearance=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-ui=\"notification-action-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-action=\"notification-action\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => void action.onClick()}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{action.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</FlexContainer>\n\n\t\t\t\t\t\t\t{notification.dismissible !== false ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={<XIcon />}\n\t\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\t\ttone={notification.type}\n\t\t\t\t\t\t\t\t\tonClick={() => dismiss(notification.id)}\n\t\t\t\t\t\t\t\t\taria-label=\"Закрыть уведомление\"\n\t\t\t\t\t\t\t\t\tdata-ui=\"notification-dismiss-button\"\n\t\t\t\t\t\t\t\t\tdata-action=\"dismiss-notification\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</FlexContainer>\n\t\t\t\t\t</article>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/splitter/Splitter.d.ts CHANGED Viewed

@@ -6,9 +6,11 @@ export type SplitterProps = PropsWithChildren<{
     initial?: number;
     min?: number;
     max?: number;
+    /** Сообщает итоговую долю первой панели после завершения drag или шага с клавиатуры. */
+    onChange?: (ratio: number) => void;
     className?: string;
     collapsedPane?: SplitterPane | null;
 }>;
-export declare function Splitter({ direction, initial, min, max, className, collapsedPane, children }: SplitterProps): string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element;
+export declare function Splitter({ direction, initial, min, max, onChange, className, collapsedPane, children }: SplitterProps): string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Splitter.d.ts.map

package/dist/splitter/Splitter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Splitter.d.ts","sourceRoot":"","sources":["../../src/splitter/Splitter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAQd,MAAM,OAAO,CAAC;AAMf,KAAK,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AACnD,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;IAC7C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACpC,CAAC,CAAC;~~AAgSH~~,wBAAgB,QAAQ,CAAC,EACxB,SAAsB,EACtB,OAAyB,EACzB,GAAiB,EACjB,GAAiB,EACjB,SAAS,EACT,aAAoB,EACpB,QAAQ,EACR,EAAE,aAAa,kSASf"}
1	+ {"version":3,"file":"Splitter.d.ts","sourceRoot":"","sources":["../../src/splitter/Splitter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAQd,MAAM,OAAO,CAAC;AAMf,KAAK,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AACnD,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;IAC7C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACpC,CAAC,CAAC;AAmSH,wBAAgB,QAAQ,CAAC,EACxB,SAAsB,EACtB,OAAyB,EACzB,GAAiB,EACjB,GAAiB,EACjB,QAAQ,EACR,SAAS,EACT,aAAoB,EACpB,QAAQ,EACR,EAAE,aAAa,kSASf"}

package/dist/splitter/index.js CHANGED Viewed

@@ -39,75 +39,77 @@ function y(e, t) {
 function b(e, t) {
 	return t === "start" ? 0 : t === "end" ? 1 : e;
 }
-function x({ direction: e, initial: o, min: s, max: c, collapsedPane: l }) {
-	let [u, d] = g(s, c), p = i(null), x = i(null), S = i(null), C = i(null), w = i(null), T = i(null), E = i(0), D = i(m(h(o, f), u, d)), O = i(o), [k, A] = a(() => m(h(o, f), u, d)), j = i(k), M = t((e) => {
-		j.current = e, x.current?.style.setProperty("flex-basis", `${b(e, l) * 100}%`), S.current?.setAttribute("aria-valuenow", `${Math.round(e * 100)}`);
-	}, [l]), N = () => {
-		if (T.current !== null && (cancelAnimationFrame(T.current), T.current = null), w.current === null) return j.current;
-		let e = w.current;
-		return w.current = null, M(e), e;
-	}, P = (e) => {
-		w.current = e, T.current === null && (T.current = requestAnimationFrame(() => {
-			T.current = null, w.current !== null && M(w.current);
+function x({ direction: e, initial: o, min: s, max: c, onChange: l, collapsedPane: u }) {
+	let [d, p] = g(s, c), x = i(null), S = i(null), C = i(null), w = i(null), T = i(null), E = i(null), D = i(0), O = i(m(h(o, f), d, p)), k = i(o), [A, j] = a(() => m(h(o, f), d, p)), M = i(A), N = t((e) => {
+		M.current = e, S.current?.style.setProperty("flex-basis", `${b(e, u) * 100}%`), C.current?.setAttribute("aria-valuenow", `${Math.round(e * 100)}`);
+	}, [u]), P = () => {
+		if (E.current !== null && (cancelAnimationFrame(E.current), E.current = null), T.current === null) return M.current;
+		let e = T.current;
+		return T.current = null, N(e), e;
+	}, F = (e) => {
+		T.current = e, E.current === null && (E.current = requestAnimationFrame(() => {
+			E.current = null, T.current !== null && N(T.current);
 		}));
-	}, F = () => {
-		C.current?.(), C.current = null;
-	}, I = (e) => {
-		N(), A(m(e, u, d));
+	}, I = () => {
+		w.current?.(), w.current = null;
+	}, L = (e, t = M.current) => {
+		P();
+		let n = m(e, d, p);
+		j(n), n !== t && l?.(n);
 	};
 	return r(() => {
-		M(k);
-	}, [M, k]), n(() => {
-		A((e) => {
-			let t = O.current !== o;
-			return O.current = o, m(t ? h(o, f) : e, u, d);
+		N(A);
+	}, [N, A]), n(() => {
+		j((e) => {
+			let t = k.current !== o;
+			return k.current = o, m(t ? h(o, f) : e, d, p);
 		});
 	}, [
 		o,
-		u,
-		d
+		d,
+		p
 	]), n(() => () => {
-		F(), T.current !== null && cancelAnimationFrame(T.current);
+		I(), E.current !== null && cancelAnimationFrame(E.current);
 	}, []), {
-		containerRef: p,
-		topLeftRef: x,
-		separatorRef: S,
-		ratio: k,
-		minRatio: u,
-		maxRatio: d,
+		containerRef: x,
+		topLeftRef: S,
+		separatorRef: C,
+		ratio: A,
+		minRatio: d,
+		maxRatio: p,
 		handleSeparatorPointerDown: (t) => {
 			if (t.button !== 0) return;
 			t.preventDefault();
-			let n = p.current;
+			let n = x.current;
 			if (!n) return;
-			F();
+			I();
 			try {
 				t.currentTarget.setPointerCapture?.(t.pointerId);
 			} catch {}
-			E.current = _(e, t), D.current = j.current;
+			D.current = _(e, t), O.current = M.current;
 			let r = (t) => {
 				let r = v(e, n.getBoundingClientRect());
 				if (r <= 0) return;
-				let i = _(e, t) - E.current, a = m(D.current + i / r, u, d);
-				P(a);
+				let i = _(e, t) - D.current, a = m(O.current + i / r, d, p);
+				F(a);
 			}, i = () => {
-				F(), A(N());
+				I(), L(P(), O.current);
 			};
-			C.current = () => {
+			w.current = () => {
 				document.removeEventListener("pointermove", r), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i);
 			}, document.addEventListener("pointermove", r), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i);
 		},
 		handleSeparatorKeyDown: (t) => {
 			let n = y(e, t.key);
 			if (n !== null) {
-				t.preventDefault(), I(j.current + n);
+				t.preventDefault(), L(M.current + n);
 				return;
 			}
 			if (t.key === "Home") {
-				t.preventDefault(), I(u);
+				t.preventDefault(), L(d);
 				return;
 			}
-			t.key === "End" && (t.preventDefault(), I(d));
+			t.key === "End" && (t.preventDefault(), L(p));
 		}
 	};
 }
@@ -145,22 +147,23 @@ function S({ className: e, direction: t, left: n, right: r, collapsedPane: i, lo
 		]
 	});
 }
-function C({ direction: t = "vertical", initial: n = f, min: r = u, max: i = d, className: a, collapsedPane: o = null, children: c }) {
-	let [l, p] = e.toArray(c), m = x({
+function C({ direction: t = "vertical", initial: n = f, min: r = u, max: i = d, onChange: a, className: o, collapsedPane: c = null, children: l }) {
+	let [p, m] = e.toArray(l), h = x({
 		direction: t,
 		initial: n,
 		min: r,
 		max: i,
-		collapsedPane: o
+		onChange: a,
+		collapsedPane: c
 	});
-	return p ? /* @__PURE__ */ s(S, {
-		className: a,
+	return m ? /* @__PURE__ */ s(S, {
+		className: o,
 		direction: t,
-		left: l,
-		right: p,
-		collapsedPane: o,
-		logic: m
-	}) : l;
+		left: p,
+		right: m,
+		collapsedPane: c,
+		logic: h
+	}) : p;
 }
 //#endregion
 export { C as Splitter };

package/dist/splitter/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../src/splitter/Splitter.module.scss","../../src/splitter/Splitter.tsx"],"sourcesContent":[".splitter {\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\n\t&.vertical {\n\t\tflex-direction: row;\n\n\t\t.separator {\n\t\t\tcursor: col-resize;\n\n\t\t\tborder-left: var(--border);\n\t\t\tborder-right: var(--border);\n\n\t\t\tmargin-inline: var(--space-md);\n\t\t}\n\t}\n\n\t&.horizontal {\n\t\tflex-direction: column;\n\n\t\t.separator {\n\t\t\tcursor: row-resize;\n\n\t\t\t// border-top: var(--border);\n\t\t\t// border-bottom: var(--border);\n\n\t\t\tmargin-block: var(--space-md);\n\t\t}\n\t}\n}\n\n.topLeft {\n\tflex-grow: 0;\n\tflex-shrink: 0;\n}\n\n.bottomRight {\n\tflex-grow: 1;\n}\n\n.topLeft,\n.bottomRight {\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n}\n\n.separator {\n\tflex-basis: var(--space-sm);\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\n\tborder-radius: var(--radius-sm);\n\tborder: var(--border);\n\tbackground-color: var(--border-0);\n\n\tuser-select: none;\n\ttouch-action: none;\n\tposition: relative;\n\n\t&:hover {\n\t\tborder-color: var(--border-1);\n\t\tbackground-color: var(--border-1);\n\t}\n\t&:active {\n\t\tborder-color: var(--border-2);\n\t\tbackground-color: var(--border-2);\n\t}\n}\n","import {\n\tChildren,\n\ttype PropsWithChildren,\n\ttype KeyboardEvent as ReactKeyboardEvent,\n\ttype ReactNode,\n\ttype PointerEvent as ReactPointerEvent,\n\ttype RefObject,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./Splitter.module.scss\";\n\ntype SplitterDirection = \"vertical\" \| \"horizontal\";\ntype SplitterPane = \"start\" \| \"end\";\n\nexport type SplitterProps = PropsWithChildren<{\n\tdirection?: SplitterDirection;\n\tinitial?: number; // от 0 до 1\n\tmin?: number; // минимальная доля первой панели\n\tmax?: number; // максимальная доля первой панели\n\tclassName?: string;\n\tcollapsedPane?: SplitterPane \| null;\n}>;\n\ntype SplitterLogicParams = {\n\tdirection: SplitterDirection;\n\tinitial: number;\n\tmin: number;\n\tmax: number;\n\tcollapsedPane: SplitterPane \| null;\n};\n\ntype SplitterLogic = {\n\tcontainerRef: RefObject<HTMLDivElement \| null>;\n\ttopLeftRef: RefObject<HTMLDivElement \| null>;\n\tseparatorRef: RefObject<HTMLDivElement \| null>;\n\tratio: number;\n\tminRatio: number;\n\tmaxRatio: number;\n\thandleSeparatorPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n\thandleSeparatorKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n};\n\ntype SplitterViewProps = {\n\tclassName?: string;\n\tdirection: SplitterDirection;\n\tleft: ReactNode;\n\tright: ReactNode;\n\tcollapsedPane: SplitterPane \| null;\n\tlogic: SplitterLogic;\n};\n\nconst DEFAULT_MIN = 0.1;\nconst DEFAULT_MAX = 0.9;\nconst DEFAULT_INITIAL = 0.7;\nconst KEYBOARD_STEP = 0.02;\n\nfunction clampRatio(value: number, min: number, max: number) {\n\treturn Math.min(max, Math.max(min, value));\n}\n\nfunction normalizeRatioValue(value: number, fallback: number) {\n\tif (!Number.isFinite(value)) return fallback;\n\n\treturn clampRatio(value, 0, 1);\n}\n\nfunction normalizeBounds(min: number, max: number) {\n\tconst safeMin = normalizeRatioValue(min, DEFAULT_MIN);\n\tconst safeMax = normalizeRatioValue(max, DEFAULT_MAX);\n\n\tif (safeMin <= safeMax) return [safeMin, safeMax] as const;\n\n\treturn [safeMax, safeMin] as const;\n}\n\nfunction getPointerCoordinate(direction: SplitterDirection, event: PointerEvent \| ReactPointerEvent<HTMLDivElement>) {\n\treturn direction === \"vertical\" ? event.clientX : event.clientY;\n}\n\nfunction getContainerDimension(direction: SplitterDirection, rect: DOMRect) {\n\treturn direction === \"vertical\" ? rect.width : rect.height;\n}\n\nfunction getKeyboardDelta(direction: SplitterDirection, key: string) {\n\tif (direction === \"vertical\") {\n\t\tif (key === \"ArrowLeft\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowRight\") return KEYBOARD_STEP;\n\t}\n\n\tif (direction === \"horizontal\") {\n\t\tif (key === \"ArrowUp\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowDown\") return KEYBOARD_STEP;\n\t}\n\n\treturn null;\n}\n\nfunction resolveTopLeftBasis(ratio: number, collapsedPane: SplitterPane \| null) {\n\tif (collapsedPane === \"start\") return 0;\n\tif (collapsedPane === \"end\") return 1;\n\n\treturn ratio;\n}\n\nfunction useSplitterLogic({ direction, initial, min, max, collapsedPane }: SplitterLogicParams): SplitterLogic {\n\tconst [minRatio, maxRatio] = normalizeBounds(min, max);\n\n\tconst containerRef = useRef<HTMLDivElement \| null>(null);\n\tconst topLeftRef = useRef<HTMLDivElement \| null>(null);\n\tconst separatorRef = useRef<HTMLDivElement \| null>(null);\n\tconst cleanupDragRef = useRef<(() => void) \| null>(null);\n\tconst pendingRatioRef = useRef<number \| null>(null);\n\tconst frameRef = useRef<number \| null>(null);\n\tconst startPosRef = useRef(0);\n\tconst startRatioRef = useRef(clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst previousInitialRef = useRef(initial);\n\n\tconst [ratio, setRatio] = useState(() => clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst ratioRef = useRef(ratio);\n\n\tconst applyRatio = useCallback(\n\t\t(nextRatio: number) => {\n\t\t\tratioRef.current = nextRatio;\n\t\t\ttopLeftRef.current?.style.setProperty(\"flex-basis\", `${resolveTopLeftBasis(nextRatio, collapsedPane) * 100}%`);\n\t\t\tseparatorRef.current?.setAttribute(\"aria-valuenow\", `${Math.round(nextRatio * 100)}`);\n\t\t},\n\t\t[collapsedPane]\n\t);\n\n\tconst flushPendingRatio = () => {\n\t\tif (frameRef.current !== null) {\n\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\tframeRef.current = null;\n\t\t}\n\n\t\tif (pendingRatioRef.current === null) return ratioRef.current;\n\n\t\tconst nextRatio = pendingRatioRef.current;\n\t\tpendingRatioRef.current = null;\n\t\tapplyRatio(nextRatio);\n\n\t\treturn nextRatio;\n\t};\n\n\tconst scheduleRatioUpdate = (nextRatio: number) => {\n\t\tpendingRatioRef.current = nextRatio;\n\n\t\tif (frameRef.current !== null) return;\n\n\t\tframeRef.current = requestAnimationFrame(() => {\n\t\t\tframeRef.current = null;\n\n\t\t\tif (pendingRatioRef.current === null) return;\n\n\t\t\tapplyRatio(pendingRatioRef.current);\n\t\t});\n\t};\n\n\tconst stopDragging = () => {\n\t\tcleanupDragRef.current?.();\n\t\tcleanupDragRef.current = null;\n\t};\n\n\tconst commitRatio = (nextRatio: number) => {\n\t\tflushPendingRatio();\n\t\tsetRatio(clampRatio(nextRatio, minRatio, maxRatio));\n\t};\n\n\tconst handleSeparatorPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (event.button !== 0) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst container = containerRef.current;\n\t\tif (!container) return;\n\n\t\tstopDragging();\n\n\t\ttry {\n\t\t\tevent.currentTarget.setPointerCapture?.(event.pointerId);\n\t\t} catch {\n\t\t\t// Игнорировать, если браузер не поддерживает pointer capture.\n\t\t}\n\n\t\tstartPosRef.current = getPointerCoordinate(direction, event);\n\t\tstartRatioRef.current = ratioRef.current;\n\n\t\tconst handlePointerMove = (moveEvent: PointerEvent) => {\n\t\t\tconst rect = container.getBoundingClientRect();\n\t\t\tconst dimension = getContainerDimension(direction, rect);\n\t\t\tif (dimension <= 0) return;\n\n\t\t\tconst delta = getPointerCoordinate(direction, moveEvent) - startPosRef.current;\n\t\t\tconst nextRatio = clampRatio(startRatioRef.current + delta / dimension, minRatio, maxRatio);\n\n\t\t\tscheduleRatioUpdate(nextRatio);\n\t\t};\n\n\t\tconst handlePointerUp = () => {\n\t\t\tstopDragging();\n\t\t\tsetRatio(flushPendingRatio());\n\t\t};\n\n\t\tcleanupDragRef.current = () => {\n\t\t\tdocument.removeEventListener(\"pointermove\", handlePointerMove);\n\t\t\tdocument.removeEventListener(\"pointerup\", handlePointerUp);\n\t\t\tdocument.removeEventListener(\"pointercancel\", handlePointerUp);\n\t\t};\n\n\t\tdocument.addEventListener(\"pointermove\", handlePointerMove);\n\t\tdocument.addEventListener(\"pointerup\", handlePointerUp);\n\t\tdocument.addEventListener(\"pointercancel\", handlePointerUp);\n\t};\n\n\tconst handleSeparatorKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n\t\tconst keyboardDelta = getKeyboardDelta(direction, event.key);\n\n\t\tif (keyboardDelta !== null) {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(ratioRef.current + keyboardDelta);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(minRatio);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(maxRatio);\n\t\t}\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tapplyRatio(ratio);\n\t}, [applyRatio, ratio]);\n\n\tuseEffect(() => {\n\t\tsetRatio((currentRatio) => {\n\t\t\tconst initialChanged = previousInitialRef.current !== initial;\n\t\t\tpreviousInitialRef.current = initial;\n\n\t\t\tif (initialChanged) {\n\t\t\t\treturn clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio);\n\t\t\t}\n\n\t\t\treturn clampRatio(currentRatio, minRatio, maxRatio);\n\t\t});\n\t}, [initial, minRatio, maxRatio]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tstopDragging();\n\n\t\t\tif (frameRef.current !== null) {\n\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn {\n\t\tcontainerRef,\n\t\ttopLeftRef,\n\t\tseparatorRef,\n\t\tratio,\n\t\tminRatio,\n\t\tmaxRatio,\n\t\thandleSeparatorPointerDown,\n\t\thandleSeparatorKeyDown\n\t};\n}\n\nfunction SplitterView({ className, direction, left, right, collapsedPane, logic }: SplitterViewProps) {\n\tconst { containerRef, topLeftRef, separatorRef, ratio, minRatio, maxRatio, handleSeparatorPointerDown, handleSeparatorKeyDown } = logic;\n\tconst topLeftBasis = resolveTopLeftBasis(ratio, collapsedPane);\n\tconst isStartPaneCollapsed = collapsedPane === \"start\";\n\tconst isEndPaneCollapsed = collapsedPane === \"end\";\n\tconst isSeparatorVisible = collapsedPane === null;\n\n\treturn (\n\t\t<div ref={containerRef} className={cn(styles.splitter, styles[direction], className)}>\n\t\t\t<div ref={topLeftRef} className={styles.topLeft} style={{ flexBasis: `${topLeftBasis * 100}%` }} hidden={isStartPaneCollapsed}>\n\t\t\t\t{left}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tref={separatorRef}\n\t\t\t\thidden={!isSeparatorVisible}\n\t\t\t\trole=\"separator\"\n\t\t\t\taria-orientation={direction === \"vertical\" ? \"vertical\" : \"horizontal\"}\n\t\t\t\taria-valuemin={Math.round(minRatio * 100)}\n\t\t\t\taria-valuemax={Math.round(maxRatio * 100)}\n\t\t\t\taria-valuenow={Math.round(ratio * 100)}\n\t\t\t\ttabIndex={isSeparatorVisible ? 0 : -1}\n\t\t\t\tonPointerDown={handleSeparatorPointerDown}\n\t\t\t\tonKeyDown={handleSeparatorKeyDown}\n\t\t\t\tclassName={styles.separator}></div>\n\n\t\t\t<div className={styles.bottomRight} hidden={isEndPaneCollapsed}>\n\t\t\t\t{right}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function Splitter({\n\tdirection = \"vertical\",\n\tinitial = DEFAULT_INITIAL,\n\tmin = DEFAULT_MIN,\n\tmax = DEFAULT_MAX,\n\tclassName,\n\tcollapsedPane = null,\n\tchildren\n}: SplitterProps) {\n\tconst [left, right] = Children.toArray(children);\n\tconst logic = useSplitterLogic({ direction, initial, min, max, collapsedPane });\n\n\tif (!right) return left;\n\n\treturn (\n\t\t<SplitterView className={className} direction={direction} left={left} right={right} collapsedPane={collapsedPane} logic={logic} />\n\t);\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../src/splitter/Splitter.module.scss","../../src/splitter/Splitter.tsx"],"sourcesContent":[".splitter {\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\n\t&.vertical {\n\t\tflex-direction: row;\n\n\t\t.separator {\n\t\t\tcursor: col-resize;\n\n\t\t\tborder-left: var(--border);\n\t\t\tborder-right: var(--border);\n\n\t\t\tmargin-inline: var(--space-md);\n\t\t}\n\t}\n\n\t&.horizontal {\n\t\tflex-direction: column;\n\n\t\t.separator {\n\t\t\tcursor: row-resize;\n\n\t\t\t// border-top: var(--border);\n\t\t\t// border-bottom: var(--border);\n\n\t\t\tmargin-block: var(--space-md);\n\t\t}\n\t}\n}\n\n.topLeft {\n\tflex-grow: 0;\n\tflex-shrink: 0;\n}\n\n.bottomRight {\n\tflex-grow: 1;\n}\n\n.topLeft,\n.bottomRight {\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n}\n\n.separator {\n\tflex-basis: var(--space-sm);\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\n\tborder-radius: var(--radius-sm);\n\tborder: var(--border);\n\tbackground-color: var(--border-0);\n\n\tuser-select: none;\n\ttouch-action: none;\n\tposition: relative;\n\n\t&:hover {\n\t\tborder-color: var(--border-1);\n\t\tbackground-color: var(--border-1);\n\t}\n\t&:active {\n\t\tborder-color: var(--border-2);\n\t\tbackground-color: var(--border-2);\n\t}\n}\n","import {\n\tChildren,\n\ttype PropsWithChildren,\n\ttype KeyboardEvent as ReactKeyboardEvent,\n\ttype ReactNode,\n\ttype PointerEvent as ReactPointerEvent,\n\ttype RefObject,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./Splitter.module.scss\";\n\ntype SplitterDirection = \"vertical\" \| \"horizontal\";\ntype SplitterPane = \"start\" \| \"end\";\n\nexport type SplitterProps = PropsWithChildren<{\n\tdirection?: SplitterDirection;\n\tinitial?: number; // от 0 до 1\n\tmin?: number; // минимальная доля первой панели\n\tmax?: number; // максимальная доля первой панели\n\t/** Сообщает итоговую долю первой панели после завершения drag или шага с клавиатуры. /\n\tonChange?: (ratio: number) => void;\n\tclassName?: string;\n\tcollapsedPane?: SplitterPane \| null;\n}>;\n\ntype SplitterLogicParams = {\n\tdirection: SplitterDirection;\n\tinitial: number;\n\tmin: number;\n\tmax: number;\n\tonChange?: (ratio: number) => void;\n\tcollapsedPane: SplitterPane \| null;\n};\n\ntype SplitterLogic = {\n\tcontainerRef: RefObject<HTMLDivElement \| null>;\n\ttopLeftRef: RefObject<HTMLDivElement \| null>;\n\tseparatorRef: RefObject<HTMLDivElement \| null>;\n\tratio: number;\n\tminRatio: number;\n\tmaxRatio: number;\n\thandleSeparatorPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n\thandleSeparatorKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n};\n\ntype SplitterViewProps = {\n\tclassName?: string;\n\tdirection: SplitterDirection;\n\tleft: ReactNode;\n\tright: ReactNode;\n\tcollapsedPane: SplitterPane \| null;\n\tlogic: SplitterLogic;\n};\n\nconst DEFAULT_MIN = 0.1;\nconst DEFAULT_MAX = 0.9;\nconst DEFAULT_INITIAL = 0.7;\nconst KEYBOARD_STEP = 0.02;\n\nfunction clampRatio(value: number, min: number, max: number) {\n\treturn Math.min(max, Math.max(min, value));\n}\n\nfunction normalizeRatioValue(value: number, fallback: number) {\n\tif (!Number.isFinite(value)) return fallback;\n\n\treturn clampRatio(value, 0, 1);\n}\n\nfunction normalizeBounds(min: number, max: number) {\n\tconst safeMin = normalizeRatioValue(min, DEFAULT_MIN);\n\tconst safeMax = normalizeRatioValue(max, DEFAULT_MAX);\n\n\tif (safeMin <= safeMax) return [safeMin, safeMax] as const;\n\n\treturn [safeMax, safeMin] as const;\n}\n\nfunction getPointerCoordinate(direction: SplitterDirection, event: PointerEvent \| ReactPointerEvent<HTMLDivElement>) {\n\treturn direction === \"vertical\" ? event.clientX : event.clientY;\n}\n\nfunction getContainerDimension(direction: SplitterDirection, rect: DOMRect) {\n\treturn direction === \"vertical\" ? rect.width : rect.height;\n}\n\nfunction getKeyboardDelta(direction: SplitterDirection, key: string) {\n\tif (direction === \"vertical\") {\n\t\tif (key === \"ArrowLeft\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowRight\") return KEYBOARD_STEP;\n\t}\n\n\tif (direction === \"horizontal\") {\n\t\tif (key === \"ArrowUp\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowDown\") return KEYBOARD_STEP;\n\t}\n\n\treturn null;\n}\n\nfunction resolveTopLeftBasis(ratio: number, collapsedPane: SplitterPane \| null) {\n\tif (collapsedPane === \"start\") return 0;\n\tif (collapsedPane === \"end\") return 1;\n\n\treturn ratio;\n}\n\nfunction useSplitterLogic({ direction, initial, min, max, onChange, collapsedPane }: SplitterLogicParams): SplitterLogic {\n\tconst [minRatio, maxRatio] = normalizeBounds(min, max);\n\n\tconst containerRef = useRef<HTMLDivElement \| null>(null);\n\tconst topLeftRef = useRef<HTMLDivElement \| null>(null);\n\tconst separatorRef = useRef<HTMLDivElement \| null>(null);\n\tconst cleanupDragRef = useRef<(() => void) \| null>(null);\n\tconst pendingRatioRef = useRef<number \| null>(null);\n\tconst frameRef = useRef<number \| null>(null);\n\tconst startPosRef = useRef(0);\n\tconst startRatioRef = useRef(clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst previousInitialRef = useRef(initial);\n\n\tconst [ratio, setRatio] = useState(() => clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst ratioRef = useRef(ratio);\n\n\tconst applyRatio = useCallback(\n\t\t(nextRatio: number) => {\n\t\t\tratioRef.current = nextRatio;\n\t\t\ttopLeftRef.current?.style.setProperty(\"flex-basis\", `${resolveTopLeftBasis(nextRatio, collapsedPane) 100}%`);\n\t\t\tseparatorRef.current?.setAttribute(\"aria-valuenow\", `${Math.round(nextRatio * 100)}`);\n\t\t},\n\t\t[collapsedPane]\n\t);\n\n\tconst flushPendingRatio = () => {\n\t\tif (frameRef.current !== null) {\n\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\tframeRef.current = null;\n\t\t}\n\n\t\tif (pendingRatioRef.current === null) return ratioRef.current;\n\n\t\tconst nextRatio = pendingRatioRef.current;\n\t\tpendingRatioRef.current = null;\n\t\tapplyRatio(nextRatio);\n\n\t\treturn nextRatio;\n\t};\n\n\tconst scheduleRatioUpdate = (nextRatio: number) => {\n\t\tpendingRatioRef.current = nextRatio;\n\n\t\tif (frameRef.current !== null) return;\n\n\t\tframeRef.current = requestAnimationFrame(() => {\n\t\t\tframeRef.current = null;\n\n\t\t\tif (pendingRatioRef.current === null) return;\n\n\t\t\tapplyRatio(pendingRatioRef.current);\n\t\t});\n\t};\n\n\tconst stopDragging = () => {\n\t\tcleanupDragRef.current?.();\n\t\tcleanupDragRef.current = null;\n\t};\n\n\tconst commitRatio = (nextRatio: number, previousRatio = ratioRef.current) => {\n\t\tflushPendingRatio();\n\t\tconst committedRatio = clampRatio(nextRatio, minRatio, maxRatio);\n\t\tsetRatio(committedRatio);\n\t\tif (committedRatio !== previousRatio) onChange?.(committedRatio);\n\t};\n\n\tconst handleSeparatorPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (event.button !== 0) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst container = containerRef.current;\n\t\tif (!container) return;\n\n\t\tstopDragging();\n\n\t\ttry {\n\t\t\tevent.currentTarget.setPointerCapture?.(event.pointerId);\n\t\t} catch {\n\t\t\t// Игнорировать, если браузер не поддерживает pointer capture.\n\t\t}\n\n\t\tstartPosRef.current = getPointerCoordinate(direction, event);\n\t\tstartRatioRef.current = ratioRef.current;\n\n\t\tconst handlePointerMove = (moveEvent: PointerEvent) => {\n\t\t\tconst rect = container.getBoundingClientRect();\n\t\t\tconst dimension = getContainerDimension(direction, rect);\n\t\t\tif (dimension <= 0) return;\n\n\t\t\tconst delta = getPointerCoordinate(direction, moveEvent) - startPosRef.current;\n\t\t\tconst nextRatio = clampRatio(startRatioRef.current + delta / dimension, minRatio, maxRatio);\n\n\t\t\tscheduleRatioUpdate(nextRatio);\n\t\t};\n\n\t\tconst handlePointerUp = () => {\n\t\t\tstopDragging();\n\t\t\tcommitRatio(flushPendingRatio(), startRatioRef.current);\n\t\t};\n\n\t\tcleanupDragRef.current = () => {\n\t\t\tdocument.removeEventListener(\"pointermove\", handlePointerMove);\n\t\t\tdocument.removeEventListener(\"pointerup\", handlePointerUp);\n\t\t\tdocument.removeEventListener(\"pointercancel\", handlePointerUp);\n\t\t};\n\n\t\tdocument.addEventListener(\"pointermove\", handlePointerMove);\n\t\tdocument.addEventListener(\"pointerup\", handlePointerUp);\n\t\tdocument.addEventListener(\"pointercancel\", handlePointerUp);\n\t};\n\n\tconst handleSeparatorKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n\t\tconst keyboardDelta = getKeyboardDelta(direction, event.key);\n\n\t\tif (keyboardDelta !== null) {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(ratioRef.current + keyboardDelta);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(minRatio);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(maxRatio);\n\t\t}\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tapplyRatio(ratio);\n\t}, [applyRatio, ratio]);\n\n\tuseEffect(() => {\n\t\tsetRatio((currentRatio) => {\n\t\t\tconst initialChanged = previousInitialRef.current !== initial;\n\t\t\tpreviousInitialRef.current = initial;\n\n\t\t\tif (initialChanged) {\n\t\t\t\treturn clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio);\n\t\t\t}\n\n\t\t\treturn clampRatio(currentRatio, minRatio, maxRatio);\n\t\t});\n\t}, [initial, minRatio, maxRatio]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tstopDragging();\n\n\t\t\tif (frameRef.current !== null) {\n\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn {\n\t\tcontainerRef,\n\t\ttopLeftRef,\n\t\tseparatorRef,\n\t\tratio,\n\t\tminRatio,\n\t\tmaxRatio,\n\t\thandleSeparatorPointerDown,\n\t\thandleSeparatorKeyDown\n\t};\n}\n\nfunction SplitterView({ className, direction, left, right, collapsedPane, logic }: SplitterViewProps) {\n\tconst { containerRef, topLeftRef, separatorRef, ratio, minRatio, maxRatio, handleSeparatorPointerDown, handleSeparatorKeyDown } = logic;\n\tconst topLeftBasis = resolveTopLeftBasis(ratio, collapsedPane);\n\tconst isStartPaneCollapsed = collapsedPane === \"start\";\n\tconst isEndPaneCollapsed = collapsedPane === \"end\";\n\tconst isSeparatorVisible = collapsedPane === null;\n\n\treturn (\n\t\t<div ref={containerRef} className={cn(styles.splitter, styles[direction], className)}>\n\t\t\t<div ref={topLeftRef} className={styles.topLeft} style={{ flexBasis: `${topLeftBasis * 100}%` }} hidden={isStartPaneCollapsed}>\n\t\t\t\t{left}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tref={separatorRef}\n\t\t\t\thidden={!isSeparatorVisible}\n\t\t\t\trole=\"separator\"\n\t\t\t\taria-orientation={direction === \"vertical\" ? \"vertical\" : \"horizontal\"}\n\t\t\t\taria-valuemin={Math.round(minRatio * 100)}\n\t\t\t\taria-valuemax={Math.round(maxRatio * 100)}\n\t\t\t\taria-valuenow={Math.round(ratio * 100)}\n\t\t\t\ttabIndex={isSeparatorVisible ? 0 : -1}\n\t\t\t\tonPointerDown={handleSeparatorPointerDown}\n\t\t\t\tonKeyDown={handleSeparatorKeyDown}\n\t\t\t\tclassName={styles.separator}></div>\n\n\t\t\t<div className={styles.bottomRight} hidden={isEndPaneCollapsed}>\n\t\t\t\t{right}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function Splitter({\n\tdirection = \"vertical\",\n\tinitial = DEFAULT_INITIAL,\n\tmin = DEFAULT_MIN,\n\tmax = DEFAULT_MAX,\n\tonChange,\n\tclassName,\n\tcollapsedPane = null,\n\tchildren\n}: SplitterProps) {\n\tconst [left, right] = Children.toArray(children);\n\tconst logic = useSplitterLogic({ direction, initial, min, max, onChange, collapsedPane });\n\n\tif (!right) return left;\n\n\treturn (\n\t\t<SplitterView className={className} direction={direction} left={left} right={right} collapsedPane={collapsedPane} logic={logic} />\n\t);\n}\n"],"mappings":"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"}