@koslibs/components 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @koslibs/components
 
+## 1.19.0
+
+### Minor Changes
+
+- [#22](https://github.com/koslibs/components/pull/22) [`0a705c8`](https://github.com/koslibs/components/commit/0a705c882c901841c80288c7aebd4201721681c9) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен DatepickerPopover для подключения к своему триггеру и внешнего управления видимостью календаря.
+
 ## 1.18.0
 
 ### Minor Changes

package/dist/components/Datepicker/datepicker-popover.d.ts

@@ -0,0 +1,4 @@
+import { type PopoverProps } from '../Popover/index.js';
+import type { DatepickerPopoverProps, DatepickerValueProps } from './types.js';
+export declare const DatepickerPopoverSurface: import("react").ForwardRefExoticComponent<Omit<PopoverProps, "className" | "offset"> & Pick<DatepickerValueProps, "mode"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DatepickerPopover: import("react").ForwardRefExoticComponent<DatepickerPopoverProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Datepicker/datepicker-popover.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { Popover } from "../Popover/index.js";
+import { DatepickerPanel } from "./datepicker-panel.js";
+import { useDatepickerValue } from "./hooks/use-datepicker-value.js";
+import index_module from "./index.module.js";
+const offset = [
+    0,
+    8
+];
+const DatepickerPopoverSurface = /*#__PURE__*/ forwardRef(({ mode, children, ...props }, ref)=>/*#__PURE__*/ jsx(Popover, {
+        ...props,
+        ref: ref,
+        offset: offset,
+        className: classnames(index_module.popup, 'range' === mode && index_module.rangePopup),
+        children: /*#__PURE__*/ jsx("div", {
+            className: index_module.panelContainer,
+            children: children
+        })
+    }));
+const DatepickerPopover = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { open, anchorElement, position, getPortalContainer, outsideClick, onClose, onCancel, dataTestId, id, className, style } = props;
+    const selection = useDatepickerValue(props);
+    const getId = useDataTestId(dataTestId);
+    const handleChange = (event, { value })=>{
+        selection.commit(event, value);
+    };
+    const valueProps = 'range' === props.mode ? {
+        mode: 'range',
+        value: 'object' == typeof selection.value ? selection.value : null,
+        onChange: handleChange
+    } : {
+        mode: 'single',
+        value: 'string' == typeof selection.value ? selection.value : null,
+        onChange: handleChange
+    };
+    return /*#__PURE__*/ jsx(DatepickerPopoverSurface, {
+        ref: ref,
+        mode: props.mode,
+        open: open,
+        anchorElement: anchorElement,
+        position: position,
+        getPortalContainer: getPortalContainer,
+        outsideClick: outsideClick,
+        onClose: onClose,
+        dataTestId: dataTestId,
+        children: /*#__PURE__*/ jsx(DatepickerPanel, {
+            ...valueProps,
+            id: id,
+            className: className,
+            style: style,
+            onCancel: onCancel ?? onClose,
+            dataTestId: getId('panel')
+        }, props.mode ?? 'single')
+    });
+});
+DatepickerPopover.displayName = 'DatepickerPopover';
+export { DatepickerPopover, DatepickerPopoverSurface };

package/dist/components/Datepicker/datepicker.js

@@ -5,9 +5,9 @@ import classnames from "classnames";
 import { forwardRef, useId, useImperativeHandle } from "react";
 import { useDataTestId } from "../../hooks/use-data-test-id.js";
 import { Button } from "../Button/index.js";
-import { Popover } from "../Popover/index.js";
 import { TypographyText } from "../Typography/text.js";
 import { DatepickerPanel } from "./datepicker-panel.js";
+import { DatepickerPopoverSurface } from "./datepicker-popover.js";
 import { useDatepickerState } from "./hooks/use-datepicker-state.js";
 import { formatDate } from "./utils/date-utils.js";
 import index_module from "./index.module.js";
@@ -18,10 +18,6 @@ const textSizes = {
     64: 14,
     72: 16
 };
-const offset = [
-    0,
-    8
-];
 const Datepicker = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { mode, value: _value, defaultValue: _defaultValue, onChange: _onChange, view = 'primary', size = 40, label, labelView = 'outer', hint, error, block = false, hasOutline = false, clear = false, disabled = false, readOnly = false, placeholder = 'range' === mode ? 'Choose dates' : 'Choose date', open: _open, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, onClear: _onClear, id, name, form, className, style, labelClassName, messageClassName, panelClassName, getPortalContainer, dataTestId, ...buttonProps } = props;
     const generatedId = useId();
@@ -165,27 +161,23 @@ const Datepicker = /*#__PURE__*/ forwardRef((props, ref)=>{
                 disabled: disabled,
                 form: form
             })),
