@cube-dev/ui-kit 0.201.0 → 0.202.0

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeSeparatedPicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","ReactElement","RefObject","useRef","AriaDateRangePickerProps","DateValue","Placement","useDatePicker","useDateRangePicker","useFocusRing","useDatePickerState","useDateRangePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","mergeStyleLayers","useFieldProps","wrapWithField","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerElement","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","DateRangeDash","children","styles","padding","color","CubeDateRangeSeparatedPickerProps","Omit","T","start","end","wrapperStyles","inputStyles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DateRangeSeparatedPicker","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","t1","Object","assign","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","t2","state","t3","value","t4","defaultValue","t5","onChange","undefined","validate","startDateProps","t6","t7","t8","endDateProps","startState","endState","t9","within","isTextInput","startFocusRingProps","t10","startFocusProps","t11","endFocusRingProps","t12","endFocusProps","groupProps","labelProps","startFieldProps","endFieldProps","startProps","endProps","placeholder","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t13","calendarProps","type","newRange","compare","setValue","setDateTime","setOpen","newRange_0","t14","t15","isFocused","t16","focusProps","t17","t18","t19","isOpen","t20","t21","t22","buttonProps","t23","t24","t25","t26","t27","value_0","t28","t29","hideTimeZone","hourCycle","setTimeValue","timeValue","t30","dialogProps","t31","t32","t33","t34","t35","t36","t37","t38","t39","t40","t41","t42","t43","t44","t45","t46","t47","value_1","t48","t49","t50","t51","t52","t53","t54","component","t55","_DateRangeSeparatedPicker","displayName","_c","mergeProps","Calendar","TimeInput","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/DateRangeSeparatedPicker.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, ReactElement, RefObject, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState, useDateRangePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles, mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerElement } from './DatePickerElement';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n    color: '#dark-03',\n  },\n});\n\nexport interface CubeDateRangeSeparatedPickerProps<\n  T extends DateValue = DateValue,\n>\n  extends\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\n    BaseProps,\n    ContainerStyleProps,\n    DateFieldBase<T>,\n    FieldBaseProps<{ start: T; end: T } | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom right'\n   */\n  placement?: Placement;\n  useLocale?: boolean;\n}\n\nfunction DateRangeSeparatedPicker<T extends DateValue>(\n  rawProps: CubeDateRangeSeparatedPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // The public type declares `ContainerStyleProps` and `styles`, so both have to\n  // reach the root — before this they were extracted and dropped, which made\n  // `width=\"100%\"` type-check and do nothing. `extractStyles` already folds in\n  // `props.styles` and lets the individual style props override it, which is the\n  // precedence every other component uses; re-spreading `props.styles` here\n  // would invert it. `wrapperStyles` stays the most specific and keeps winning.\n  let styles = mergeStyleLayers(\n    extractStyles(props, CONTAINER_STYLES),\n    props.wrapperStyles,\n  );\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n\n  let state = useDateRangePickerState({\n    ...props,\n  });\n\n  let startDateProps = {\n    ...props,\n    onChange: undefined,\n    validate: undefined,\n    value: state.value?.start,\n    defaultValue: props.defaultValue?.start,\n  };\n  let endDateProps = {\n    ...props,\n    onChange: undefined,\n    validate: undefined,\n    value: state.value?.end,\n    defaultValue: props.defaultValue?.end,\n  };\n  let startState = useDatePickerState(startDateProps);\n  let endState = useDatePickerState(endDateProps);\n\n  let startFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let startFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n  let endFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let endFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n\n  useFocusManagerRef(ref, targetRef);\n\n  let { groupProps, labelProps, startFieldProps, endFieldProps } =\n    useDateRangePicker(props, state, targetRef);\n\n  let startProps = useDatePicker(startDateProps, startState, targetRef);\n  let endProps = useDatePicker(endDateProps, endState, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue ?? undefined;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : undefined;\n  let showTimeField = !!timeGranularity;\n\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  function onChange(value: DateValue, type: 'start' | 'end') {\n    if (type === 'start') {\n      const newRange = { ...state.value, start: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.end = newRange.start;\n      }\n\n      if (newRange.end) {\n        state.setValue({ start: newRange.start, end: newRange.end });\n      } else {\n        state.setDateTime('start', newRange.start);\n      }\n      startProps.calendarProps.onChange?.(value);\n      startState.setOpen(false);\n    } else {\n      const newRange = { ...state.value, end: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.start = newRange.end;\n      }\n\n      if (newRange.start) {\n        state.setValue({ start: newRange.start, end: newRange.end });\n      } else {\n        state.setDateTime('end', newRange.end);\n      }\n      endProps.calendarProps.onChange?.(value);\n      endState.setOpen(false);\n    }\n  }\n\n  const component = (\n    <DatePickerElement\n      ref={targetRef}\n      {...groupProps}\n      styles={styles}\n      qa={qa || 'DateRangeSeparatedPicker'}\n      data-input-type=\"daterangeseparatedpicker\"\n    >\n      <DateInputBase\n        autoFocus={autoFocus}\n        disableFocusRing={startFocusProps.isFocused}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        size={size}\n        {...startFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            placement={props.placement ?? 'bottom right'}\n            targetRef={props.targetRef ?? targetRef}\n            isOpen={startState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={startState.setOpen}\n          >\n            <DatePickerButton\n              size={size}\n              {...mergeProps(\n                startProps.buttonProps,\n                startFocusProps.focusProps,\n              )}\n              // After React Aria's props, whose \"Calendar\" would replace it:\n              // the two buttons need different names.\n              aria-label={t(\n                'datePicker.showStartCalendar',\n                'Show calendar for the start date',\n              )}\n              isDisabled={isDisabled}\n            />\n            <Dialog\n              {...startProps.dialogProps}\n              width=\"max-content\"\n              overflow=\"auto\"\n            >\n              <Calendar\n                {...startProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.start || state.value?.end || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? { start: state.value.start, end: state.value.end }\n                    : undefined\n                }\n                onChange={(value: DateValue) => onChange(value, 'start')}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.time', 'Time')}\n                  value={startState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={startState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      </DateInputBase>\n      <DateRangeDash />\n      <DateInputBase\n        disableFocusRing={endFocusProps.isFocused}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        size={size}\n        {...endFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            placement={props.placement ?? 'bottom right'}\n            targetRef={props.targetRef ?? targetRef}\n            isOpen={endState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={endState.setOpen}\n          >\n            <DatePickerButton\n              size={size}\n              {...mergeProps(endFocusProps.focusProps, endProps.buttonProps)}\n              aria-label={t(\n                'datePicker.showEndCalendar',\n                'Show calendar for the end date',\n              )}\n              isDisabled={isDisabled}\n            />\n            <Dialog\n              {...endProps.dialogProps}\n              width=\"max-content\"\n              overflow=\"auto\"\n            >\n              <Calendar\n                {...endProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.end || state.value?.start || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? { start: state.value.start, end: state.value.end }\n                    : undefined\n                }\n                onChange={(value: DateValue) => {\n                  onChange(value, 'end');\n                }}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.time', 'Time')}\n                  value={endState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={endState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n      </DateInputBase>\n    </DatePickerElement>\n  );\n\n  return wrapWithField(component, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker) as <\n  T extends DateValue,\n>(\n  props: CubeDateRangeSeparatedPickerProps<T> & {\n    ref?: FocusableRef<HTMLElement>;\n  },\n) => ReactElement;\n\n(_DateRangeSeparatedPicker as any).displayName = 'DateRangeSeparatedPicker';\n\nexport { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };\n"],"mappings":"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"}
+{"version":3,"file":"DateRangeSeparatedPicker.js","names":["FocusableRef","BaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useRef","AriaDateRangePickerProps","DateValue","Placement","useDatePicker","useDateRangePicker","useFocusRing","useDatePickerState","useDateRangePickerState","useI18n","FieldBaseProps","mergeProps","mergeStyleLayers","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerElement","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","DateRangeDash","children","styles","padding","color","CubeDateRangeSeparatedPickerProps","Omit","T","start","end","wrapperStyles","inputStyles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DateRangeSeparatedPicker","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","Object","assign","fieldLayout","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","state","startDateProps","onChange","undefined","validate","value","defaultValue","endDateProps","startState","endState","startFocusRingProps","within","isTextInput","startFocusProps","endFocusRingProps","endFocusProps","groupProps","labelProps","startFieldProps","endFieldProps","startProps","endProps","placeholder","timePlaceholder","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t1","calendarProps","type","newRange","compare","setValue","setDateTime","setOpen","newRange_0","t2","isFocused","t3","isReadOnly","t4","focusProps","t5","isOpen","t6","t7","t8","buttonProps","t9","t10","t11","t12","value_0","t13","t14","timeValue","hourCycle","hideTimeZone","setTimeValue","t15","dialogProps","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","t30","value_1","t31","t32","t33","t34","t35","t36","component","field","_DateRangeSeparatedPicker","displayName","_c","mergeProps","Calendar","TimeInput","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactElement, RefObject, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState, useDateRangePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerElement } from './DatePickerElement';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n    color: '#dark-03',\n  },\n});\n\nexport interface CubeDateRangeSeparatedPickerProps<\n  T extends DateValue = DateValue,\n>\n  extends\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'errorMessage' | 'form' | 'name' | keyof DateFieldBase<T>\n    >,\n    BaseProps,\n    FieldLayoutStyleProps,\n    DateFieldBase<T>,\n    FieldBaseProps<{ start: T; end: T } | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom right'\n   */\n  placement?: Placement;\n  useLocale?: boolean;\n}\n\nfunction DateRangeSeparatedPicker<T extends DateValue>(\n  rawProps: CubeDateRangeSeparatedPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // `wrapperStyles` styles the same box as `styles` and wins over it.\n  const fieldLayout = splitFieldLayout(props);\n  const styles = mergeStyleLayers(fieldLayout.styles, props.wrapperStyles);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n\n  let state = useDateRangePickerState({\n    ...props,\n  });\n\n  let startDateProps = {\n    ...props,\n    onChange: undefined,\n    validate: undefined,\n    value: state.value?.start,\n    defaultValue: props.defaultValue?.start,\n  };\n  let endDateProps = {\n    ...props,\n    onChange: undefined,\n    validate: undefined,\n    value: state.value?.end,\n    defaultValue: props.defaultValue?.end,\n  };\n  let startState = useDatePickerState(startDateProps);\n  let endState = useDatePickerState(endDateProps);\n\n  let startFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let startFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n  let endFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let endFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n\n  useFocusManagerRef(ref, targetRef);\n\n  let { groupProps, labelProps, startFieldProps, endFieldProps } =\n    useDateRangePicker(props, state, targetRef);\n\n  let startProps = useDatePicker(startDateProps, startState, targetRef);\n  let endProps = useDatePicker(endDateProps, endState, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue ?? undefined;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : undefined;\n  let showTimeField = !!timeGranularity;\n\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  function onChange(value: DateValue, type: 'start' | 'end') {\n    if (type === 'start') {\n      const newRange = { ...state.value, start: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.end = newRange.start;\n      }\n\n      if (newRange.end) {\n        state.setValue({ start: newRange.start, end: newRange.end });\n      } else {\n        state.setDateTime('start', newRange.start);\n      }\n      startProps.calendarProps.onChange?.(value);\n      startState.setOpen(false);\n    } else {\n      const newRange = { ...state.value, end: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.start = newRange.end;\n      }\n\n      if (newRange.start) {\n        state.setValue({ start: newRange.start, end: newRange.end });\n      } else {\n        state.setDateTime('end', newRange.end);\n      }\n      endProps.calendarProps.onChange?.(value);\n      endState.setOpen(false);\n    }\n  }\n\n  const component = (\n    <DatePickerElement\n      ref={targetRef}\n      {...groupProps}\n      styles={styles}\n      qa={qa || 'DateRangeSeparatedPicker'}\n      data-input-type=\"daterangeseparatedpicker\"\n    >\n      <DateInputBase\n        autoFocus={autoFocus}\n        disableFocusRing={startFocusProps.isFocused}\n        isDisabled={isDisabled}\n        isReadOnly={props.isReadOnly}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        size={size}\n        {...startFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            placement={props.placement ?? 'bottom right'}\n            targetRef={props.targetRef ?? targetRef}\n            isOpen={startState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={startState.setOpen}\n          >\n            <DatePickerButton\n              size={size}\n              {...mergeProps(\n                startProps.buttonProps,\n                startFocusProps.focusProps,\n              )}\n              // After React Aria's props, whose \"Calendar\" would replace it:\n              // the two buttons need different names.\n              aria-label={t(\n                'datePicker.showStartCalendar',\n                'Show calendar for the start date',\n              )}\n              isDisabled={isDisabled}\n            />\n            <Dialog\n              {...startProps.dialogProps}\n              width=\"max-content\"\n              overflow=\"auto\"\n            >\n              <Calendar\n                {...startProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.start || state.value?.end || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? { start: state.value.start, end: state.value.end }\n                    : undefined\n                }\n                onChange={(value: DateValue) => onChange(value, 'start')}\n              />\n              {showTimeField && (\n                <TimeInput\n                  label={t('datePicker.time', 'Time')}\n                  value={startState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={startState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      </DateInputBase>\n      <DateRangeDash />\n      <DateInputBase\n        disableFocusRing={endFocusProps.isFocused}\n        isDisabled={isDisabled}\n        isReadOnly={props.isReadOnly}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        size={size}\n        {...endFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            placement={props.placement ?? 'bottom right'}\n            targetRef={props.targetRef ?? targetRef}\n            isOpen={endState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={endState.setOpen}\n          >\n            <DatePickerButton\n              size={size}\n              {...mergeProps(endFocusProps.focusProps, endProps.buttonProps)}\n              aria-label={t(\n                'datePicker.showEndCalendar',\n                'Show calendar for the end date',\n              )}\n              isDisabled={isDisabled}\n            />\n            <Dialog\n              {...endProps.dialogProps}\n              width=\"max-content\"\n              overflow=\"auto\"\n            >\n              <Calendar\n                {...endProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.end || state.value?.start || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? { start: state.value.start, end: state.value.end }\n                    : undefined\n                }\n                onChange={(value: DateValue) => {\n                  onChange(value, 'end');\n                }}\n              />\n              {showTimeField && (\n                <TimeInput\n                  label={t('datePicker.time', 'Time')}\n                  value={endState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={endState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n      </DateInputBase>\n    </DatePickerElement>\n  );\n\n  return wrapWithField(component, {\n    ...props,\n    ...fieldLayout.field,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker) as <\n  T extends DateValue,\n>(\n  props: CubeDateRangeSeparatedPickerProps<T> & {\n    ref?: FocusableRef<HTMLElement>;\n  },\n) => ReactElement;\n\n(_DateRangeSeparatedPicker as any).displayName = 'DateRangeSeparatedPicker';\n\nexport { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { PeriodPicker } from "./PeriodPicker.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";

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

@@ -1,13 +1,14 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { PickerType } from "./period.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { ReactElement, RefObject } from "react";
 import { AriaDatePickerProps, DateValue, Placement } from "react-aria";
 import { FocusableRef } from "@react-types/shared";
 //#region src/components/fields/DatePicker/PeriodPicker.d.ts
-export interface CubePeriodPickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'granularity' | 'form' | 'name'>, BaseProps, ContainerStyleProps, FieldBaseProps<T | null | undefined> {
+export interface CubePeriodPickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'granularity' | 'form' | 'name'>, BaseProps, FieldLayoutStyleProps, FieldBaseProps<T | null | undefined> {
   /** Which period the picker selects. Set by the concrete picker components. */
   picker?: PickerType;
   wrapperStyles?: Styles;

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

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+import { mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { DateInputBase as _DateInputBase } from "./DateInputBase.js";
 import { useFocusManagerRef } from "./utils.js";
@@ -13,7 +14,7 @@ import { Calendar as _Calendar } from "../../other/Calendar/Calendar.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { PeriodCalendar } from "../../other/Calendar/PeriodCalendar.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useFocusRing, useLocale } from "react-aria";
@@ -37,7 +38,7 @@ const PeriodValueElement = tasty({
 const INPUT_STYLES = { cursor: "pointer" };
 const INERT_INPUT_STYLES = { cursor: "default" };
 function PeriodPickerImpl(rawProps, ref) {
-	const $ = c(90);
+	const $ = c(73);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -45,7 +46,7 @@ function PeriodPickerImpl(rawProps, ref) {
 		$[0] = t0;
 	} else t0 = $[0];
 	const props = useFieldProps(rawProps, t0);
-	const styles = extractStyles(props, CONTAINER_STYLES);
+	const { styles, field } = splitFieldLayout(props);
 	const { qa, size, picker: t1, placeholder, formatValue, isDisabled, isReadOnly, isInvalid, isValid, autoFocus } = props;
 	const picker = t1 === void 0 ? "month" : t1;
 	let t2;
@@ -175,33 +176,30 @@ function PeriodPickerImpl(rawProps, ref) {
 		$[36] = t12;
 	} else t12 = $[36];
 	const panel = t12;
-	const T0 = _DateInputBase;
-	const t13 = qa || "PeriodPicker";
-	const t14 = "datepicker";
-	const t15 = mergeStyleLayers({ display: "grid" }, styles, props.wrapperStyles);
-	const t16 = isDisabled || isReadOnly ? INERT_INPUT_STYLES : INPUT_STYLES;
-	let t17;
-	if ($[37] !== props.inputStyles || $[38] !== t16) {
-		t17 = mergeStyleLayers(t16, props.inputStyles);
+	const t13 = mergeStyleLayers({ display: "grid" }, styles, props.wrapperStyles);
+	const t14 = isDisabled || isReadOnly ? INERT_INPUT_STYLES : INPUT_STYLES;
+	let t15;
+	if ($[37] !== props.inputStyles || $[38] !== t14) {
+		t15 = mergeStyleLayers(t14, props.inputStyles);
 		$[37] = props.inputStyles;
-		$[38] = t16;
-		$[39] = t17;
-	} else t17 = $[39];
-	const t18 = props.placement ?? "bottom right";
-	const t19 = props.targetRef ?? targetRef;
-	const t20 = props.shouldFlip;
-	let t21;
+		$[38] = t14;
+		$[39] = t15;
+	} else t15 = $[39];
+	const t16 = props.placement ?? "bottom right";
+	const t17 = props.targetRef ?? targetRef;
+	const t18 = props.shouldFlip;
+	let t19;
 	if ($[40] !== buttonProps || $[41] !== focusPropsButton) {
-		t21 = mergeProps$1(buttonProps, focusPropsButton);
+		t19 = mergeProps$1(buttonProps, focusPropsButton);
 		$[40] = buttonProps;
 		$[41] = focusPropsButton;
-		$[42] = t21;
-	} else t21 = $[42];
-	let t22;
-	if ($[43] !== isDisabled || $[44] !== isReadOnly || $[45] !== props.triggerStyles || $[46] !== size || $[47] !== t21 || $[48] !== valueId) {
-		t22 = /* @__PURE__ */ jsx(DatePickerButton, {
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== isDisabled || $[44] !== isReadOnly || $[45] !== props.triggerStyles || $[46] !== size || $[47] !== t19 || $[48] !== valueId) {
+		t20 = /* @__PURE__ */ jsx(DatePickerButton, {
 			size,
-			...t21,
+			...t19,
 			"aria-describedby": valueId,
 			isDisabled,
 			isReadOnly,
@@ -211,13 +209,13 @@ function PeriodPickerImpl(rawProps, ref) {
 		$[44] = isReadOnly;
 		$[45] = props.triggerStyles;
 		$[46] = size;
-		$[47] = t21;
+		$[47] = t19;
 		$[48] = valueId;
-		$[49] = t22;
-	} else t22 = $[49];
-	let t23;
+		$[49] = t20;
+	} else t20 = $[49];
+	let t21;
 	if ($[50] !== dialogProps || $[51] !== panel) {
-		t23 = /* @__PURE__ */ jsx(Dialog, {
+		t21 = /* @__PURE__ */ jsx(Dialog, {
 			...dialogProps,
 			width: "max-content",
 			overflow: "auto",
@@ -225,107 +223,83 @@ function PeriodPickerImpl(rawProps, ref) {
 		});
 		$[50] = dialogProps;
 		$[51] = panel;
-		$[52] = t23;
-	} else t23 = $[52];
-	let t24;
-	if ($[53] !== isOpen || $[54] !== props.shouldFlip || $[55] !== setOpen || $[56] !== t18 || $[57] !== t19 || $[58] !== t22 || $[59] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(DialogTrigger, {
+		$[52] = t21;
+	} else t21 = $[52];
+	let t22;
+	if ($[53] !== isOpen || $[54] !== props.shouldFlip || $[55] !== setOpen || $[56] !== t16 || $[57] !== t17 || $[58] !== t20 || $[59] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
-			placement: t18,
-			targetRef: t19,
+			placement: t16,
+			targetRef: t17,
 			isOpen,
-			shouldFlip: t20,
+			shouldFlip: t18,
 			onOpenChange: setOpen,
-			children: [t22, t23]
+			children: [t20, t21]
 		});
 		$[53] = isOpen;
 		$[54] = props.shouldFlip;
 		$[55] = setOpen;
-		$[56] = t18;
-		$[57] = t19;
-		$[58] = t22;
-		$[59] = t23;
-		$[60] = t24;
-	} else t24 = $[60];
-	const t25 = !state.value;
-	let t26;
-	if ($[61] !== isDisabled || $[62] !== t25) {
-		t26 = {
-			placeholder: t25,
+		$[56] = t16;
+		$[57] = t17;
+		$[58] = t20;
+		$[59] = t21;
+		$[60] = t22;
+	} else t22 = $[60];
+	const t23 = !state.value;
+	let t24;
+	if ($[61] !== isDisabled || $[62] !== t23) {
+		t24 = {
+			placeholder: t23,
 			disabled: isDisabled
 		};
 		$[61] = isDisabled;
-		$[62] = t25;
-		$[63] = t26;
-	} else t26 = $[63];
-	let t27;
+		$[62] = t23;
+		$[63] = t24;
+	} else t24 = $[63];
+	let t25;
 	if ($[64] !== isDisabled || $[65] !== isReadOnly || $[66] !== setOpen) {
-		t27 = () => !isDisabled && !isReadOnly && setOpen(true);
+		t25 = () => !isDisabled && !isReadOnly && setOpen(true);
 		$[64] = isDisabled;
 		$[65] = isReadOnly;
 		$[66] = setOpen;
-		$[67] = t27;
-	} else t27 = $[67];
-	let t28;
-	if ($[68] !== displayText || $[69] !== t26 || $[70] !== t27 || $[71] !== valueId) {
-		t28 = /* @__PURE__ */ jsx(PeriodValueElement, {
+		$[67] = t25;
+	} else t25 = $[67];
+	let t26;
+	if ($[68] !== displayText || $[69] !== t24 || $[70] !== t25 || $[71] !== valueId) {
+		t26 = /* @__PURE__ */ jsx(PeriodValueElement, {
 			id: valueId,
-			mods: t26,
-			onClick: t27,
+			mods: t24,
+			onClick: t25,
 			children: displayText
 		});
 		$[68] = displayText;
-		$[69] = t26;
-		$[70] = t27;
+		$[69] = t24;
+		$[70] = t25;
 		$[71] = valueId;
-		$[72] = t28;
-	} else t28 = $[72];
-	let t29;
-	if ($[73] !== T0 || $[74] !== groupProps || $[75] !== isDisabled || $[76] !== isFocusedButton || $[77] !== isInvalid || $[78] !== isValid || $[79] !== size || $[80] !== t13 || $[81] !== t15 || $[82] !== t17 || $[83] !== t24 || $[84] !== t28) {
-		t29 = /* @__PURE__ */ jsx(T0, {
-			ref: targetRef,
-			wrapperRef: domRef,
-			qa: t13,
-			inputType: t14,
-			styles: t15,
-			inputStyles: t17,
-			disableFocusRing: isFocusedButton,
-			isDisabled,
-			isInvalid,
-			isValid,
-			size,
-			fieldProps: groupProps,
-			suffix: t24,
-			children: t28
-		});
-		$[73] = T0;
-		$[74] = groupProps;
-		$[75] = isDisabled;
-		$[76] = isFocusedButton;
-		$[77] = isInvalid;
-		$[78] = isValid;
-		$[79] = size;
-		$[80] = t13;
-		$[81] = t15;
-		$[82] = t17;
-		$[83] = t24;
-		$[84] = t28;
-		$[85] = t29;
-	} else t29 = $[85];
-	const component = t29;
-	let t30;
-	if ($[86] !== component || $[87] !== labelProps || $[88] !== props) {
-		t30 = wrapWithField(component, {
-			...props,
-			labelProps: mergeProps$1(props.labelProps, labelProps)
-		});
-		$[86] = component;
-		$[87] = labelProps;
-		$[88] = props;
-		$[89] = t30;
-	} else t30 = $[89];
-	return t30;
+		$[72] = t26;
+	} else t26 = $[72];
+	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
+		ref: targetRef,
+		wrapperRef: domRef,
+		qa: qa || "PeriodPicker",
+		inputType: "datepicker",
+		styles: t13,
+		inputStyles: t15,
+		disableFocusRing: isFocusedButton,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		isValid,
+		size,
+		fieldProps: groupProps,
+		suffix: t22,
+		children: t26
+	}), {
+		...props,
+		...field,
+		labelProps: mergeProps$1(props.labelProps, labelProps)
+	});
 }
 const _PeriodPicker = forwardRef(PeriodPickerImpl);
 _PeriodPicker.displayName = "PeriodPicker";

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

@@ -1 +1 @@
-{"version":3,"file":"PeriodPicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","ReactElement","RefObject","useId","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useLocale","useDatePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","mergeStyleLayers","useFieldProps","wrapWithField","Calendar","PeriodCalendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","formatPeriod","PickerType","snapToPeriod","useFocusManagerRef","PeriodValueElement","qa","styles","preset","width","whiteSpace","textOverflow","overflow","color","placeholder","disabled","CubePeriodPickerProps","Omit","T","picker","wrapperStyles","inputStyles","triggerStyles","size","shouldFlip","targetRef","HTMLElement","placement","formatValue","date","locale","INPUT_STYLES","cursor","INERT_INPUT_STYLES","PeriodPickerImpl","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","t1","isDisabled","isReadOnly","isInvalid","isValid","autoFocus","undefined","t2","t3","t4","t5","t6","week","month","quarter","year","defaultPlaceholder","t7","granularity","shouldCloseOnSelect","state","isOpen","setOpen","domRef","t8","within","isTextInput","isFocused","isFocusedButton","focusProps","focusPropsButton","t9","groupProps","labelProps","buttonProps","dialogProps","calendarProps","t10","setValue","handleSelect","t11","value","displayText","valueId","t12","minValue","maxValue","isDateUnavailable","panel","T0","t13","t14","t15","display","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","component","t30","_PeriodPicker","displayName","PeriodPicker","_c","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, ReactElement, RefObject, useId, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\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, mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { PeriodCalendar } from '../../other/Calendar/PeriodCalendar';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\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\n    Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'granularity' | 'form' | 'name'\n    >,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\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  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom right'\n   */\n  placement?: Placement;\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\nconst INPUT_STYLES: Styles = { cursor: 'pointer' };\nconst INERT_INPUT_STYLES: Styles = { cursor: 'default' };\n\nfunction PeriodPickerImpl<T extends DateValue>(\n  rawProps: CubePeriodPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  let props = useFieldProps(rawProps, {\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 = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\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      wrapperRef={domRef}\n      qa={qa || 'PeriodPicker'}\n      inputType=\"datepicker\"\n      styles={mergeStyleLayers(\n        { display: 'grid' },\n        styles,\n        props.wrapperStyles,\n      )}\n      inputStyles={mergeStyleLayers(\n        isDisabled || isReadOnly ? INERT_INPUT_STYLES : INPUT_STYLES,\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          placement={props.placement ?? 'bottom right'}\n          targetRef={props.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            // Passed separately, not merged: only the field-disabled half is\n            // inherited. See `DatePickerButton`.\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            styles={props.triggerStyles}\n          />\n          <Dialog {...dialogProps} width=\"max-content\" overflow=\"auto\">\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, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _PeriodPicker = forwardRef(PeriodPickerImpl);\n\n_PeriodPicker.displayName = 'PeriodPicker';\n\nexport const PeriodPicker = _PeriodPicker as <T extends DateValue = DateValue>(\n  props: CubePeriodPickerProps<T> & { ref?: FocusableRef<HTMLElement> },\n) => ReactElement | null;\n"],"mappings":"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"}
+{"version":3,"file":"PeriodPicker.js","names":["FocusableRef","BaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useId","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useLocale","useDatePickerState","useI18n","FieldBaseProps","mergeProps","mergeStyleLayers","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","Calendar","PeriodCalendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","formatPeriod","PickerType","snapToPeriod","useFocusManagerRef","PeriodValueElement","qa","styles","preset","width","whiteSpace","textOverflow","overflow","color","placeholder","disabled","CubePeriodPickerProps","Omit","T","picker","wrapperStyles","inputStyles","triggerStyles","size","shouldFlip","targetRef","HTMLElement","placement","formatValue","date","locale","INPUT_STYLES","cursor","INERT_INPUT_STYLES","PeriodPickerImpl","rawProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","props","field","t1","isDisabled","isReadOnly","isInvalid","isValid","autoFocus","undefined","t2","t3","t4","t5","t6","week","month","quarter","year","defaultPlaceholder","t7","granularity","shouldCloseOnSelect","state","isOpen","setOpen","domRef","t8","within","isTextInput","isFocused","isFocusedButton","focusProps","focusPropsButton","t9","groupProps","labelProps","buttonProps","dialogProps","calendarProps","t10","setValue","handleSelect","t11","value","displayText","valueId","t12","minValue","maxValue","isDateUnavailable","panel","t13","display","t14","t15","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","component","_PeriodPicker","displayName","PeriodPicker","_c","Calendar","mergeProps","DateInputBase"],"sources":["../../../../src/components/fields/DatePicker/PeriodPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactElement, RefObject, useId, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\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 { mergeStyleLayers } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { PeriodCalendar } from '../../other/Calendar/PeriodCalendar';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\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\n    Omit<\n      AriaDatePickerProps<T>,\n      'errorMessage' | 'granularity' | 'form' | 'name'\n    >,\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<T | null | undefined> {\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  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom right'\n   */\n  placement?: Placement;\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\nconst INPUT_STYLES: Styles = { cursor: 'pointer' };\nconst INERT_INPUT_STYLES: Styles = { cursor: 'default' };\n\nfunction PeriodPickerImpl<T extends DateValue>(\n  rawProps: CubePeriodPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n  });\n\n  const { styles, field } = splitFieldLayout(props);\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 = useRef<HTMLDivElement>(null);\n\n  useFocusManagerRef(ref, domRef);\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      wrapperRef={domRef}\n      qa={qa || 'PeriodPicker'}\n      inputType=\"datepicker\"\n      styles={mergeStyleLayers(\n        { display: 'grid' },\n        styles,\n        props.wrapperStyles,\n      )}\n      inputStyles={mergeStyleLayers(\n        isDisabled || isReadOnly ? INERT_INPUT_STYLES : INPUT_STYLES,\n        props.inputStyles,\n      )}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          placement={props.placement ?? 'bottom right'}\n          targetRef={props.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            // Passed separately, not merged: only the field-disabled half is\n            // inherited. See `DatePickerButton`.\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            styles={props.triggerStyles}\n          />\n          <Dialog {...dialogProps} width=\"max-content\" overflow=\"auto\">\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, {\n    ...props,\n    ...field,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _PeriodPicker = forwardRef(PeriodPickerImpl);\n\n_PeriodPicker.displayName = 'PeriodPicker';\n\nexport const PeriodPicker = _PeriodPicker as <T extends DateValue = DateValue>(\n  props: CubePeriodPickerProps<T> & { ref?: FocusableRef<HTMLElement> },\n) => ReactElement | null;\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { PeriodPicker } from "./PeriodPicker.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";

package/dist/components/fields/DatePicker/TimeInput.d.ts

@@ -1,11 +1,12 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { Granularity } from "./types.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { AriaTimeFieldProps, DateValue, TimeValue } from "react-aria";
 //#region src/components/fields/DatePicker/TimeInput.d.ts
-export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Omit<AriaTimeFieldProps<TimeValue>, 'errorMessage' | 'form' | 'name' | 'value' | 'onChange' | 'granularity'>, BaseProps, ContainerStyleProps, FieldBaseProps<TimeValue | null | undefined> {
+export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Omit<AriaTimeFieldProps<TimeValue>, 'errorMessage' | 'form' | 'name' | 'value' | 'onChange' | 'granularity'>, BaseProps, FieldLayoutStyleProps, FieldBaseProps<TimeValue | null | undefined> {
   wrapperStyles?: Styles;
   inputStyles?: Styles;
   styles?: Styles;

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

@@ -1,14 +1,14 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+import { mergeStyleLayers } 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";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { DateInputBase as _DateInputBase } from "./DateInputBase.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { DEFAULT_TIME_PROPS } from "./props.js";
 import { useFocusManagerRef } from "./utils.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useTimeField } from "react-aria";
@@ -23,7 +23,7 @@ function TimeInput(rawProps, ref) {
 	} else t0 = $[0];
 	let props = useFieldProps(rawProps, t0);
 	props = Object.assign({}, DEFAULT_TIME_PROPS, props);
-	extractStyles(props, CONTAINER_STYLES);
+	const { styles, field } = splitFieldLayout(props);
 	const { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, isInvalid, isValid, size: t1, labelProps: userLabelProps } = props;
 	const size = t1 === void 0 ? "medium" : t1;
 	const domRef = useRef(null);
@@ -47,9 +47,10 @@ function TimeInput(rawProps, ref) {
 		size,
 		fieldProps,
 		isDisabled,
+		isReadOnly,
 		autoFocus,
 		inputStyles,
-		styles: wrapperStyles,
+		styles: mergeStyleLayers(styles, wrapperStyles),
 		isInvalid,
 		isValid,
 		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DatePickerSegment, {
@@ -62,6 +63,7 @@ function TimeInput(rawProps, ref) {
 	});
 	return wrapWithField(timeInput, {
 		...props,
+		...field,
 		labelProps: mergeProps$1(labelProps, userLabelProps)
 	});
 }