@cube-dev/ui-kit 0.121.5 → 0.121.7

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFormProps } from "../../form/Form/Form.js";
@@ -9,7 +10,7 @@ import { DatePickerSegment } from "./DatePickerSegment.js";
 import { DEFAULT_DATE_PROPS } from "./props.js";
 import { formatSegments, useFocusManagerRef } from "./utils.js";
 import { parseAbsoluteDate } from "./parseDate.js";
-import { CONTAINER_STYLES, extractStyles } from "@tenphi/tasty";
+import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDateField, useLocale } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  useDateField,\n  useLocale,\n} from 'react-aria';\nimport { useDateFieldState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { parseAbsoluteDate } from './parseDate';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { formatSegments, useFocusManagerRef } from './utils';\n\nexport interface CubeDateInputProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  useLocale?: boolean;\n}\n\nfunction DateInput<T extends DateValue>(\n  props: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: typeof value === 'string' ? parseAbsoluteDate(value) : value,\n      onChange,\n    }),\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let {\n    qa,\n    autoFocus,\n    isDisabled,\n    inputStyles,\n    wrapperStyles,\n    isReadOnly,\n    isRequired,\n    size = 'medium',\n    useLocale: useLocaleProp,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);\n\n  let domRef = useFocusManagerRef(ref);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useDateField(props, state, fieldRef);\n\n  const component = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'DateInput'}\n      inputType=\"dateinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      validationState={state.validationState}\n      styles={wrapperStyles}\n      inputStyles={inputStyles}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\n/**\n * DateInputs allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nconst _DateInput = forwardRef(DateInput) as typeof DateInput;\n\n(_DateInput as any).displayName = 'DateInput';\n\nexport { _DateInput as DateInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CA,SAAS,UACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,OAAO,UAAU,WAAW,kBAAkB,MAAM,GAAG;GAC9D;GACD;EACF,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;CAEpD,IAAI,EACF,IACA,WACA,YACA,aACA,eACA,YACA,YACA,OAAO,UACP,WAAW,kBACT;AAES,eAAc,OAAO,kBAAkB,cAAc;CAElE,IAAI,SAAS,mBAAmB,IAAI;CACpC,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA4BrE,QAAO,cAzBL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACX,iBAAiB,MAAM;EACvB,QAAQ;EACK;YAEZ,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAExC,AAAC,WAAmB,cAAc"}
+{"version":3,"file":"DateInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  useDateField,\n  useLocale,\n} from 'react-aria';\nimport { useDateFieldState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { parseAbsoluteDate } from './parseDate';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { formatSegments, useFocusManagerRef } from './utils';\n\nexport interface CubeDateInputProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  useLocale?: boolean;\n}\n\nfunction DateInput<T extends DateValue>(\n  props: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: typeof value === 'string' ? parseAbsoluteDate(value) : value,\n      onChange,\n    }),\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let {\n    qa,\n    autoFocus,\n    isDisabled,\n    inputStyles,\n    wrapperStyles,\n    isReadOnly,\n    isRequired,\n    size = 'medium',\n    useLocale: useLocaleProp,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);\n\n  let domRef = useFocusManagerRef(ref);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useDateField(props, state, fieldRef);\n\n  const component = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'DateInput'}\n      inputType=\"dateinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      validationState={state.validationState}\n      styles={wrapperStyles}\n      inputStyles={inputStyles}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\n/**\n * DateInputs allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nconst _DateInput = forwardRef(DateInput) as typeof DateInput;\n\n(_DateInput as any).displayName = 'DateInput';\n\nexport { _DateInput as DateInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA,SAAS,UACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,OAAO,UAAU,WAAW,kBAAkB,MAAM,GAAG;GAC9D;GACD;EACF,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;CAEpD,IAAI,EACF,IACA,WACA,YACA,aACA,eACA,YACA,YACA,OAAO,UACP,WAAW,kBACT;AAES,eAAc,OAAO,kBAAkB,cAAc;CAElE,IAAI,SAAS,mBAAmB,IAAI;CACpC,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA4BrE,QAAO,cAzBL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACX,iBAAiB,MAAM;EACvB,QAAQ;EACK;YAEZ,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAExC,AAAC,WAAmB,cAAc"}

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";
 import { ValidIcon } from "../../shared/ValidIcon.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
