@cube-dev/ui-kit 0.179.0 → 0.180.0

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

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

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

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

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

@@ -8,7 +8,7 @@ import { AriaTimeFieldProps, DateValue, TimeValue } from "react-aria";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/fields/DatePicker/TimeInput.d.ts
-interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, FieldBaseProps {
+interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Omit<AriaTimeFieldProps<T>, 'errorMessage' | 'form'>, BaseProps, ContainerStyleProps, FieldBaseProps {
   wrapperStyles?: Styles;
   inputStyles?: Styles;
   styles?: Styles;

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

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

package/dist/components/fields/DatePicker/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  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 { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, 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  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 = 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    isInvalid,\n    isValid,\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      isInvalid={isInvalid}\n      isValid={isValid}\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":";;;;;;;;;;;;;;;;AAyDA,SAAS,UACP,OACA,KACA;AACA,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,WACA,SACA,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;AA6BrE,QAAO,cA1BL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACE;EACb,QAAQ;EACG;EACF;YAER,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 { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, 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' | 'form'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\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 = 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    isInvalid,\n    isValid,\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      isInvalid={isInvalid}\n      isValid={isValid}\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":";;;;;;;;;;;;;;;;AAyDA,SAAS,UACP,OACA,KACA;AACA,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,WACA,SACA,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;AA6BrE,QAAO,cA1BL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACE;EACb,QAAQ;EACG;EACF;YAER,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/WeekPicker.js

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | 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.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.d.ts

@@ -9,6 +9,8 @@ import { AriaTextFieldProps } from "react-aria";
 
 //#region src/components/fields/FileInput/FileInput.d.ts
 interface CubeFileInputProps extends BaseProps, PositionStyleProps, ContainerStyleProps, BlockStyleProps, AriaTextFieldProps, FieldBaseProps {
+  /** The form instance; redeclared for the same reason as in `Checkbox`. */
+  form?: FieldBaseProps['form'];
   /**
    * The size of the input
    * @default default

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

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

package/dist/components/fields/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  PositionStyleProps,\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 { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\nimport type { Props } from '../../../props';\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      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\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    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\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  const { t } = useI18n();\n\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    isInvalid,\n    isValid,\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        ...getValidationMods({ isInvalid, isValid }),\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\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\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  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 { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\nimport type { Props } from '../../../props';\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      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\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    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\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  /** The form instance; redeclared for the same reason as in `Checkbox`. */\n  form?: FieldBaseProps['form'];\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  const { t } = useI18n();\n\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    isInvalid,\n    isValid,\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        ...getValidationMods({ isInvalid, isValid }),\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\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\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,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/FilterPicker/FilterPicker.js

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

package/dist/components/fields/Input/Input.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { TextInput } from "../TextInput/TextInput.js";
 import { _FileInput } from "../FileInput/FileInput.js";
 import { _NumberInput } from "../NumberInput/NumberInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/ListBox/ListBox.js

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

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Portal } from "../../portal/Portal.js";

package/dist/components/fields/ListBoxPopover/index.d.ts

@@ -1,3 +1,4 @@
 
 import "./ListBoxPopover.js";
+import "./useCompositeFocus.js";
 import { ListStateLike, TextFilterFn } from "./listNavigation.js";

package/dist/components/fields/ListBoxPopover/listNavigation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -0,0 +1,2 @@
+
+import React, { RefObject } from "react";

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { useCallback, useEffect, useRef } from "react";
 
 //#region src/components/fields/ListBoxPopover/useCompositeFocus.ts

package/dist/components/fields/NumberInput/NumberInput.d.ts

@@ -6,7 +6,7 @@ import * as react from "react";
 import { AriaNumberFieldProps as AriaNumberFieldProps$1 } from "react-aria";
 
 //#region src/components/fields/NumberInput/NumberInput.d.ts
-interface CubeNumberInputProps extends Omit<CubeTextInputBaseProps, 'defaultValue' | 'value' | 'onChange'>, Omit<AriaNumberFieldProps$1, 'validate'> {
+interface CubeNumberInputProps extends Omit<CubeTextInputBaseProps, 'defaultValue' | 'value' | 'onChange'>, Omit<AriaNumberFieldProps$1, 'validate' | 'form'> {
   /** Whether or to hide stepper */
   hideStepper?: boolean;
 }

package/dist/components/fields/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableNumberValue } from "../../../utils/react/nullableValue.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
@@ -7,7 +7,7 @@ import { StepButton } from "./StepButton.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useLocale, useNumberField } from "react-aria";
+import { mergeProps, useLocale, useNumberField } from "react-aria";
 import { useNumberFieldState } from "react-stately";
 
 //#region src/components/fields/NumberInput/NumberInput.tsx
@@ -49,7 +49,7 @@ function NumberInput(props, ref) {
 		...otherProps,
 		ref,
 		labelProps: mergedLabelProps,
-		inputProps: mergeProps$1(inputProps, { "data-input-type": "numberinput" }, userInputProps),
+		inputProps: mergeProps$1(mergeProps(inputProps, { id: props.id }), { "data-input-type": "numberinput" }, userInputProps),
 		inputRef,
 		wrapperProps: groupProps,
 		suffixPosition: "after",

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/NumberInput/NumberInput.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport { AriaNumberFieldProps, useLocale, useNumberField } from 'react-aria';\nimport { useNumberFieldState } from 'react-stately';\n\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableNumberValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\n\nimport { StepButton } from './StepButton';\n\nexport interface CubeNumberInputProps\n  extends Omit<CubeTextInputBaseProps, 'defaultValue' | 'value' | 'onChange'>,\n    Omit<AriaNumberFieldProps, 'validate'> {\n  /** Whether or to hide stepper */\n  hideStepper?: boolean;\n}\n\nconst StyledTextInputBase = tasty(TextInputBase, {\n  inputStyles: {\n    textAlign: 'right',\n  },\n});\n\nconst StepperContainer = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf 1sf',\n    flow: 'column',\n    placeSelf: 'stretch',\n    margin: '(.5x - 1bw) left',\n  },\n});\n\nfunction NumberInput(\n  props: WithNullableValue<CubeNumberInputProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableNumberValue(props);\n  props = useFieldProps(props);\n\n  let {\n    hideStepper,\n    suffix,\n    value,\n    defaultValue,\n    onChange,\n    inputRef,\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    ...otherProps\n  } = props;\n  let showStepper = !hideStepper;\n  let { locale } = useLocale();\n  let state = useNumberFieldState({ ...props, locale });\n  let localInputRef = useRef<HTMLInputElement>(null);\n\n  inputRef = inputRef ?? localInputRef;\n\n  let {\n    groupProps,\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  } = useNumberField(props, state, inputRef as RefObject<HTMLInputElement>);\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  const steppers = showStepper ? (\n    <StepperContainer>\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"up\"\n        {...incrementButtonProps}\n        size={otherProps.size}\n      />\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"down\"\n        {...decrementButtonProps}\n        size={otherProps.size}\n      />\n    </StepperContainer>\n  ) : undefined;\n\n  return (\n    <StyledTextInputBase\n      {...otherProps}\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        inputProps,\n        { 'data-input-type': 'numberinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      wrapperProps={groupProps}\n      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'before' ? (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          ) : (\n            <>\n              {steppers}\n              {suffix}\n            </>\n          )\n        ) : (\n          suffix\n        )\n      }\n    />\n  );\n}\n\n/**\n * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.\n */\nconst _NumberInput = forwardRef(NumberInput);\n\n(_NumberInput as any).cubeInputType = 'Number';\n\n_NumberInput.displayName = 'NumberInput';\n\nexport { _NumberInput as NumberInput };\nexport type { AriaNumberFieldProps };\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,sBAAsB,MAAM,eAAe,EAC/C,aAAa,EACX,WAAW,SACZ,EACF,CAAC;AAEF,MAAM,mBAAmB,MAAM,EAC7B,QAAQ;CACN,SAAS;CACT,aAAa;CACb,UAAU;CACV,MAAM;CACN,WAAW;CACX,QAAQ;CACT,EACF,CAAC;AAEF,SAAS,YACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,MAAM;CAE5B,IAAI,EACF,aACA,QACA,OACA,cACA,UACA,UACA,YAAY,gBACZ,YAAY,gBACZ,GAAG,eACD;CACJ,IAAI,cAAc,CAAC;CACnB,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,oBAAoB;EAAE,GAAG;EAAO;EAAQ,CAAC;CACrD,IAAI,gBAAgB,OAAyB,KAAK;AAElD,YAAW,YAAY;CAEvB,IAAI,EACF,YACA,YACA,YACA,sBACA,yBACE,eAAe,OAAO,OAAO,SAAwC;CAGzE,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,WAAW,cACf,qBAAC,+BACC,oBAAC;EACC,YAAY,MAAM;EAClB,WAAU;EACV,GAAI;EACJ,MAAM,WAAW;GACjB,EACF,oBAAC;EACC,YAAY,MAAM;EAClB,WAAU;EACV,GAAI;EACJ,MAAM,WAAW;GACjB,IACe,GACjB;AAEJ,QACE,oBAAC;EACC,GAAI;EACC;EACL,YAAY;EACZ,YAAYA,aACV,YACA,EAAE,mBAAmB,eAAe,EACpC,eACD;EACS;EACV,cAAc;EACd,gBAAe;EACf,QACE,cACE,MAAM,mBAAmB,WACvB,8CACG,QACA,YACA,GAEH,8CACG,UACA,UACA,GAGL;GAGJ;;;;;AAON,MAAM,eAAe,WAAW,YAAY;AAE5C,AAAC,aAAqB,gBAAgB;AAEtC,aAAa,cAAc"}
+{"version":3,"file":"NumberInput.js","names":["mergeProps","mergeAriaProps"],"sources":["../../../../src/components/fields/NumberInput/NumberInput.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaNumberFieldProps,\n  mergeProps as mergeAriaProps,\n  useLocale,\n  useNumberField,\n} from 'react-aria';\nimport { useNumberFieldState } from 'react-stately';\n\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableNumberValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\n\nimport { StepButton } from './StepButton';\n\nexport interface CubeNumberInputProps\n  extends Omit<CubeTextInputBaseProps, 'defaultValue' | 'value' | 'onChange'>,\n    Omit<AriaNumberFieldProps, 'validate' | 'form'> {\n  /** Whether or to hide stepper */\n  hideStepper?: boolean;\n}\n\nconst StyledTextInputBase = tasty(TextInputBase, {\n  inputStyles: {\n    textAlign: 'right',\n  },\n});\n\nconst StepperContainer = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf 1sf',\n    flow: 'column',\n    placeSelf: 'stretch',\n    margin: '(.5x - 1bw) left',\n  },\n});\n\nfunction NumberInput(\n  props: WithNullableValue<CubeNumberInputProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableNumberValue(props);\n  props = useFieldProps(props);\n\n  let {\n    hideStepper,\n    suffix,\n    value,\n    defaultValue,\n    onChange,\n    inputRef,\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    ...otherProps\n  } = props;\n  let showStepper = !hideStepper;\n  let { locale } = useLocale();\n  let state = useNumberFieldState({ ...props, locale });\n  let localInputRef = useRef<HTMLInputElement>(null);\n\n  inputRef = inputRef ?? localInputRef;\n\n  let {\n    groupProps,\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  } = useNumberField(props, state, inputRef as RefObject<HTMLInputElement>);\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  const steppers = showStepper ? (\n    <StepperContainer>\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"up\"\n        {...incrementButtonProps}\n        size={otherProps.size}\n      />\n      <StepButton\n        isDisabled={props.isDisabled}\n        direction=\"down\"\n        {...decrementButtonProps}\n        size={otherProps.size}\n      />\n    </StepperContainer>\n  ) : undefined;\n\n  return (\n    <StyledTextInputBase\n      {...otherProps}\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        // `useNumberField` seeds its input id once. Merging the current id\n        // through react-aria's own `mergeProps` updates that seed, so the\n        // input, its label and the steppers' `aria-controls` follow the id\n        // when the form binding changes after mount.\n        mergeAriaProps(inputProps, { id: props.id }),\n        { 'data-input-type': 'numberinput' },\n        userInputProps,\n      )}\n      inputRef={inputRef}\n      wrapperProps={groupProps}\n      suffixPosition=\"after\"\n      suffix={\n        showStepper ? (\n          props.suffixPosition === 'before' ? (\n            <>\n              {suffix}\n              {steppers}\n            </>\n          ) : (\n            <>\n              {steppers}\n              {suffix}\n            </>\n          )\n        ) : (\n          suffix\n        )\n      }\n    />\n  );\n}\n\n/**\n * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.\n */\nconst _NumberInput = forwardRef(NumberInput);\n\n(_NumberInput as any).cubeInputType = 'Number';\n\n_NumberInput.displayName = 'NumberInput';\n\nexport { _NumberInput as NumberInput };\nexport type { AriaNumberFieldProps };\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,sBAAsB,MAAM,eAAe,EAC/C,aAAa,EACX,WAAW,SACZ,EACF,CAAC;AAEF,MAAM,mBAAmB,MAAM,EAC7B,QAAQ;CACN,SAAS;CACT,aAAa;CACb,UAAU;CACV,MAAM;CACN,WAAW;CACX,QAAQ;CACT,EACF,CAAC;AAEF,SAAS,YACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,MAAM;CAE5B,IAAI,EACF,aACA,QACA,OACA,cACA,UACA,UACA,YAAY,gBACZ,YAAY,gBACZ,GAAG,eACD;CACJ,IAAI,cAAc,CAAC;CACnB,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,oBAAoB;EAAE,GAAG;EAAO;EAAQ,CAAC;CACrD,IAAI,gBAAgB,OAAyB,KAAK;AAElD,YAAW,YAAY;CAEvB,IAAI,EACF,YACA,YACA,YACA,sBACA,yBACE,eAAe,OAAO,OAAO,SAAwC;CAGzE,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,WAAW,cACf,qBAAC,+BACC,oBAAC;EACC,YAAY,MAAM;EAClB,WAAU;EACV,GAAI;EACJ,MAAM,WAAW;GACjB,EACF,oBAAC;EACC,YAAY,MAAM;EAClB,WAAU;EACV,GAAI;EACJ,MAAM,WAAW;GACjB,IACe,GACjB;AAEJ,QACE,oBAAC;EACC,GAAI;EACC;EACL,YAAY;EACZ,YAAYA,aAKVC,WAAe,YAAY,EAAE,IAAI,MAAM,IAAI,CAAC,EAC5C,EAAE,mBAAmB,eAAe,EACpC,eACD;EACS;EACV,cAAc;EACd,gBAAe;EACf,QACE,cACE,MAAM,mBAAmB,WACvB,8CACG,QACA,YACA,GAEH,8CACG,UACA,UACA,GAGL;GAGJ;;;;;AAON,MAAM,eAAe,WAAW,YAAY;AAE5C,AAAC,aAAqB,gBAAgB;AAEtC,aAAa,cAAc"}

package/dist/components/fields/NumberInput/StepButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";

package/dist/components/fields/PasswordInput/PasswordInput.js

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

package/dist/components/fields/Picker/Picker.js

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

package/dist/components/fields/RadioGroup/Radio.js

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

package/dist/components/fields/RadioGroup/RadioGroup.d.ts

@@ -8,7 +8,7 @@ import * as react from "react";
 import { AriaRadioGroupProps } from "react-aria";
 
 //#region src/components/fields/RadioGroup/RadioGroup.d.ts
-interface CubeRadioGroupProps extends BaseProps, Omit<AriaRadioGroupProps, 'errorMessage'>, ContainerStyleProps, FieldBaseProps {
+interface CubeRadioGroupProps extends BaseProps, Omit<AriaRadioGroupProps, 'errorMessage' | 'form'>, ContainerStyleProps, FieldBaseProps {
   groupStyles?: Styles;
   orientation?: 'horizontal' | 'vertical';
   value?: string;

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,8 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
-import { FormContext } from "../../form/Form/Form.js";
+import { FormScopeMask } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { RadioContext } from "./context.js";
@@ -78,7 +78,7 @@ function RadioGroup(props, ref) {
 			focused: isFocusWithinVisible
 		},
 		...groupFocusProps,
-		children: /* @__PURE__ */ jsx(FormContext.Provider, {
+		children: /* @__PURE__ */ jsx(FormScopeMask, {
 			value: {
 				isRequired,
 				isInvalid,

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormContext, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n  extends BaseProps,\n    Omit<AriaRadioGroupProps, 'errorMessage'>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  groupStyles?: Styles;\n  orientation?: 'horizontal' | 'vertical';\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /* Size for all radio buttons in the group */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance */\n  buttonType?: CubeItemProps['type'];\n  /* Visual type for all radios in the group: radio (default), button, or tabs */\n  type?: 'radio' | 'button' | 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n  qa: 'RadioGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n      'horizontal & tabs': 'row',\n    },\n    padding: {\n      '': '0',\n      tabs: '.5x',\n    },\n    // The tabs layout is the only one with padding, and a caller that gives the\n    // group an explicit width (`width: 100%` inside a popover, say) means the\n    // box it can see. Without this the padding is added on top and the group\n    // overhangs its container by `1x`.\n    boxSizing: 'border-box',\n    radius: true,\n    fill: {\n      '': '#clear',\n      'tabs | disabled': '#surface-4',\n    },\n    width: 'max-content max-content initial',\n    flexShrink: 0,\n    gap: {\n      '': '1x',\n      button: 0,\n      tabs: '.5x',\n    },\n    whiteSpace: 'nowrap',\n    // Keyboard focus ring on the group, shown only for button/tabs layouts\n    // where individual items are visually merged (button-group) or share a\n    // single chrome (tabs) — the classic vertical radio list already shows\n    // a per-item focus ring on the radio circle.\n    outline: {\n      '': '1bw #primary-text.0 / 1bw',\n      'focused & (button | tabs)': '1bw #primary-text / 1bw',\n    },\n  },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = props.orientation;\n\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    id,\n    isDisabled,\n    isRequired,\n    labelPosition = 'top',\n    isInvalid,\n    isValid,\n    children,\n    styles,\n    groupStyles,\n    insideForm,\n    // orientation, // ignore orientation since it came from the form context\n    labelProps: baseLabelProps,\n    size,\n    buttonType,\n    type,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n  let state = useRadioGroupState(props);\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n    { ...props, orientation },\n    state,\n  );\n\n  // Keyboard-only focus ring on the group container (button/tabs layouts).\n  // `within: true` tracks focus on any descendant radio. We read\n  // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n  // clicks on a radio focus the input but leave `isFocusVisible` false.\n  let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n    useFocusRing({ within: true });\n\n  let radioGroup = (\n    <RadioGroupElement\n      id={id}\n      qa={qa || 'RadioGroup'}\n      styles={styles}\n      data-input-type=\"radiogroup\"\n      data-radio-button-group={type === 'button' ? '' : undefined}\n      mods={{\n        horizontal: orientation === 'horizontal',\n        'inside-form': insideForm,\n        'side-label': labelPosition === 'side',\n        button: type === 'button',\n        tabs: type === 'tabs',\n        focused: isFocusWithinVisible,\n      }}\n      {...groupFocusProps}\n    >\n      <FormContext.Provider\n        value={{\n          isRequired,\n          isInvalid,\n          isValid,\n          isDisabled,\n        }}\n      >\n        <RadioContext.Provider\n          value={{\n            state,\n            name: props.name,\n            size,\n            buttonType,\n            type,\n            isDisabled,\n          }}\n        >\n          {children}\n        </RadioContext.Provider>\n      </FormContext.Provider>\n    </RadioGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    fieldProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACZ,qBAAqB;GACtB;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EAKD,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACpB;EACD,OAAO;EACP,YAAY;EACZ,KAAK;GACH,IAAI;GACJ,QAAQ;GACR,MAAM;GACP;EACD,YAAY;EAKZ,SAAS;GACP,IAAI;GACJ,6BAA6B;GAC9B;EACF;CACF,CAAC;AAEF,SAAS,WAAW,OAA+C,KAAK;CACtE,IAAI,cAAc,MAAM;AAExB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,SACA,UACA,QACA,aACA,YAEA,YAAY,gBACZ,MACA,YACA,MACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAE9B,UAAS,cAAc,YAAY,kBAAkB,OAAO;CAE5D,IAAI,QAAQ,mBAAmB,MAAM;AAGrC,KAAI,eAAe,KACjB,eACE,SAAS,YAAY,SAAS,SAAS,eAAe;CAG1D,IAAI,EAAE,iBAAiB,YAAY,eAAe,cAChD;EAAE,GAAG;EAAO;EAAa,EACzB,MACD;CAMD,IAAI,EAAE,gBAAgB,sBAAsB,YAAY,oBACtD,aAAa,EAAE,QAAQ,MAAM,CAAC;AA2ChC,QAAO,cAxCL,oBAAC;EACK;EACJ,IAAI,MAAM;EACF;EACR,mBAAgB;EAChB,2BAAyB,SAAS,WAAW,KAAK;EAClD,MAAM;GACJ,YAAY,gBAAgB;GAC5B,eAAe;GACf,cAAc,kBAAkB;GAChC,QAAQ,SAAS;GACjB,MAAM,SAAS;GACf,SAAS;GACV;EACD,GAAI;YAEJ,oBAAC,YAAY;GACX,OAAO;IACL;IACA;IACA;IACA;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACH;GACL,EAGW,QAAQ;EACvC,GAAG;EACH;EACA,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,cAAc,WAAW,WAAW;AAE1C,AAAC,YAAoB,gBAAgB;AACrC,YAAY,cAAc"}
+{"version":3,"file":"RadioGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n  extends BaseProps,\n    Omit<AriaRadioGroupProps, 'errorMessage' | 'form'>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  groupStyles?: Styles;\n  orientation?: 'horizontal' | 'vertical';\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /* Size for all radio buttons in the group */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance */\n  buttonType?: CubeItemProps['type'];\n  /* Visual type for all radios in the group: radio (default), button, or tabs */\n  type?: 'radio' | 'button' | 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n  qa: 'RadioGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n      'horizontal & tabs': 'row',\n    },\n    padding: {\n      '': '0',\n      tabs: '.5x',\n    },\n    // The tabs layout is the only one with padding, and a caller that gives the\n    // group an explicit width (`width: 100%` inside a popover, say) means the\n    // box it can see. Without this the padding is added on top and the group\n    // overhangs its container by `1x`.\n    boxSizing: 'border-box',\n    radius: true,\n    fill: {\n      '': '#clear',\n      'tabs | disabled': '#surface-4',\n    },\n    width: 'max-content max-content initial',\n    flexShrink: 0,\n    gap: {\n      '': '1x',\n      button: 0,\n      tabs: '.5x',\n    },\n    whiteSpace: 'nowrap',\n    // Keyboard focus ring on the group, shown only for button/tabs layouts\n    // where individual items are visually merged (button-group) or share a\n    // single chrome (tabs) — the classic vertical radio list already shows\n    // a per-item focus ring on the radio circle.\n    outline: {\n      '': '1bw #primary-text.0 / 1bw',\n      'focused & (button | tabs)': '1bw #primary-text / 1bw',\n    },\n  },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = props.orientation;\n\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    id,\n    isDisabled,\n    isRequired,\n    labelPosition = 'top',\n    isInvalid,\n    isValid,\n    children,\n    styles,\n    groupStyles,\n    insideForm,\n    // orientation, // ignore orientation since it came from the form context\n    labelProps: baseLabelProps,\n    size,\n    buttonType,\n    type,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n  let state = useRadioGroupState(props);\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n    { ...props, orientation },\n    state,\n  );\n\n  // Keyboard-only focus ring on the group container (button/tabs layouts).\n  // `within: true` tracks focus on any descendant radio. We read\n  // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n  // clicks on a radio focus the input but leave `isFocusVisible` false.\n  let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n    useFocusRing({ within: true });\n\n  let radioGroup = (\n    <RadioGroupElement\n      id={id}\n      qa={qa || 'RadioGroup'}\n      styles={styles}\n      data-input-type=\"radiogroup\"\n      data-radio-button-group={type === 'button' ? '' : undefined}\n      mods={{\n        horizontal: orientation === 'horizontal',\n        'inside-form': insideForm,\n        'side-label': labelPosition === 'side',\n        button: type === 'button',\n        tabs: type === 'tabs',\n        focused: isFocusWithinVisible,\n      }}\n      {...groupFocusProps}\n    >\n      <FormScopeMask\n        value={{\n          isRequired,\n          isInvalid,\n          isValid,\n          isDisabled,\n        }}\n      >\n        <RadioContext.Provider\n          value={{\n            state,\n            name: props.name,\n            size,\n            buttonType,\n            type,\n            isDisabled,\n          }}\n        >\n          {children}\n        </RadioContext.Provider>\n      </FormScopeMask>\n    </RadioGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    fieldProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACZ,qBAAqB;GACtB;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EAKD,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACpB;EACD,OAAO;EACP,YAAY;EACZ,KAAK;GACH,IAAI;GACJ,QAAQ;GACR,MAAM;GACP;EACD,YAAY;EAKZ,SAAS;GACP,IAAI;GACJ,6BAA6B;GAC9B;EACF;CACF,CAAC;AAEF,SAAS,WAAW,OAA+C,KAAK;CACtE,IAAI,cAAc,MAAM;AAExB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,SACA,UACA,QACA,aACA,YAEA,YAAY,gBACZ,MACA,YACA,MACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAE9B,UAAS,cAAc,YAAY,kBAAkB,OAAO;CAE5D,IAAI,QAAQ,mBAAmB,MAAM;AAGrC,KAAI,eAAe,KACjB,eACE,SAAS,YAAY,SAAS,SAAS,eAAe;CAG1D,IAAI,EAAE,iBAAiB,YAAY,eAAe,cAChD;EAAE,GAAG;EAAO;EAAa,EACzB,MACD;CAMD,IAAI,EAAE,gBAAgB,sBAAsB,YAAY,oBACtD,aAAa,EAAE,QAAQ,MAAM,CAAC;AA2ChC,QAAO,cAxCL,oBAAC;EACK;EACJ,IAAI,MAAM;EACF;EACR,mBAAgB;EAChB,2BAAyB,SAAS,WAAW,KAAK;EAClD,MAAM;GACJ,YAAY,gBAAgB;GAC5B,eAAe;GACf,cAAc,kBAAkB;GAChC,QAAQ,SAAS;GACjB,MAAM,SAAS;GACf,SAAS;GACV;EACD,GAAI;YAEJ,oBAAC;GACC,OAAO;IACL;IACA;IACA;IACA;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACV;GACE,EAGW,QAAQ;EACvC,GAAG;EACH;EACA,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,cAAc,WAAW,WAAW;AAE1C,AAAC,YAAoB,gBAAgB;AACrC,YAAY,cAAc"}

package/dist/components/fields/RadioGroup/context.js

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

package/dist/components/fields/SearchComboBox/SearchComboBox.js

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

package/dist/components/fields/SearchInput/SearchInput.js

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

package/dist/components/fields/Select/Select.js

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

package/dist/components/fields/Slider/Gradation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { SliderGradationElement, SliderGradeElement } from "./elements.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/Slider/HueSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { __Slider } from "./Slider.js";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Slider/RangeSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { Gradation } from "./Gradation.js";
 import { _SliderBase } from "./SliderBase.js";
 import { SliderThumb } from "./SliderThumb.js";

package/dist/components/fields/Slider/Slider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { Gradation } from "./Gradation.js";

package/dist/components/fields/Slider/SliderBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
@@ -97,8 +97,8 @@ function SliderBase(allProps, ref) {
 	styles = extractStyles(otherProps, OUTER_STYLES, styles);
 	return wrapWithField(/* @__PURE__ */ jsx(SliderElement, {
 		ref: domRef,
-		id: props.id,
 		...groupProps,
+		id: props.id ?? groupProps.id,
 		mods,
 		styles,
 		"data-input-type": "slider",

package/dist/components/fields/Slider/SliderBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderBase.js","names":["Text","mergeProps"],"sources":["../../../../src/components/fields/Slider/SliderBase.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { DOMRef, FocusableRef } from '@react-types/shared';\nimport { OUTER_STYLES, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useNumberFormatter, useSlider } from 'react-aria';\nimport { useSliderState } from 'react-stately';\n\nimport { forwardRefWithGenerics, mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\n\nimport { SliderControlsElement, SliderElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface SliderBaseChildArguments {\n  inputRef: RefObject<HTMLInputElement | null>;\n  trackRef: RefObject<HTMLElement | null>;\n  state: SliderState;\n  /** Resolved validation state. It is only known here, after `useFieldProps` merged the form state in. */\n  isInvalid?: boolean;\n  isValid?: boolean;\n}\n\nexport interface SliderBaseProps<T = number[]> extends CubeSliderBaseProps<T> {\n  children: (opts: SliderBaseChildArguments) => ReactNode;\n}\n\nconst LabelValueElement = tasty(Text, {\n  styles: {\n    display: 'block',\n    textAlign: 'right',\n  },\n});\n\nfunction SliderBase(allProps: SliderBaseProps, ref: DOMRef<HTMLDivElement>) {\n  let props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    labelPosition,\n    label,\n    extra,\n    styles,\n    isRequired,\n    message,\n    description,\n    requiredMark,\n    labelSuffix,\n    labelStyles,\n    necessityIndicator,\n    gradation,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    minValue = 0,\n    maxValue = 100,\n    inputWidth,\n    formatOptions,\n    getValueLabel,\n    onChange,\n    onChangeEnd,\n    children,\n    showValueLabel = true,\n    orientation: formOrientation,\n    form,\n    labelProps: userLabelProps,\n    ...otherProps\n  } = props;\n\n  let orientation = allProps.orientation || 'horizontal';\n\n  // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n  let alwaysDisplaySign =\n    Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n  if (alwaysDisplaySign) {\n    if (formatOptions != null) {\n      if (!('signDisplay' in formatOptions)) {\n        formatOptions = {\n          ...formatOptions,\n          signDisplay: 'exceptZero',\n        };\n      }\n    } else {\n      formatOptions = { signDisplay: 'exceptZero' };\n    }\n  }\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  const state = useSliderState({\n    ...props,\n    orientation,\n    numberFormatter: formatter,\n    minValue,\n    maxValue,\n  });\n\n  const trackRef = useRef<HTMLElement>(null);\n\n  let { groupProps, trackProps, labelProps, outputProps } = useSlider(\n    props,\n    state,\n    trackRef,\n  );\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  let domRef = useFocusableRef(ref as any, inputRef);\n\n  let displayValue = '';\n  let maxLabelLength = 0;\n\n  if (typeof getValueLabel === 'function') {\n    displayValue = getValueLabel(state.values);\n    switch (state.values.length) {\n      case 1:\n        maxLabelLength = Math.max(\n          getValueLabel([minValue]).length,\n          getValueLabel([maxValue]).length,\n        );\n        break;\n      case 2:\n        // Try all possible combinations of min and max values.\n        maxLabelLength = Math.max(\n          getValueLabel([minValue, minValue]).length,\n          getValueLabel([minValue, maxValue]).length,\n          getValueLabel([maxValue, minValue]).length,\n          getValueLabel([maxValue, maxValue]).length,\n        );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  } else {\n    maxLabelLength = Math.max(\n      [...formatter.format(minValue)].length,\n      [...formatter.format(maxValue)].length,\n    );\n    switch (state.values.length) {\n      case 1:\n        displayValue = state.getThumbValueLabel(0);\n        break;\n      case 2:\n        // This should really use the NumberFormat#formatRange proposal...\n        // https://github.com/tc39/ecma402/issues/393\n        // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n        displayValue = `${state.getThumbValueLabel(\n          0,\n        )} – ${state.getThumbValueLabel(1)}`;\n        maxLabelLength =\n          3 +\n          2 *\n            Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length,\n              [...formatter.format(maxValue)].length,\n            );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  }\n\n  extra =\n    extra != null || !showValueLabel ? (\n      extra\n    ) : (\n      <LabelValueElement\n        {...outputProps}\n        style={\n          maxLabelLength\n            ? {\n                width: `${maxLabelLength + 1}ch`,\n                minWidth: `${maxLabelLength + 1}ch`,\n              }\n            : undefined\n        }\n      >\n        {displayValue}\n      </LabelValueElement>\n    );\n\n  const mods = useMemo(\n    () => ({\n      'side-label': labelPosition === 'side',\n      horizontal: orientation === 'horizontal',\n      ...getValidationMods({ isInvalid, isValid }),\n    }),\n    [labelPosition, orientation, isInvalid, isValid],\n  );\n\n  styles = extractStyles(otherProps, OUTER_STYLES, styles);\n\n  const sliderField = (\n    <SliderElement\n      ref={domRef}\n      id={props.id}\n      {...groupProps}\n      mods={mods}\n      styles={styles}\n      data-input-type=\"slider\"\n    >\n      <SliderControlsElement {...trackProps} ref={trackRef} mods={mods}>\n        {children({\n          trackRef,\n          inputRef,\n          state,\n          isInvalid,\n          isValid,\n        })}\n      </SliderControlsElement>\n    </SliderElement>\n  );\n\n  return wrapWithField(sliderField, ref, {\n    ...props,\n    extra,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\nconst _SliderBase = forwardRefWithGenerics(SliderBase);\n\n(_SliderBase as any).displayName = 'SliderBase';\n\nexport { _SliderBase as SliderBase };\nexport { useSlider };\n"],"mappings":"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"}
+{"version":3,"file":"SliderBase.js","names":["Text","mergeProps"],"sources":["../../../../src/components/fields/Slider/SliderBase.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { DOMRef, FocusableRef } from '@react-types/shared';\nimport { OUTER_STYLES, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useNumberFormatter, useSlider } from 'react-aria';\nimport { useSliderState } from 'react-stately';\n\nimport { forwardRefWithGenerics, mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\n\nimport { SliderControlsElement, SliderElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface SliderBaseChildArguments {\n  inputRef: RefObject<HTMLInputElement | null>;\n  trackRef: RefObject<HTMLElement | null>;\n  state: SliderState;\n  /** Resolved validation state. It is only known here, after `useFieldProps` merged the form state in. */\n  isInvalid?: boolean;\n  isValid?: boolean;\n}\n\nexport interface SliderBaseProps<T = number[]> extends CubeSliderBaseProps<T> {\n  children: (opts: SliderBaseChildArguments) => ReactNode;\n}\n\nconst LabelValueElement = tasty(Text, {\n  styles: {\n    display: 'block',\n    textAlign: 'right',\n  },\n});\n\nfunction SliderBase(allProps: SliderBaseProps, ref: DOMRef<HTMLDivElement>) {\n  let props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    labelPosition,\n    label,\n    extra,\n    styles,\n    isRequired,\n    message,\n    description,\n    requiredMark,\n    labelSuffix,\n    labelStyles,\n    necessityIndicator,\n    gradation,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    minValue = 0,\n    maxValue = 100,\n    inputWidth,\n    formatOptions,\n    getValueLabel,\n    onChange,\n    onChangeEnd,\n    children,\n    showValueLabel = true,\n    orientation: formOrientation,\n    form,\n    labelProps: userLabelProps,\n    ...otherProps\n  } = props;\n\n  let orientation = allProps.orientation || 'horizontal';\n\n  // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n  let alwaysDisplaySign =\n    Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n  if (alwaysDisplaySign) {\n    if (formatOptions != null) {\n      if (!('signDisplay' in formatOptions)) {\n        formatOptions = {\n          ...formatOptions,\n          signDisplay: 'exceptZero',\n        };\n      }\n    } else {\n      formatOptions = { signDisplay: 'exceptZero' };\n    }\n  }\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  const state = useSliderState({\n    ...props,\n    orientation,\n    numberFormatter: formatter,\n    minValue,\n    maxValue,\n  });\n\n  const trackRef = useRef<HTMLElement>(null);\n\n  let { groupProps, trackProps, labelProps, outputProps } = useSlider(\n    props,\n    state,\n    trackRef,\n  );\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  let domRef = useFocusableRef(ref as any, inputRef);\n\n  let displayValue = '';\n  let maxLabelLength = 0;\n\n  if (typeof getValueLabel === 'function') {\n    displayValue = getValueLabel(state.values);\n    switch (state.values.length) {\n      case 1:\n        maxLabelLength = Math.max(\n          getValueLabel([minValue]).length,\n          getValueLabel([maxValue]).length,\n        );\n        break;\n      case 2:\n        // Try all possible combinations of min and max values.\n        maxLabelLength = Math.max(\n          getValueLabel([minValue, minValue]).length,\n          getValueLabel([minValue, maxValue]).length,\n          getValueLabel([maxValue, minValue]).length,\n          getValueLabel([maxValue, maxValue]).length,\n        );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  } else {\n    maxLabelLength = Math.max(\n      [...formatter.format(minValue)].length,\n      [...formatter.format(maxValue)].length,\n    );\n    switch (state.values.length) {\n      case 1:\n        displayValue = state.getThumbValueLabel(0);\n        break;\n      case 2:\n        // This should really use the NumberFormat#formatRange proposal...\n        // https://github.com/tc39/ecma402/issues/393\n        // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n        displayValue = `${state.getThumbValueLabel(\n          0,\n        )} – ${state.getThumbValueLabel(1)}`;\n        maxLabelLength =\n          3 +\n          2 *\n            Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length,\n              [...formatter.format(maxValue)].length,\n            );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  }\n\n  extra =\n    extra != null || !showValueLabel ? (\n      extra\n    ) : (\n      <LabelValueElement\n        {...outputProps}\n        style={\n          maxLabelLength\n            ? {\n                width: `${maxLabelLength + 1}ch`,\n                minWidth: `${maxLabelLength + 1}ch`,\n              }\n            : undefined\n        }\n      >\n        {displayValue}\n      </LabelValueElement>\n    );\n\n  const mods = useMemo(\n    () => ({\n      'side-label': labelPosition === 'side',\n      horizontal: orientation === 'horizontal',\n      ...getValidationMods({ isInvalid, isValid }),\n    }),\n    [labelPosition, orientation, isInvalid, isValid],\n  );\n\n  styles = extractStyles(otherProps, OUTER_STYLES, styles);\n\n  const sliderField = (\n    <SliderElement\n      ref={domRef}\n      {...groupProps}\n      // `useSlider` seeds the group id once; the current id follows the form\n      // binding, and the label points at it.\n      id={props.id ?? groupProps.id}\n      mods={mods}\n      styles={styles}\n      data-input-type=\"slider\"\n    >\n      <SliderControlsElement {...trackProps} ref={trackRef} mods={mods}>\n        {children({\n          trackRef,\n          inputRef,\n          state,\n          isInvalid,\n          isValid,\n        })}\n      </SliderControlsElement>\n    </SliderElement>\n  );\n\n  return wrapWithField(sliderField, ref, {\n    ...props,\n    extra,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\nconst _SliderBase = forwardRefWithGenerics(SliderBase);\n\n(_SliderBase as any).displayName = 'SliderBase';\n\nexport { _SliderBase as SliderBase };\nexport { useSlider };\n"],"mappings":"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"}

package/dist/components/fields/Slider/SliderThumb.js

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