npm - @cube-dev/ui-kit - Versions diffs - 0.161.0 → 0.163.0 - Mend

@cube-dev/ui-kit 0.161.0 → 0.163.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 (566) hide show

package/dist/components/data/TableBase/use-table-columns.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useMemo } from "react";
 //#region src/components/data/TableBase/use-table-columns.ts

package/dist/components/data/TableBase/use-table-search.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
 import { getColumnText } from "./use-table-columns.js";

package/dist/components/data/TableBase/use-table-selection.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { RowCollection } from "./RowCollection.js";
 import { useCallback, useMemo, useRef } from "react";

package/dist/components/data/TableBase/use-table-sort.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { useMemo } from "react";

package/dist/components/data/TableBase/use-table-sorts.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { compareByColumn } from "./use-table-sort.js";
 import { useMemo } from "react";

package/dist/components/data/TableBase/use-table-storage.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useCallback, useRef, useState } from "react";
 //#region src/components/data/TableBase/use-table-storage.ts

package/dist/components/fields/Checkbox/Checkbox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Checkbox/CheckboxGroup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

package/dist/components/fields/Checkbox/context.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { createContext } from "react";
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ColorInput/ColorInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/fields/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/ComboBox/ComboBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/CommandTextArea.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/components/fields/DatePicker/DateInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/DatePickerButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/MonthPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/PeriodPicker.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ interface CubePeriodPickerProps<T extends DateValue = DateValue> extends Omit<Ar
   /** Placeholder shown when no value is selected. */
   placeholder?: string;
   /** Override how the selected value is rendered as text. */
-  formatValue?: (date: DateValue, picker: PickerType) => string;
+  formatValue?: (date: DateValue, picker: PickerType, locale: string) => string;
 }
 declare const _PeriodPicker: react.ForwardRefExoticComponent<Omit<CubePeriodPickerProps<DateValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
 //#endregion

package/dist/components/fields/DatePicker/PeriodPicker.js CHANGED Viewed

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
@@ -12,31 +13,38 @@ import { _Calendar } from "../../other/Calendar/Calendar.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { PeriodCalendar } from "../../other/Calendar/PeriodCalendar.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
-import { forwardRef, useRef } from "react";
+import { forwardRef, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useFocusRing, useLocale } from "react-aria";
 import { useDatePickerState } from "react-stately";
 //#region src/components/fields/DatePicker/PeriodPicker.tsx