-import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import React, { cloneElement, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusRing } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputBase.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { cloneElement, useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    validationState,\n    isLoading,\n    size = 'medium',\n    suffix,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  let isInvalid = validationState === 'invalid';\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  return (\n    <DateInputWrapperElement\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        invalid: isInvalid,\n        suffix: (validationState && !isLoading) || isLoading || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {(validationState && !isLoading) || isLoading || suffix ? (\n        <div data-element=\"Suffix\">\n          {(validationState && !isLoading) || isLoading ? (\n            <div data-element=\"State\">\n              {validationState && !isLoading ? validation : null}\n            </div>\n          ) : null}\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,GAAG;EACH,SAAS;EACV;CACF,CAAC;AAEF,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAmBF,SAAS,cAAc,OAA+B,KAAK;CACzD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EACF,IACA,WACA,YACA,aACA,UACA,YACA,OACA,kBACA,WACA,iBACA,WACA,OAAO,UACP,WACE;CAEJ,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EAAE,YAAY,cAAc,aAAa;EAC3C,aAAa;EACb,QAAQ;EACR;EACD,CAAC;CAEF,IAAI,YAAY,oBAAoB;CAEpC,IAAI,aAAa,aADI,YAAY,cAAc,UACF;AAE7C,QACE,qBAAC;EACC,IAAI,MAAM;EACF;EACR,aAAW;EACX,mBAAiB,YAAY,YAAY;EACzC,MAAM;GACJ,UAAU;GACV,SAAS,aAAa,CAAC;GACvB,SAAS;GACT,QAAS,mBAAmB,CAAC,aAAc,aAAa,CAAC,CAAC;GAC3D;EACD,GAAIA,aAAW,cAAc,EAAE,EAAE,WAAW;EACrC;aAEP,oBAAC;GAAI,gBAAa;GAAW,MAAK;aAChC,oBAAC;IACC,KAAK,UAAU,KAAK,SAAS;IAC7B,aAAW;IACX,MAAK;IACL,QAAQ;IAEP;KACgB;IACf,EACJ,mBAAmB,CAAC,aAAc,aAAa,SAC/C,qBAAC;GAAI,gBAAa;cACd,mBAAmB,CAAC,aAAc,YAClC,oBAAC;IAAI,gBAAa;cACf,mBAAmB,CAAC,YAAY,aAAa;KAC1C,GACJ,MACH;IACG,GACJ;GACoB;;AAI9B,MAAM,iBAAiB,MAAM,WAAW,cAAc;AAEtD,eAAe,cAAc"}
+{"version":3,"file":"DateInputBase.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { cloneElement, useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    validationState,\n    isLoading,\n    size = 'medium',\n    suffix,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  let isInvalid = validationState === 'invalid';\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  return (\n    <DateInputWrapperElement\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        invalid: isInvalid,\n        suffix: (validationState && !isLoading) || isLoading || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {(validationState && !isLoading) || isLoading || suffix ? (\n        <div data-element=\"Suffix\">\n          {(validationState && !isLoading) || isLoading ? (\n            <div data-element=\"State\">\n              {validationState && !isLoading ? validation : null}\n            </div>\n          ) : null}\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,GAAG;EACH,SAAS;EACV;CACF,CAAC;AAEF,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAmBF,SAAS,cAAc,OAA+B,KAAK;CACzD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EACF,IACA,WACA,YACA,aACA,UACA,YACA,OACA,kBACA,WACA,iBACA,WACA,OAAO,UACP,WACE;CAEJ,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EAAE,YAAY,cAAc,aAAa;EAC3C,aAAa;EACb,QAAQ;EACR;EACD,CAAC;CAEF,IAAI,YAAY,oBAAoB;CAEpC,IAAI,aAAa,aADI,YAAY,cAAc,UACF;AAE7C,QACE,qBAAC;EACC,IAAI,MAAM;EACF;EACR,aAAW;EACX,mBAAiB,YAAY,YAAY;EACzC,MAAM;GACJ,UAAU;GACV,SAAS,aAAa,CAAC;GACvB,SAAS;GACT,QAAS,mBAAmB,CAAC,aAAc,aAAa,CAAC,CAAC;GAC3D;EACD,GAAIA,aAAW,cAAc,EAAE,EAAE,WAAW;EACrC;aAEP,oBAAC;GAAI,gBAAa;GAAW,MAAK;aAChC,oBAAC;IACC,KAAK,UAAU,KAAK,SAAS;IAC7B,aAAW;IACX,MAAK;IACL,QAAQ;IAEP;KACgB;IACf,EACJ,mBAAmB,CAAC,aAAc,aAAa,SAC/C,qBAAC;GAAI,gBAAa;cACd,mBAAmB,CAAC,aAAc,YAClC,oBAAC;IAAI,gBAAa;cACf,mBAAmB,CAAC,YAAY,aAAa;KAC1C,GACJ,MACH;IACG,GACJ;GACoB;;AAI9B,MAAM,iBAAiB,MAAM,WAAW,cAAc;AAEtD,eAAe,cAAc"}

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFormProps } from "../../form/Form/Form.js";
@@ -14,7 +15,7 @@ import { _Calendar } from "../../other/Calendar/Calendar.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { dateMessages } from "./intl.js";
-import { CONTAINER_STYLES, extractStyles } from "@tenphi/tasty";
+import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useFocusRing } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\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          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={dateMessages['time']}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAS,WACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EACF,YACA,YACA,YACA,aACA,aACA,kBACE,cAAc,OAAO,OAAO,UAAU;CAE1C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuDtB,QAAO,cAnDL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,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;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,aAAS,GAAI,gBAAiB,EAC9B,iBACC,oBAACC;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM;KACb,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,UAAU,MAAM;MAChB;KAEG;IACK;YAGlB,oBAAC;GAAgB,WAAW;GAAe,GAAI;IAAc;GAC/C,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"DatePicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\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          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={dateMessages['time']}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAS,WACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EACF,YACA,YACA,YACA,aACA,aACA,kBACE,cAAc,OAAO,OAAO,UAAU;CAE1C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuDtB,QAAO,cAnDL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,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;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,aAAS,GAAI,gBAAiB,EAC9B,iBACC,oBAACC;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM;KACb,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,UAAU,MAAM;MAChB;KAEG;IACK;YAGlB,oBAAC;GAAgB,WAAW;GAAe,GAAI;IAAc;GAC/C,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";
@@ -15,7 +16,7 @@ import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { dateMessages } from "./intl.js";
 import { _RangeCalendar } from "../../other/Calendar/RangeCalendar.js";
-import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDateRangePicker, useFocusRing } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","names":["DateInputBase","mergeProps","RangeCalendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\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  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['startTime']}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['endTime']}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as typeof DateRangePicker;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAkBF,SAAS,gBACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,wBAAwB;EAClC,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EACF,YACA,YACA,iBACA,eACA,aACA,aACA,kBACE,mBAAmB,OAAO,OAAO,UAAU;CAE/C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuEtB,QAAO,cAnEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACI;GACZ,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,kBAAc,GAAI,gBAAiB,EACnC,iBACC,qBAAC,oBACC,oBAACC;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,SAAS;KACjC,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,SAAS,EAAE;MAC1C,EACF,oBAACA;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,OAAO;KAC/B,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,OAAO,EAAE;MACxC,IACI;KAEH;IACK;;GAGlB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAmB;GAClE,oBAAC,kBAAgB;GACjB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAiB;;GAClD,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,AAAC,iBAAyB,cAAc"}
+{"version":3,"file":"DateRangePicker.js","names":["DateInputBase","mergeProps","RangeCalendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.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  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\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  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['startTime']}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['endTime']}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as typeof DateRangePicker;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAkBF,SAAS,gBACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,wBAAwB;EAClC,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EACF,YACA,YACA,iBACA,eACA,aACA,aACA,kBACE,mBAAmB,OAAO,OAAO,UAAU;CAE/C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuEtB,QAAO,cAnEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACI;GACZ,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,kBAAc,GAAI,gBAAiB,EACnC,iBACC,qBAAC,oBACC,oBAACC;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,SAAS;KACjC,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,SAAS,EAAE;MAC1C,EACF,oBAACA;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,OAAO;KAC/B,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,OAAO,EAAE;MACxC,IACI;KAEH;IACK;;GAGlB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAmB;GAClE,oBAAC,kBAAgB;GACjB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAiB;;GAClD,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,AAAC,iBAAyB,cAAc"}

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFormProps } from "../../form/Form/Form.js";
@@ -15,7 +16,7 @@ import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { dateMessages } from "./intl.js";
 import { DatePickerElement } from "./DatePickerElement.js";