-            /*#__PURE__*/ jsx(Popover, {
+            /*#__PURE__*/ jsx(DatepickerPopoverSurface, {
                 ref: state.popupRef,
+                mode: state.mode,
                 open: state.open,
                 anchorElement: state.anchor,
-                offset: offset,
                 onClose: handleClose,
                 escapeKeyDown: false,
                 getPortalContainer: getPortalContainer,
-                className: classnames(index_module.popup, 'range' === state.mode && index_module.rangePopup),
                 dataTestId: getId('popup'),
-                children: /*#__PURE__*/ jsx("div", {
-                    className: index_module.panelContainer,
-                    children: /*#__PURE__*/ jsx(DatepickerPanel, {
-                        id: panelId,
-                        ...panelProps,
-                        onChange: handleChange,
-                        onCancel: handleCancel,
-                        className: panelClassName,
-                        dataTestId: getId('panel')
-                    }, `${state.mode}-${state.session}`)
-                })
+                children: /*#__PURE__*/ jsx(DatepickerPanel, {
+                    id: panelId,
+                    ...panelProps,
+                    onChange: handleChange,
+                    onCancel: handleCancel,
+                    className: panelClassName,
+                    dataTestId: getId('panel')
+                }, `${state.mode}-${state.session}`)
             })
         ]
     });

package/dist/components/Datepicker/index.d.ts

@@ -1,3 +1,4 @@
 export { Datepicker } from './datepicker.js';
 export { DatepickerPanel } from './datepicker-panel.js';
-export type { DatepickerProps, DatepickerPanelProps, DatepickerRange, DatepickerChangePayload, } from './types.js';
+export { DatepickerPopover } from './datepicker-popover.js';
+export type { DatepickerProps, DatepickerPanelProps, DatepickerPopoverProps, DatepickerRange, DatepickerChangePayload, } from './types.js';

package/dist/components/Datepicker/index.js

@@ -1,2 +1,3 @@
 export { Datepicker } from "./datepicker.js";
 export { DatepickerPanel } from "./datepicker-panel.js";
+export { DatepickerPopover } from "./datepicker-popover.js";

package/dist/components/Datepicker/types.d.ts

@@ -79,6 +79,13 @@ export type DatepickerPanelProps = DatepickerValueProps & {
      */
     dataTestId?: string;
 };
+export type DatepickerPopoverProps = DatepickerPanelProps & Pick<PopoverProps, 'open' | 'anchorElement' | 'position' | 'getPortalContainer' | 'outsideClick'> & {
+    /**
+     * Запрос закрытия при клике снаружи или Escape. Cancel и Escape внутри панели
+     * используют onCancel, если он задан. Видимость меняется через open.
+     */
+    onClose?: VoidFunction;
+};
 type FieldProps = Pick<InputProps, 'view' | 'size' | 'block' | 'label' | 'labelView' | 'hint' | 'error' | 'hasOutline' | 'clear' | 'labelClassName' | 'messageClassName'> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'name' | 'type' | 'style'> & {
     /**
      * Стили обёртки поля и её CSS-переменные.

package/dist/index.d.ts

@@ -4,8 +4,8 @@ export { Chips } from './components/Chips/index.js';
 export type { ChipsProps, ChipsItem, ChipsChangePayload } from './components/Chips/index.js';
 export { Input } from './components/Input/index.js';
 export type { InputProps } from './components/Input/index.js';
-export { Datepicker, DatepickerPanel } from './components/Datepicker/index.js';
-export type { DatepickerProps, DatepickerPanelProps, DatepickerRange, DatepickerChangePayload, } from './components/Datepicker/index.js';
+export { Datepicker, DatepickerPanel, DatepickerPopover } from './components/Datepicker/index.js';
+export type { DatepickerProps, DatepickerPanelProps, DatepickerPopoverProps, DatepickerRange, DatepickerChangePayload, } from './components/Datepicker/index.js';
 export { Select } from './components/Select/index.js';
 export type { SelectProps, SelectSingleProps, SelectMultipleProps, SelectOption, SelectChangeEvent, SelectChangePayload, } from './components/Select/index.js';
 export { Textarea } from './components/Textarea/index.js';

package/dist/index.js

@@ -1,7 +1,7 @@
 export { Button } from "./components/Button/index.js";
 export { Chips } from "./components/Chips/index.js";
 export { Input } from "./components/Input/index.js";
-export { Datepicker, DatepickerPanel } from "./components/Datepicker/index.js";
+export { Datepicker, DatepickerPanel, DatepickerPopover } from "./components/Datepicker/index.js";
 export { Select } from "./components/Select/index.js";
 export { Textarea } from "./components/Textarea/index.js";
 export { Tab, Tabs } from "./components/Tabs/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.18.0",
+    "version": "1.19.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",