-const DEFAULT_PLACEHOLDER = {
-	week: "Select week",
-	month: "Select month",
-	quarter: "Select quarter",
-	year: "Select year"
-};
-const PeriodValueElement = tasty({ styles: {
-	preset: "t3",
-	width: "max 100%",
-	whiteSpace: "nowrap",
-	color: {
-		"": "#dark",
-		placeholder: "#dark.30"
+const PeriodValueElement = tasty({
+	qa: "PeriodPickerValue",
+	styles: {
+		preset: "t3",
+		width: "max 100%",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		color: {
+			"": "#dark",
+			placeholder: "#dark.30",
+			disabled: "#dark.30"
+		}
 	}
-} });
+});
 function PeriodPicker(props, ref) {
+	const { t } = useI18n();
 	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
 	let styles = extractStyles(props, CONTAINER_STYLES);
-	let { qa, size, picker = "month", placeholder, formatValue, isDisabled, isInvalid, isValid, autoFocus } = props;
+	let { qa, size, picker = "month", placeholder, formatValue, isDisabled, isReadOnly, isInvalid, isValid, autoFocus } = props;
+	let defaultPlaceholder = {
+		week: t("datePicker.selectWeek", "Select week"),
+		month: t("datePicker.selectMonth", "Select month"),
+		quarter: t("datePicker.selectQuarter", "Select quarter"),
+		year: t("datePicker.selectYear", "Select year")
+	};
 	let { locale } = useLocale();
 	let targetRef = useRef(null);
 	let state = useDatePickerState({
@@ -59,7 +67,8 @@ function PeriodPicker(props, ref) {
 		state.setValue(snapToPeriod(date, picker, locale));
 		setOpen(false);
 	};
-	let displayText = state.value ? (formatValue ?? formatPeriod)(state.value, picker, locale) : placeholder ?? DEFAULT_PLACEHOLDER[picker];
+	let displayText = state.value ? (formatValue ?? formatPeriod)(state.value, picker, locale) : placeholder ?? defaultPlaceholder[picker];
+	let valueId = useId();
 	const panel = picker === "week" ? /* @__PURE__ */ jsx(_Calendar, {
 		...calendarProps,
 		autoFocus: true,
@@ -85,7 +94,10 @@ function PeriodPicker(props, ref) {
 			...styles,
 			...props.wrapperStyles
 		},
-		inputStyles: props.inputStyles,
+		inputStyles: {
+			cursor: isDisabled || isReadOnly ? "default" : "pointer",
+			...props.inputStyles
+		},
 		disableFocusRing: isFocusedButton,
 		isDisabled,
 		isInvalid,
@@ -104,7 +116,8 @@ function PeriodPicker(props, ref) {
 			children: [/* @__PURE__ */ jsx(DatePickerButton, {
 				size,
 				...mergeProps$1(buttonProps, focusPropsButton),
-				isDisabled,
+				"aria-describedby": valueId,
+				isDisabled: isDisabled || isReadOnly,
 				styles: props.triggerStyles
 			}), /* @__PURE__ */ jsx(Dialog, {
 				...dialogProps,
@@ -113,9 +126,12 @@ function PeriodPicker(props, ref) {
 			})]
 		}),
 		children: /* @__PURE__ */ jsx(PeriodValueElement, {
-			...labelProps,
-			mods: { placeholder: !state.value },
-			onClick: () => !isDisabled && setOpen(true),
+			id: valueId,
+			mods: {
+				placeholder: !state.value,
+				disabled: isDisabled
+			},
+			onClick: () => !isDisabled && !isReadOnly && setOpen(true),
 			children: displayText
 		})
 	}), domRef, {

package/dist/components/fields/DatePicker/PeriodPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PeriodPicker.js","names":["Calendar","DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/PeriodPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n AriaDatePickerProps,\n DateValue,\n useDatePicker,\n useFocusRing,\n useLocale,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { PeriodCalendar } from '../../other/Calendar/PeriodCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { formatPeriod, PickerType, snapToPeriod } from './period';\nimport { useFocusManagerRef } from './utils';\n\nconst ~~DEFAULT_PLACEHOLDER:~~ ~~Record<PickerType, string>~~ = {\n ~~week~~: '~~Select week~~',\n ~~month~~: ~~'Select month',\~~n ~~quarter~~: '~~Select quarter~~',\n ~~year~~: '~~Select~~ ~~year~~',\n~~};\n\nconst PeriodValueElement = tasty({\n styles: {\n~~ ~~preset~~: 't3',\n ~~width~~: '~~max 100%~~',\n ~~whiteSpace~~: '~~nowrap~~',\n color: {\n '': '#dark',\n placeholder: '#dark.30',\n },\n },\n});\n\nexport interface CubePeriodPickerProps<T extends DateValue = DateValue>\n extends Omit<AriaDatePickerProps<T>, 'errorMessage' \| 'granularity'>,\n BaseProps,\n ContainerStyleProps,\n FieldBaseProps {\n /** Which period the picker selects. Set by the concrete picker components. /\n picker?: PickerType;\n wrapperStyles?: Styles;\n inputStyles?: Styles;\n triggerStyles?: Styles;\n styles?: Styles;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n shouldFlip?: boolean;\n /* Placeholder shown when no value is selected. /\n placeholder?: string;\n /* Override how the selected value is rendered as text. */\n formatValue?: (date: DateValue, picker: PickerType) => string;\n}\n\nfunction PeriodPicker<T extends DateValue>(\n props: CubePeriodPickerProps<T>,\n ref: FocusableRef<HTMLElement>,\n) {\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n });\n\n let styles = extractStyles(props, CONTAINER_STYLES);\n\n let {\n qa,\n size,\n picker = 'month',\n placeholder,\n formatValue,\n isDisabled,\n isInvalid,\n isValid,\n autoFocus,\n } = props;\n\n let { locale } = useLocale();\n let targetRef = useRef<HTMLDivElement>(null);\n let state = useDatePickerState({\n ...props,\n granularity: 'day',\n shouldCloseOnSelect: true,\n });\n let { isOpen, setOpen } = state;\n\n let domRef = useFocusManagerRef(ref);\n\n let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus,\n });\n\n let { groupProps, labelProps, buttonProps, dialogProps, calendarProps } =\n useDatePicker({ ...props, granularity: 'day' }, state, targetRef);\n\n let handleSelect = (date: DateValue) => {\n state.setValue(snapToPeriod(date, picker, locale));\n setOpen(false);\n };\n\n let displayText = state.value\n ? (formatValue ?? formatPeriod)(state.value, picker, locale)\n : placeholder ?? ~~DEFAULT_PLACEHOLDER~~[picker];\n\n const panel =\n picker === 'week' ? (\n <Calendar\n {...calendarProps}\n autoFocus\n pickerMode=\"week\"\n isDisabled={isDisabled}\n onChange={handleSelect}\n />\n ) : (\n <PeriodCalendar\n autoFocus\n picker={picker}\n value={calendarProps.value}\n minValue={calendarProps.minValue}\n maxValue={calendarProps.maxValue}\n isDateUnavailable={calendarProps.isDateUnavailable}\n isDisabled={isDisabled}\n onChange={handleSelect}\n />\n );\n\n const component = (\n <DateInputBase\n ref={targetRef}\n qa={qa \|\| 'PeriodPicker'}\n inputType=\"datepicker\"\n styles={{ display: 'grid', ...styles, ...props.wrapperStyles }}\n inputStyles={props.inputStyles}\n disableFocusRing={isFocusedButton}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n size={size}\n fieldProps={groupProps}\n suffix={\n <DialogTrigger\n hideArrow\n type=\"popover\"\n mobileType=\"tray\"\n placement=\"bottom right\"\n targetRef={targetRef}\n isOpen={isOpen}\n shouldFlip={props.shouldFlip}\n onOpenChange={setOpen}\n >\n <DatePickerButton\n size={size}\n {...mergeProps(buttonProps, focusPropsButton)}\n isDisabled={isDisabled}\n styles={props.triggerStyles}\n />\n <Dialog {...dialogProps} width=\"max-content\">\n {panel}\n </Dialog>\n </DialogTrigger>\n }\n >\n <PeriodValueElement\n {~~...labelProps~~}\n mods={{ placeholder: !state.value }}\n onClick={() => !isDisabled && setOpen(true)}\n >\n {displayText}\n </PeriodValueElement>\n </DateInputBase>\n );\n\n return wrapWithField(component, domRef, {\n ...props,\n labelProps: mergeProps(props.labelProps, labelProps),\n });\n}\n\nconst _PeriodPicker = forwardRef(PeriodPicker);\n\n_PeriodPicker.displayName = 'PeriodPicker';\n\nexport { _PeriodPicker as PeriodPicker };\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;AA+BA~~,MAAM,~~sBAAkD;CACtD~~,MAAM;~~CACN~~,~~OAAO~~;~~CACP~~,~~SAAS;CACT,MAAM;CACP;AAED,MAAM,qBAAqB,MAAM,EAC/B,~~QAAQ;~~CACN~~,QAAQ;~~CACR~~,OAAO;~~CACP~~,YAAY;~~CACZ~~,OAAO;~~EACL~~,IAAI;~~EACJ~~,aAAa;~~EACd~~;CACF,~~EACF,~~CAAC;AAqBF,SAAS,aACP,OACA,KACA;~~AACA~~,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;CAEF,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,SAAS,SACT,aACA,aACA,YACA,WACA,SACA,cACE;CAEJ,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,aAAa;EACb,qBAAqB;EACtB,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EAAE,YAAY,YAAY,aAAa,aAAa,kBACtD,cAAc;EAAE,GAAG;EAAO,aAAa;EAAO,EAAE,OAAO,UAAU;CAEnE,IAAI,gBAAgB,SAAoB;AACtC,QAAM,SAAS,aAAa,MAAM,QAAQ,OAAO,CAAC;AAClD,UAAQ,MAAM;;CAGhB,IAAI,cAAc,MAAM,SACnB,eAAe,cAAc,MAAM,OAAO,QAAQ,OAAO,GAC1D,eAAe,~~oBAAoB~~;~~CAEvC~~,MAAM,QACJ,WAAW,SACT,oBAACA;EACC,GAAI;EACJ;EACA,YAAW;EACC;EACZ,UAAU;GACV,GAEF,oBAAC;EACC;EACQ;EACR,OAAO,cAAc;EACrB,UAAU,cAAc;EACxB,UAAU,cAAc;EACxB,mBAAmB,cAAc;EACrB;EACZ,UAAU;GACV;~~AAiDN~~,QAAO,~~cA7CL~~,oBAACC;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ;GAAE,SAAS;GAAQ,GAAG;GAAQ,GAAG,MAAM;GAAe;EAC9D,aAAa,MAAM;~~EACnB~~,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACR,YAAY,MAAM;GAClB,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;~~IACjC~~;~~IACZ~~,QAAQ,MAAM;KACd,EACF,oBAAC;IAAO,GAAI;IAAa,OAAM;cAC5B;KACM;IACK;YAGlB,oBAAC;GACC,~~GAAI~~;GACJ,MAAM,~~EAAE,~~aAAa,CAAC,MAAM,~~OAAO~~;~~GACnC~~,eAAe,CAAC,cAAc,QAAQ,KAAK;~~aAE1C~~;IACkB;GACP,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYA,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
1	+ {"version":3,"file":"PeriodPicker.js","names":["Calendar","DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/PeriodPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useId, useRef } from 'react';\nimport {\n AriaDatePickerProps,\n DateValue,\n useDatePicker,\n useFocusRing,\n useLocale,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { PeriodCalendar } from '../../other/Calendar/PeriodCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { formatPeriod, PickerType, snapToPeriod } from './period';\nimport { useFocusManagerRef } from './utils';\n\nconst PeriodValueElement = tasty({\n qa: 'PeriodPickerValue',\n styles: {\n preset: 't3',\n width: 'max 100%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n color: {\n '': '#dark',\n placeholder: '#dark.30',\n disabled: '#dark.30',\n },\n },\n});\n\nexport interface CubePeriodPickerProps<T extends DateValue = DateValue>\n extends Omit<AriaDatePickerProps<T>, 'errorMessage' \| 'granularity'>,\n BaseProps,\n ContainerStyleProps,\n FieldBaseProps {\n /** Which period the picker selects. Set by the concrete picker components. /\n picker?: PickerType;\n wrapperStyles?: Styles;\n inputStyles?: Styles;\n triggerStyles?: Styles;\n styles?: Styles;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n shouldFlip?: boolean;\n /* Placeholder shown when no value is selected. /\n placeholder?: string;\n /* Override how the selected value is rendered as text. */\n formatValue?: (date: DateValue, picker: PickerType, locale: string) => string;\n}\n\nfunction PeriodPicker<T extends DateValue>(\n props: CubePeriodPickerProps<T>,\n ref: FocusableRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n });\n\n let styles = extractStyles(props, CONTAINER_STYLES);\n\n let {\n qa,\n size,\n picker = 'month',\n placeholder,\n formatValue,\n isDisabled,\n isReadOnly,\n isInvalid,\n isValid,\n autoFocus,\n } = props;\n\n let defaultPlaceholder: Record<PickerType, string> = {\n week: t('datePicker.selectWeek', 'Select week'),\n month: t('datePicker.selectMonth', 'Select month'),\n quarter: t('datePicker.selectQuarter', 'Select quarter'),\n year: t('datePicker.selectYear', 'Select year'),\n };\n\n let { locale } = useLocale();\n let targetRef = useRef<HTMLDivElement>(null);\n let state = useDatePickerState({\n ...props,\n granularity: 'day',\n shouldCloseOnSelect: true,\n });\n let { isOpen, setOpen } = state;\n\n let domRef = useFocusManagerRef(ref);\n\n let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus,\n });\n\n let { groupProps, labelProps, buttonProps, dialogProps, calendarProps } =\n useDatePicker({ ...props, granularity: 'day' }, state, targetRef);\n\n let handleSelect = (date: DateValue) => {\n state.setValue(snapToPeriod(date, picker, locale));\n setOpen(false);\n };\n\n let displayText = state.value\n ? (formatValue ?? formatPeriod)(state.value, picker, locale)\n : placeholder ?? defaultPlaceholder[picker];\n\n // The value is rendered as text rather than editable segments, so the trigger\n // has to point at it to announce the current selection.\n let valueId = useId();\n\n const panel =\n picker === 'week' ? (\n <Calendar\n {...calendarProps}\n autoFocus\n pickerMode=\"week\"\n isDisabled={isDisabled}\n onChange={handleSelect}\n />\n ) : (\n <PeriodCalendar\n autoFocus\n picker={picker}\n value={calendarProps.value}\n minValue={calendarProps.minValue}\n maxValue={calendarProps.maxValue}\n isDateUnavailable={calendarProps.isDateUnavailable}\n isDisabled={isDisabled}\n onChange={handleSelect}\n />\n );\n\n const component = (\n <DateInputBase\n ref={targetRef}\n qa={qa \|\| 'PeriodPicker'}\n inputType=\"datepicker\"\n styles={{ display: 'grid', ...styles, ...props.wrapperStyles }}\n inputStyles={{\n cursor: isDisabled \|\| isReadOnly ? 'default' : 'pointer',\n ...props.inputStyles,\n }}\n disableFocusRing={isFocusedButton}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n size={size}\n fieldProps={groupProps}\n suffix={\n <DialogTrigger\n hideArrow\n type=\"popover\"\n mobileType=\"tray\"\n placement=\"bottom right\"\n targetRef={targetRef}\n isOpen={isOpen}\n shouldFlip={props.shouldFlip}\n onOpenChange={setOpen}\n >\n <DatePickerButton\n size={size}\n {...mergeProps(buttonProps, focusPropsButton)}\n aria-describedby={valueId}\n isDisabled={isDisabled \|\| isReadOnly}\n styles={props.triggerStyles}\n />\n <Dialog {...dialogProps} width=\"max-content\">\n {panel}\n </Dialog>\n </DialogTrigger>\n }\n >\n <PeriodValueElement\n id={valueId}\n mods={{ placeholder: !state.value, disabled: isDisabled }}\n onClick={() => !isDisabled && !isReadOnly && setOpen(true)}\n >\n {displayText}\n </PeriodValueElement>\n </DateInputBase>\n );\n\n return wrapWithField(component, domRef, {\n ...props,\n labelProps: mergeProps(props.labelProps, labelProps),\n });\n}\n\nconst _PeriodPicker = forwardRef(PeriodPicker);\n\n_PeriodPicker.displayName = 'PeriodPicker';\n\nexport { _PeriodPicker as PeriodPicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,YAAY;EACZ,cAAc;EACd,UAAU;EACV,OAAO;GACL,IAAI;GACJ,aAAa;GACb,UAAU;GACX;EACF;CACF,CAAC;AAqBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;CAEF,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,SAAS,SACT,aACA,aACA,YACA,YACA,WACA,SACA,cACE;CAEJ,IAAI,qBAAiD;EACnD,MAAM,EAAE,yBAAyB,cAAc;EAC/C,OAAO,EAAE,0BAA0B,eAAe;EAClD,SAAS,EAAE,4BAA4B,iBAAiB;EACxD,MAAM,EAAE,yBAAyB,cAAc;EAChD;CAED,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,aAAa;EACb,qBAAqB;EACtB,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EAAE,YAAY,YAAY,aAAa,aAAa,kBACtD,cAAc;EAAE,GAAG;EAAO,aAAa;EAAO,EAAE,OAAO,UAAU;CAEnE,IAAI,gBAAgB,SAAoB;AACtC,QAAM,SAAS,aAAa,MAAM,QAAQ,OAAO,CAAC;AAClD,UAAQ,MAAM;;CAGhB,IAAI,cAAc,MAAM,SACnB,eAAe,cAAc,MAAM,OAAO,QAAQ,OAAO,GAC1D,eAAe,mBAAmB;CAItC,IAAI,UAAU,OAAO;CAErB,MAAM,QACJ,WAAW,SACT,oBAACA;EACC,GAAI;EACJ;EACA,YAAW;EACC;EACZ,UAAU;GACV,GAEF,oBAAC;EACC;EACQ;EACR,OAAO,cAAc;EACrB,UAAU,cAAc;EACxB,UAAU,cAAc;EACxB,mBAAmB,cAAc;EACrB;EACZ,UAAU;GACV;AAqDN,QAAO,cAjDL,oBAACC;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ;GAAE,SAAS;GAAQ,GAAG;GAAQ,GAAG,MAAM;GAAe;EAC9D,aAAa;GACX,QAAQ,cAAc,aAAa,YAAY;GAC/C,GAAG,MAAM;GACV;EACD,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACR,YAAY,MAAM;GAClB,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IAC7C,oBAAkB;IAClB,YAAY,cAAc;IAC1B,QAAQ,MAAM;KACd,EACF,oBAAC;IAAO,GAAI;IAAa,OAAM;cAC5B;KACM;IACK;YAGlB,oBAAC;GACC,IAAI;GACJ,MAAM;IAAE,aAAa,CAAC,MAAM;IAAO,UAAU;IAAY;GACzD,eAAe,CAAC,cAAc,CAAC,cAAc,QAAQ,KAAK;aAEzD;IACkB;GACP,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYA,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/fields/DatePicker/QuarterPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/TimeInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/WeekPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/YearPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/parseDate.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/period.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { CalendarDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
 //#region src/components/fields/DatePicker/period.ts

package/dist/components/fields/DatePicker/props.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/FilterListBox/FilterListBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -527,7 +527,6 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 				footer,
 				footerStyles,
 				mods,
-				size: "medium",
 				styles: listBoxStyles,
 				isCheckable,
 				items,