-import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useDateRangePicker, useFocusRing } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeSeparatedPicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDatePicker,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState, useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerElement } from './DatePickerElement';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\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> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    DateFieldBase<T>,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangeSeparatedPicker<T extends DateValue>(\n  props: CubeDateRangeSeparatedPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n\n  let state = useDateRangePickerState({\n    ...props,\n  });\n\n  let startState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.start,\n  });\n\n  let endState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.end,\n  });\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  let domRef = useFocusManagerRef(ref);\n\n  let { groupProps, labelProps, startFieldProps, endFieldProps } =\n    useDateRangePicker(props, state, targetRef);\n\n  let startProps = useDatePicker(props, startState, targetRef);\n  let endProps = useDatePicker(props, endState, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      : null;\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      state.setValue(newRange);\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      state.setValue(newRange);\n      endProps.calendarProps.onChange(value);\n      endState.setOpen(false);\n    }\n  }\n\n  const component = (\n    <DatePickerElement\n      ref={targetRef}\n      {...groupProps}\n      styles={props.wrapperStyles}\n      qa={qa || 'DateRangeSeparatedPicker'}\n      data-input-type=\"daterangeseparatedpicker\"\n    >\n      <DateInputBase\n        disableFocusRing={startFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...startFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            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              isDisabled={isDisabled}\n            />\n            <Dialog {...startProps.dialogProps} width=\"max-content\">\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                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => onChange(value, 'start')}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['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        validationState={validationState}\n        size={size}\n        {...endFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={endState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={endState.setOpen}\n          >\n            <DatePickerButton\n              aria-label=\"Show calendar for the end date\"\n              size={size}\n              {...mergeProps(endFocusProps.focusProps, endProps.buttonProps)}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...endProps.dialogProps} width=\"max-content\">\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                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => {\n                  onChange(value, 'end');\n                }}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['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, domRef, {\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":["DateInputBase","mergeProps","Calendar","TimeInput"],"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, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDatePicker,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState, useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerElement } from './DatePickerElement';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\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> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    DateFieldBase<T>,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangeSeparatedPicker<T extends DateValue>(\n  props: CubeDateRangeSeparatedPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n\n  let state = useDateRangePickerState({\n    ...props,\n  });\n\n  let startState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.start,\n  });\n\n  let endState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.end,\n  });\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  let domRef = useFocusManagerRef(ref);\n\n  let { groupProps, labelProps, startFieldProps, endFieldProps } =\n    useDateRangePicker(props, state, targetRef);\n\n  let startProps = useDatePicker(props, startState, targetRef);\n  let endProps = useDatePicker(props, endState, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\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      : null;\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      state.setValue(newRange);\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      state.setValue(newRange);\n      endProps.calendarProps.onChange(value);\n      endState.setOpen(false);\n    }\n  }\n\n  const component = (\n    <DatePickerElement\n      ref={targetRef}\n      {...groupProps}\n      styles={props.wrapperStyles}\n      qa={qa || 'DateRangeSeparatedPicker'}\n      data-input-type=\"daterangeseparatedpicker\"\n    >\n      <DateInputBase\n        disableFocusRing={startFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...startFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            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              isDisabled={isDisabled}\n            />\n            <Dialog {...startProps.dialogProps} width=\"max-content\">\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                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => onChange(value, 'start')}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['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        validationState={validationState}\n        size={size}\n        {...endFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={endState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={endState.setOpen}\n          >\n            <DatePickerButton\n              aria-label=\"Show calendar for the end date\"\n              size={size}\n              {...mergeProps(endFocusProps.focusProps, endProps.buttonProps)}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...endProps.dialogProps} width=\"max-content\">\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                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => {\n                  onChange(value, 'end');\n                }}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['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, domRef, {\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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"}

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFormProps } from "../../form/Form/Form.js";
@@ -8,7 +9,7 @@ import { _DateInputBase } from "./DateInputBase.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { DEFAULT_TIME_PROPS } from "./props.js";
 import { useFocusManagerRef } from "./utils.js";
-import { CONTAINER_STYLES, extractStyles } from "@tenphi/tasty";
+import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useTimeField } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  value?: TimeValue;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  props: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    inputStyles,\n    wrapperStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validationState,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  // let { locale } = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale: 'en-US',\n  });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={wrapperStyles}\n      validationState={validationState}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, domRef, {\n    ...props,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;;;AA2DA,SAAS,UACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,aACA,eACA,WACA,YACA,YACA,YACA,iBACA,OAAO,UACP,YAAY,mBACV;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ;EACT,CAAC;CAEF,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA4BrE,QAAO,cAzBL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACE;EACb,QAAQ;EACS;YAEhB,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,YAAY,eAAe;EACnD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAExC,WAAW,cAAc"}
+{"version":3,"file":"TimeInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  value?: TimeValue;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  props: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    inputStyles,\n    wrapperStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validationState,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  // let { locale } = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale: 'en-US',\n  });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={wrapperStyles}\n      validationState={validationState}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, domRef, {\n    ...props,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2DA,SAAS,UACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,aACA,eACA,WACA,YACA,YACA,YACA,iBACA,OAAO,UACP,YAAY,mBACV;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ;EACT,CAAC;CAEF,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA4BrE,QAAO,cAzBL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACE;EACb,QAAQ;EACS;YAEhB,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,YAAY,eAAe;EACnD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAExC,WAAW,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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

@@ -1,11 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useProviderProps } from "../../../provider.js";
 import { Action } from "../../actions/Action/Action.js";
 import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
-import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createFocusableRef } from "@react-spectrum/utils";

package/dist/components/fields/FileInput/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  PositionStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Action } from '../../actions';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#white',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#dark.04',\n    },\n    border: {\n      '': true,\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractContents(element, callback) {\n  const files = element?.files;\n\n  if (files && files.length > 0) {\n    const fileReader = new FileReader();\n\n    fileReader.onload = function () {\n      callback(fileReader.result);\n    };\n\n    fileReader.readAsText(files[0]);\n  }\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(props: CubeFileInputProps, ref) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(\n    { ...props },\n    {\n      defaultValidationTrigger: 'onChange',\n      valuePropsMapper: ({ value, onChange }) => ({\n        onChange,\n        value: props.type === 'file' || !props.type ? value : undefined,\n      }),\n    },\n  );\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const defaultValue = useMemo(\n    () => (type === 'file' ? value : undefined),\n    [type, value],\n  );\n  const defaultFileName = useMemo(\n    () => extractFileNameFromValue(defaultValue),\n    [],\n  );\n  const [fileName, setFileName] = useState<string | undefined>(defaultFileName);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  const onLocalChange = useCallback(\n    (event: any) => {\n      const value = event.target.value;\n\n      setFileName(extractFileNameFromValue(value));\n\n      if (type === 'file') {\n        onChange?.(value);\n      } else {\n        extractContents(event.target, onChange);\n      }\n    },\n    [onChange],\n  );\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!value,\n        'drag-hover': dragHover,\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">Choose file</div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName || placeholder || 'No file selected'}\n      </div>\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}
+{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  PositionStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#white',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#dark.04',\n    },\n    border: {\n      '': true,\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractContents(element, callback) {\n  const files = element?.files;\n\n  if (files && files.length > 0) {\n    const fileReader = new FileReader();\n\n    fileReader.onload = function () {\n      callback(fileReader.result);\n    };\n\n    fileReader.readAsText(files[0]);\n  }\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(props: CubeFileInputProps, ref) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(\n    { ...props },\n    {\n      defaultValidationTrigger: 'onChange',\n      valuePropsMapper: ({ value, onChange }) => ({\n        onChange,\n        value: props.type === 'file' || !props.type ? value : undefined,\n      }),\n    },\n  );\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const defaultValue = useMemo(\n    () => (type === 'file' ? value : undefined),\n    [type, value],\n  );\n  const defaultFileName = useMemo(\n    () => extractFileNameFromValue(defaultValue),\n    [],\n  );\n  const [fileName, setFileName] = useState<string | undefined>(defaultFileName);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  const onLocalChange = useCallback(\n    (event: any) => {\n      const value = event.target.value;\n\n      setFileName(extractFileNameFromValue(value));\n\n      if (type === 'file') {\n        onChange?.(value);\n      } else {\n        extractContents(event.target, onChange);\n      }\n    },\n    [onChange],\n  );\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!value,\n        'drag-hover': dragHover,\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">Choose file</div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName || placeholder || 'No file selected'}\n      </div>\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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";
 import { modAttrs } from "../../../utils/react/index.js";
@@ -11,7 +12,7 @@ import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { ListBox } from "../ListBox/ListBox.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
+import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFilter, useKeyboard } from "react-aria";