@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1,47 @@
+
+import { AriaTextFieldProps, CubeTextInputBaseProps, DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, TextInputBase } from "./TextInput/TextInputBase.js";
+import { CubeTextInputProps, TextInput, useTextField } from "./TextInput/TextInput.js";
+import "./TextInput/index.js";
+import { CubeSearchInputProps, SearchFieldProps, SearchInput, useSearchField, useSearchFieldState } from "./SearchInput/SearchInput.js";
+import { CubeListBoxProps, ListBox } from "./ListBox/ListBox.js";
+import "./ListBox/index.js";
+import { AriaSelectProps, CubeSelectBaseProps, CubeSelectProps, ListBoxElement, ListBoxPopup, __Select, useSelectState } from "./Select/Select.js";
+import { CubeFileInputProps, _FileInput } from "./FileInput/FileInput.js";
+import { AriaNumberFieldProps, CubeNumberInputProps, _NumberInput } from "./NumberInput/NumberInput.js";
+import { CubePasswordInputProps, _PasswordInput } from "./PasswordInput/PasswordInput.js";
+import { CubeTextAreaProps, _TextArea } from "./TextArea/TextArea.js";
+import { Input } from "./Input/Input.js";
+import "./Input/index.js";
+import "./TextArea/index.js";
+import { CubeCheckboxGroupProps, _CheckboxGroup } from "./Checkbox/CheckboxGroup.js";
+import { AriaCheckboxProps, CubeCheckboxProps, __Checkbox, useCheckbox } from "./Checkbox/Checkbox.js";
+import "./Checkbox/index.js";
+import { DateFieldBase, Granularity } from "./DatePicker/types.js";
+import { CubeTimeInputProps, _TimeInput } from "./DatePicker/TimeInput.js";
+import { CubeDateInputProps, _DateInput } from "./DatePicker/DateInput.js";
+import { CubeDatePickerProps, _DatePicker } from "./DatePicker/DatePicker.js";
+import { CubeDateRangePickerProps, _DateRangePicker } from "./DatePicker/DateRangePicker.js";
+import { parseAbsoluteDate } from "./DatePicker/parseDate.js";
+import { CubeDateRangeSeparatedPickerProps, _DateRangeSeparatedPicker } from "./DatePicker/DateRangeSeparatedPicker.js";
+import "./DatePicker/index.js";
+import { CubeRadioGroupProps, _RadioGroup } from "./RadioGroup/RadioGroup.js";
+import { AriaRadioProps, CubeRadioProps, __Radio, useRadio } from "./RadioGroup/Radio.js";
+import "./RadioGroup/index.js";
+import "./SearchInput/index.js";
+import { AriaSliderProps, CubeSliderBaseProps } from "./Slider/types.js";
+import { CubeRangeSliderProps, __RangeSlider } from "./Slider/RangeSlider.js";
+import { CubeSliderProps, __Slider } from "./Slider/Slider.js";
+import { CubeHueSliderProps, __HueSlider } from "./Slider/HueSlider.js";
+import { SliderState, useSliderState } from "./Slider/index.js";
+import { AriaSwitchProps, CubeSwitchProps, _Switch, useSwitch } from "./Switch/Switch.js";
+import "./Select/index.js";
+import { ComboBox, CubeComboBoxProps } from "./ComboBox/ComboBox.js";
+import "./ComboBox/index.js";
+import { CubeFilterListBoxProps, FilterListBox } from "./FilterListBox/FilterListBox.js";
+import "./FilterListBox/index.js";
+import { CubeFilterPickerProps, FilterPicker } from "./FilterPicker/FilterPicker.js";
+import "./FilterPicker/index.js";
+import { CubePickerProps, Picker } from "./Picker/Picker.js";
+import "./Picker/index.js";
+import { CubeTextInputMapperInputProps, CubeTextInputMapperProps, _TextInputMapper } from "./TextInputMapper/TextInputMapper.js";
+import "./TextInputMapper/index.js";

package/dist/components/form/FieldWrapper/FieldWrapper.d.ts

@@ -0,0 +1,13 @@
+
+import { CubeFieldWrapperProps } from "./types.js";
+import * as react from "react";
+
+//#region src/components/form/FieldWrapper/FieldWrapper.d.ts
+/**
+ * A wrapper for form fields to provide additional decoration for inputs.
+ * @internal Do not use this component directly.
+ */
+declare const FieldWrapper: react.ForwardRefExoticComponent<CubeFieldWrapperProps & react.RefAttributes<unknown>>;
+//#endregion
+export { FieldWrapper };
+//# sourceMappingURL=FieldWrapper.d.ts.map

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -0,0 +1,170 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { mergeProps } from "../../../utils/react/mergeProps.js";
+import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
+import { _Text } from "../../content/Text.js";
+import { Space } from "../../layout/Space.js";
+import { _Item } from "../../content/Item/Item.js";
+import { InfoCircleIcon } from "../../../icons/InfoCircleIcon.js";
+import { Flex } from "../../layout/Flex.js";
+import { _Label } from "../Label.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/form/FieldWrapper/FieldWrapper.tsx
+const FieldElement = tasty({
+	qa: "Field",
+	styles: {
+		display: "grid",
+		width: "auto",
+		gridColumns: {
+			"": "minmax(0, 1fr)",
+			"has-sider": "($full-label-width, auto) minmax(0, 1fr)",
+			"has-split": "auto auto"
+		},
+		gap: 0,
+		placeItems: {
+			"": "baseline stretch",
+			"has-split": "center"
+		},
+		placeContent: {
+			"": "initial",
+			"has-split": "space-between"
+		},
+		"$full-label-width": "($label-width + 1x)",
+		LabelArea: {
+			display: "block",
+			width: {
+				"": "initial",
+				"has-sider": "$label-width"
+			},
+			margin: {
+				"": "1x bottom",
+				"has-sider": "1x right",
+				"has-split": "1x right",
+				":empty": "0"
+			}
+		},
+		InputArea: {
+			display: "block",
+			flow: "column",
+			gap: ".5x",
+			gridColumn: {
+				"": "initial",
+				"has-sider": 2,
+				"has-split": 2
+			}
+		}
+	}
+});
+FieldElement.displayName = "FieldWrapperElement";
+const MessageElement = tasty({
+	qa: "Field_Message",
+	styles: {
+		preset: "t4",
+		color: {
+			"": "#dark-02",
+			invalid: "#danger-text",
+			valid: "#success-text",
+			disabled: "#dark.40"
+		},
+		textAlign: "left",
+		userSelect: "none"
+	}
+});
+const DescriptionElement = tasty({
+	qa: "Field_Description",
+	styles: {
+		preset: "t4",
+		color: "#dark-03",
+		textAlign: "left",
+		userSelect: "none"
+	}
+});
+/**
+* A wrapper for form fields to provide additional decoration for inputs.
+* @internal Do not use this component directly.
+*/
+const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
+	const { as, labelPosition = "top", label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children } = props;
+	const labelComponent = label ? /* @__PURE__ */ jsx(_Label, {
+		as: as === "label" ? "div" : "label",
+		styles: labelStyles,
+		labelPosition,
+		isRequired: requiredMark ? isRequired : false,
+		isDisabled,
+		necessityIndicator,
+		validationState,
+		"aria-label": typeof label === "string" ? label : void 0,
+		...labelProps,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			placeContent: "baseline space-between",
+			width: "100%",
+			children: [/* @__PURE__ */ jsxs(Space, {
+				placeItems: "center",
+				gap: "0.75x",
+				children: [
+					/* @__PURE__ */ jsx("div", { children: label }),
+					tooltip ? /* @__PURE__ */ jsx(_Item, {
+						icon: /* @__PURE__ */ jsx(InfoCircleIcon, { color: "#primary-text" }),
+						size: "inline",
+						tooltip: typeof tooltip === "string" ? tooltip : { title: tooltip }
+					}) : null,
+					labelSuffix ? /* @__PURE__ */ jsx("div", { children: labelSuffix }) : null
+				]
+			}), extra && /* @__PURE__ */ jsx(_Text, {
+				preset: "t3",
+				children: extra
+			})]
+		})
+	}) : null;
+	const createDescriptionComponent = () => {
+		if (!description) return null;
+		return /* @__PURE__ */ jsx(DescriptionElement, {
+			"data-element": "Description",
+			children: wrapNodeIfPlain(description, () => /* @__PURE__ */ jsx("span", { children: description }))
+		});
+	};
+	const descriptionForLabel = labelPosition === "side" || labelPosition === "split" ? createDescriptionComponent() : null;
+	const descriptionForInput = labelPosition === "top" ? createDescriptionComponent() : null;
+	const mods = {
+		"has-sider": labelPosition === "side",
+		"has-split": labelPosition === "split",
+		"has-description": !!description,
+		invalid: validationState === "invalid",
+		valid: validationState === "valid"
+	};
+	const displayMessage = errorMessage || message;
+	const isErrorMessage = !!errorMessage;
+	const mergedFieldProps = styles ? mergeProps(fieldProps, { styles }) : fieldProps;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(FieldElement, {
+		ref,
+		as: as ?? "div",
+		mods,
+		isHidden,
+		...mergedFieldProps,
+		children: [labelComponent || descriptionForLabel ? /* @__PURE__ */ jsxs("div", {
+			"data-element": "LabelArea",
+			children: [labelComponent, descriptionForLabel]
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			"data-element": "InputArea",
+			children: [
+				Component,
+				descriptionForInput,
+				displayMessage && !isDisabled && /* @__PURE__ */ jsx(MessageElement, {
+					mods: {
+						...mods,
+						invalid: isErrorMessage || validationState === "invalid"
+					},
+					styles: messageStyles,
+					role: isErrorMessage || validationState === "invalid" ? "alert" : void 0,
+					children: displayMessage
+				})
+			]
+		})]
+	}), children] });
+});
+
+//#endregion
+export { FieldWrapper };
+//# sourceMappingURL=FieldWrapper.js.map

package/dist/components/form/FieldWrapper/FieldWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldWrapper.js","names":["Label","Item","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { InfoCircleIcon } from '../../../icons/index';\nimport { tasty } from '../../../tasty/index';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { Item } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label } from '../Label';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (process.env.NODE_ENV === 'development') {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'Field_Message',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'Field_Description',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    validationState,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={requiredMark ? isRequired : false}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      validationState={validationState}\n      aria-label={typeof label === 'string' ? label : undefined}\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>{label}</div>\n\n          {tooltip ? (\n            <Item\n              icon={<InfoCircleIcon color=\"#primary-text\" />}\n              size=\"inline\"\n              tooltip={\n                typeof tooltip === 'string' ? tooltip : { title: tooltip }\n              }\n            />\n          ) : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    invalid: validationState === 'invalid',\n    valid: validationState === 'valid',\n  };\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of validationState\n                invalid: isErrorMessage || validationState === 'invalid',\n              }}\n              styles={messageStyles}\n              role={\n                isErrorMessage || validationState === 'invalid'\n                  ? 'alert'\n                  : undefined\n              }\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,aAAa;GACX,IAAI;GACJ,aAAa;GACb,aAAa;GACd;EACD,KAAK;EACL,YAAY;GACV,IAAI;GACJ,aAAa;GACd;EACD,cAAc;GACZ,IAAI;GACJ,aAAa;GACd;EACD,qBAAqB;EAErB,WAAW;GACT,SAAS;GACT,OAAO;IACL,IAAI;IACJ,aAAa;IACd;GACD,QAAQ;IACN,IAAI;IACJ,aAAa;IACb,aAAa;IACb,UAAU;IACX;GACF;EAED,WAAW;GACT,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;IACV,IAAI;IACJ,aAAa;IACb,aAAa;IACd;GACF;EACF;CACF,CAAC;AAGA,aAAa,cAAc;AAG7B,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,WAAW;EACX,YAAY;EACb;CACF,CAAC;;;;;AAMF,MAAa,eAAe,WAAW,SAAS,aAC9C,OACA,KACA;CACA,MAAM,EACJ,IACA,gBAAgB,OAChB,OACA,OACA,QACA,YACA,YACA,aACA,oBACA,YACA,YACA,SACA,eACA,aACA,cACA,WACA,iBACA,eAAe,MACf,SACA,UACA,aACA,aACE;CAEJ,MAAM,iBAAiB,QACrB,oBAACA;EACC,IAAI,OAAO,UAAU,QAAQ;EAC7B,QAAQ;EACO;EACf,YAAY,eAAe,aAAa;EAC5B;EACQ;EACH;EACjB,cAAY,OAAO,UAAU,WAAW,QAAQ;EAChD,GAAI;YAEJ,qBAAC;GAAK,cAAa;GAAyB,OAAM;cAChD,qBAAC;IAAM,YAAW;IAAS,KAAI;;KAC7B,oBAAC,mBAAK,QAAY;KAEjB,UACC,oBAACC;MACC,MAAM,oBAAC,kBAAe,OAAM,kBAAkB;MAC9C,MAAK;MACL,SACE,OAAO,YAAY,WAAW,UAAU,EAAE,OAAO,SAAS;OAE5D,GACA;KAEH,cAAc,oBAAC,mBAAK,cAAkB,GAAG;;KACpC,EAEP,SAAS,oBAACC;IAAK,QAAO;cAAM;KAAa;IACrC;GACD,GACN;CAGJ,MAAM,mCAAmC;AACvC,MAAI,CAAC,YAAa,QAAO;AAEzB,SACE,oBAAC;GAAmB,gBAAa;aAC9B,gBAAgB,mBACf,oBAAC,oBAAM,cAAmB,CAC1B;IACiB;;CAKzB,MAAM,sBACJ,kBAAkB,UAAU,kBAAkB,UAC1C,4BAA4B,GAC5B;CACN,MAAM,sBACJ,kBAAkB,QAAQ,4BAA4B,GAAG;CAE3D,MAAM,OAAO;EACX,aAAa,kBAAkB;EAC/B,aAAa,kBAAkB;EAC/B,mBAAmB,CAAC,CAAC;EACrB,SAAS,oBAAoB;EAC7B,OAAO,oBAAoB;EAC5B;CAGD,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,iBAAiB,CAAC,CAAC;CAGzB,MAAM,mBAAmB,SACrB,WAAW,YAAY,EAAE,QAAQ,CAAC,GAClC;AAEJ,QACE,8CACE,qBAAC;EACM;EACL,IAAI,MAAM;EACJ;EACI;EACV,GAAI;aAEH,kBAAkB,sBACjB,qBAAC;GAAI,gBAAa;cACf,gBACA;IACG,GACJ,MACJ,qBAAC;GAAI,gBAAa;;IACf;IACA;IACA,kBAAkB,CAAC,cAClB,oBAAC;KACC,MAAM;MACJ,GAAG;MAEH,SAAS,kBAAkB,oBAAoB;MAChD;KACD,QAAQ;KACR,MACE,kBAAkB,oBAAoB,YAClC,UACA;eAGL;MACc;;IAEf;GACO,EACd,YACA;EAEL"}

package/dist/components/form/FieldWrapper/extract-field-wrapper-props.d.ts

@@ -0,0 +1,12 @@
+
+import { CubeFieldWrapperProps } from "./types.js";
+
+//#region src/components/form/FieldWrapper/extract-field-wrapper-props.d.ts
+type WrapperProps<Props extends CubeFieldWrapperProps> = { [K in keyof Pick<Props, keyof CubeFieldWrapperProps>]: CubeFieldWrapperProps[K] };
+declare function extractFieldWrapperProps<Props extends CubeFieldWrapperProps, FieldWrapperKeys extends keyof CubeFieldWrapperProps = keyof CubeFieldWrapperProps, ActualWrapperProps extends WrapperProps<Props> = WrapperProps<Props>, RestProps extends Omit<Props, FieldWrapperKeys> = Omit<Props, FieldWrapperKeys>>(props: Props): Readonly<{
+  fieldWrapperProps: ActualWrapperProps;
+  rest: RestProps;
+}>;
+//#endregion
+export { extractFieldWrapperProps };
+//# sourceMappingURL=extract-field-wrapper-props.d.ts.map

package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js

@@ -0,0 +1,41 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/components/form/FieldWrapper/extract-field-wrapper-props.ts
+const createFieldWrapperPropsKeys = (arr) => new Set(arr);
+const fieldWrapperPropsKeys = createFieldWrapperPropsKeys([
+	"as",
+	"validationState",
+	"styles",
+	"isRequired",
+	"isDisabled",
+	"fieldProps",
+	"isHidden",
+	"label",
+	"labelPosition",
+	"labelSuffix",
+	"labelStyles",
+	"labelProps",
+	"description",
+	"requiredMark",
+	"tooltip",
+	"extra",
+	"necessityLabel",
+	"necessityIndicator",
+	"message",
+	"messageStyles",
+	"errorMessage",
+	"Component"
+]);
+function extractFieldWrapperProps(props) {
+	const fieldWrapperProps = {};
+	const rest = {};
+	for (const [key, prop] of Object.entries(props)) if (fieldWrapperPropsKeys.has(key)) fieldWrapperProps[key] = prop;
+	else rest[key] = prop;
+	return {
+		fieldWrapperProps,
+		rest
+	};
+}
+
+//#endregion
+export { extractFieldWrapperProps };
+//# sourceMappingURL=extract-field-wrapper-props.js.map

package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-field-wrapper-props.js","names":[],"sources":["../../../../src/components/form/FieldWrapper/extract-field-wrapper-props.ts"],"sourcesContent":["import { CubeFieldWrapperProps } from './types';\n\nconst createFieldWrapperPropsKeys = <\n  PropKeys = (keyof CubeFieldWrapperProps)[],\n>(\n  arr: PropKeys,\n): Set<string> => new Set(arr as unknown as string[]);\n\nconst fieldWrapperPropsKeys = createFieldWrapperPropsKeys([\n  'as',\n  'validationState',\n  'styles',\n  'isRequired',\n  'isDisabled',\n  'fieldProps',\n  'isHidden',\n  'label',\n  'labelPosition',\n  'labelSuffix',\n  'labelStyles',\n  'labelProps',\n  'description',\n  'requiredMark',\n  'tooltip',\n  'extra',\n  'necessityLabel',\n  'necessityIndicator',\n  'message',\n  'messageStyles',\n  'errorMessage',\n  'Component',\n]);\n\ntype WrapperProps<Props extends CubeFieldWrapperProps> = {\n  [K in keyof Pick<\n    Props,\n    keyof CubeFieldWrapperProps\n  >]: CubeFieldWrapperProps[K];\n};\n\nexport function extractFieldWrapperProps<\n  Props extends CubeFieldWrapperProps,\n  FieldWrapperKeys extends\n    keyof CubeFieldWrapperProps = keyof CubeFieldWrapperProps,\n  ActualWrapperProps extends WrapperProps<Props> = WrapperProps<Props>,\n  RestProps extends Omit<Props, FieldWrapperKeys> = Omit<\n    Props,\n    FieldWrapperKeys\n  >,\n>(\n  props: Props,\n): Readonly<{ fieldWrapperProps: ActualWrapperProps; rest: RestProps }> {\n  const fieldWrapperProps = {} as ActualWrapperProps;\n  const rest = {} as RestProps;\n\n  for (const [key, prop] of Object.entries(props)) {\n    if (fieldWrapperPropsKeys.has(key)) {\n      fieldWrapperProps[key] = prop;\n    } else {\n      rest[key] = prop;\n    }\n  }\n\n  return { fieldWrapperProps, rest } as const;\n}\n"],"mappings":";;AAEA,MAAM,+BAGJ,QACgB,IAAI,IAAI,IAA2B;AAErD,MAAM,wBAAwB,4BAA4B;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AASF,SAAgB,yBAUd,OACsE;CACtE,MAAM,oBAAoB,EAAE;CAC5B,MAAM,OAAO,EAAE;AAEf,MAAK,MAAM,CAAC,KAAK,SAAS,OAAO,QAAQ,MAAM,CAC7C,KAAI,sBAAsB,IAAI,IAAI,CAChC,mBAAkB,OAAO;KAEzB,MAAK,OAAO;AAIhB,QAAO;EAAE;EAAmB;EAAM"}

package/dist/components/form/FieldWrapper/index.d.ts

@@ -0,0 +1,4 @@
+
+import { CubeFieldWrapperProps } from "./types.js";
+import { FieldWrapper } from "./FieldWrapper.js";
+import { extractFieldWrapperProps } from "./extract-field-wrapper-props.js";

package/dist/components/form/FieldWrapper/types.d.ts

@@ -0,0 +1,42 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { Props } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { LabelPosition, NecessityIndicator, ValidationState } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { CubeLabelProps } from "../Label.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/form/FieldWrapper/types.d.ts
+type CubeFieldWrapperProps = {
+  as?: keyof HTMLElementTagNameMap;
+  validationState?: ValidationState;
+  styles?: Styles; /** Whether the input is required */
+  isRequired?: boolean; /** Whether the input is disabled */
+  isDisabled?: boolean;
+  fieldProps?: Props;
+  isHidden?: boolean;
+  label?: ReactNode;
+  labelPosition?: LabelPosition;
+  labelSuffix?: ReactNode;
+  labelStyles?: Styles;
+  labelProps?: CubeLabelProps; /** The description for the field. It will be placed below the label */
+  description?: ReactNode;
+  requiredMark?: boolean;
+  tooltip?: ReactNode;
+  extra?: ReactNode;
+  necessityLabel?: ReactNode;
+  necessityIndicator?: NecessityIndicator;
+  /**
+   * @deprecated Use `errorMessage` for error messages and `description` for field descriptions instead.
+   * Custom message for the field. It will be placed below the label and the input
+   */
+  message?: string | ReactNode; /** Styles for the message */
+  messageStyles?: Styles; /** Error message for the field. Always displayed in danger state regardless of validation state */
+  errorMessage?: string | ReactNode;
+  Component?: ReactElement; /** Custom components that should go outside the field and should not be visible by default. For example: Dialogs */
+  children?: ReactNode;
+};
+//#endregion
+export { CubeFieldWrapperProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/form/Form/Field.d.ts

@@ -0,0 +1,23 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { FieldTypes } from "./types.js";
+import { CubeFormInstance } from "./use-form.js";
+import { ReactElement } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/form/Form/Field.d.ts
+interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {
+  /** The initial value of the input. */
+  defaultValue?: any;
+  styles?: Styles;
+  children?: ReactElement | ((CubeFormInstance: any) => ReactElement);
+  /** The form instance */
+  form?: CubeFormInstance<T>;
+}
+declare function Field<T extends FieldTypes>(props: CubeFieldProps<T>): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Field };
+//# sourceMappingURL=Field.d.ts.map

package/dist/components/form/Form/Field.js

@@ -0,0 +1,139 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { mergeProps } from "../../../utils/react/mergeProps.js";
+import { warn } from "../../../utils/warnings.js";
+import { FieldWrapper } from "../FieldWrapper/FieldWrapper.js";
+import { useFormProps } from "./Form.js";
+import { useField } from "./use-field/use-field.js";
+import { Children, cloneElement, createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/Form/Field.tsx
+function getDefaultValidateTrigger(type) {
+	type = type || "";
+	return type === "Number" || type.includes("Text") ? "onBlur" : "onChange";
+}
+function getValueProps(type, value, onChange, allowsCustomValue) {
+	type = type || "";
+	if (type === "Number") return {
+		value: value != null ? value : null,
+		onChange
+	};
+	else if (type === "Text") return {
+		value: typeof value === "string" || typeof value === "number" ? String(value) : "",
+		onChange
+	};
+	else if (type === "Checkbox") return {
+		isSelected: value != null ? value : false,
+		isIndeterminate: false,
+		onChange
+	};
+	else if (type === "CheckboxGroup") return {
+		value: value != null ? value : [],
+		onChange
+	};
+	else if (type === "RangeSlider") return {
+		value: value != null ? value : void 0,
+		onChange
+	};
+	else if (type === "ComboBox") return {
+		selectedKey: !allowsCustomValue ? value ?? null : void 0,
+		inputValue: allowsCustomValue ? value ?? "" : void 0,
+		onInputChange(val) {
+			if (!allowsCustomValue) return;
+			onChange(val);
+		},
+		onSelectionChange(val) {
+			if (val == null && allowsCustomValue) return;
+			onChange(val);
+		}
+	};
+	else if (type === "Select") return {
+		selectedKey: value ?? null,
+		onSelectionChange: onChange
+	};
+	return {
+		value: value != null ? value : null,
+		onChange
+	};
+}
+function Field(props) {
+	const allProps = useFormProps(props);
+	let { children, form, label, extra, necessityLabel, necessityIndicator, tooltip, isHidden, isDisabled, isLoading, styles, labelProps, labelPosition = "top", labelStyles, labelSuffix } = allProps;
+	if (typeof children === "function") children = children(form);
+	let child = children == null ? null : Children.only(children);
+	const inputType = (child?.type)?.cubeInputType ?? "Text";
+	const __props = useField(allProps, { defaultValidationTrigger: getDefaultValidateTrigger(inputType) });
+	const { validationState, message, description, errorMessage, isRequired, name, id } = __props;
+	if (!child) return null;
+	if (id) {
+		if (!labelProps) labelProps = {};
+		labelProps.for = id;
+	}
+	if (__props.nonInput) return /* @__PURE__ */ jsx(LegacyFieldProvider, { children: /* @__PURE__ */ jsx(FieldWrapper, {
+		isHidden,
+		isDisabled,
+		validationState: __props.validationState,
+		necessityIndicator,
+		necessityLabel,
+		isRequired,
+		label,
+		labelProps,
+		extra,
+		tooltip,
+		message,
+		description,
+		errorMessage,
+		Component: child,
+		styles,
+		labelPosition,
+		labelStyles,
+		labelSuffix
+	}) });
+	if (!form) {
+		warn("Form Field requires declared form instance if field name is specified");
+		return null;
+	}
+	if (!__props.field) return /* @__PURE__ */ jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(child.props, {
+		...getValueProps(inputType),
+		label: name,
+		name,
+		id
+	})) });
+	const newProps = {
+		id,
+		name,
+		onBlur: __props.onBlur
+	};
+	if (necessityIndicator != null) newProps.necessityIndicator = necessityIndicator;
+	if (necessityLabel) newProps.necessityLabel = necessityLabel;
+	if (validationState) newProps.validationState = validationState;
+	if (isRequired) newProps.isRequired = isRequired;
+	if (label) newProps.label = label;
+	if (extra) newProps.extra = extra;
+	if (tooltip) newProps.tooltip = tooltip;
+	if (message !== void 0) newProps.message = message;
+	if (errorMessage !== void 0) newProps.errorMessage = errorMessage;
+	if (description !== void 0) newProps.description = description;
+	if (isHidden != null) newProps.isHidden = isHidden;
+	if (isDisabled != null) newProps.isDisabled = isDisabled;
+	if (isLoading != null) newProps.isLoading = isLoading;
+	Object.assign(newProps, getValueProps(inputType, __props.field?.value, __props.onChange, child.props.allowsCustomValue));
+	const { onChange, onSelectionChange, ...childProps } = child.props;
+	return /* @__PURE__ */ jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) });
+}
+const LegacyFieldContext = createContext({ insideLegacyField: false });
+function LegacyFieldProvider(props) {
+	const value = useMemo(() => ({ insideLegacyField: true }), []);
+	return /* @__PURE__ */ jsx(LegacyFieldContext.Provider, {
+		value,
+		children: props.children
+	});
+}
+function useInsideLegacyField() {
+	const { insideLegacyField = false } = useContext(LegacyFieldContext);
+	return insideLegacyField;
+}
+
+//#endregion
+export { Field, useInsideLegacyField };
+//# sourceMappingURL=Field.js.map

package/dist/components/form/Form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  createContext,\n  PropsWithChildren,\n  ReactElement,\n  useContext,\n  useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { Styles } from '../../../tasty/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n  type = type || '';\n\n  return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n  type?: string,\n  value?,\n  onChange?,\n  allowsCustomValue?: boolean,\n) {\n  type = type || '';\n\n  if (type === 'Number') {\n    return {\n      value: value != null ? value : null,\n      onChange: onChange,\n    };\n  } else if (type === 'Text') {\n    return {\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange: onChange,\n    };\n  } else if (type === 'Checkbox') {\n    return {\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    };\n  } else if (type === 'CheckboxGroup') {\n    return {\n      value: value != null ? value : [],\n      onChange: onChange,\n    };\n  } else if (type === 'RangeSlider') {\n    return {\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    };\n  } else if (type === 'ComboBox') {\n    return {\n      selectedKey: !allowsCustomValue ? value ?? null : undefined,\n      inputValue: allowsCustomValue ? value ?? '' : undefined,\n      onInputChange(val) {\n        if (!allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n      onSelectionChange(val: string) {\n        if (val == null && allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n    };\n  } else if (type === 'Select') {\n    return {\n      selectedKey: value ?? null,\n      onSelectionChange: onChange,\n    };\n  }\n\n  return {\n    value: value != null ? value : null,\n    onChange,\n  };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n  /** The initial value of the input. */\n  defaultValue?: any;\n  styles?: Styles;\n  children?: ReactElement | ((CubeFormInstance) => ReactElement);\n  /** The form instance */\n  form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n  form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n  extends CubeFieldProps<T> {\n  isRequired?: boolean;\n  onChange?: (any) => void;\n  onSelectionChange?: (any) => void;\n  onBlur: () => void;\n  labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n  const allProps: CubeFullFieldProps<T> = useFormProps(props);\n\n  let {\n    children,\n    form,\n    label,\n    extra,\n    necessityLabel,\n    necessityIndicator,\n    tooltip,\n    isHidden,\n    isDisabled,\n    isLoading,\n    styles,\n    labelProps,\n    labelPosition = 'top',\n    labelStyles,\n    labelSuffix,\n  } = allProps;\n\n  if (typeof children === 'function') {\n    children = children(form);\n  }\n\n  let child = children == null ? null : Children.only(children);\n\n  const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n  const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n    defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n  });\n\n  const {\n    validationState,\n    message,\n    description,\n    errorMessage,\n    isRequired,\n    name,\n    id,\n  } = __props;\n\n  if (!child) return null;\n\n  if (id) {\n    if (!labelProps) {\n      labelProps = {};\n    }\n\n    labelProps.for = id;\n  }\n\n  if (__props.nonInput) {\n    return (\n      <LegacyFieldProvider>\n        <FieldWrapper\n          isHidden={isHidden}\n          isDisabled={isDisabled}\n          validationState={__props.validationState}\n          necessityIndicator={necessityIndicator}\n          necessityLabel={necessityLabel}\n          isRequired={isRequired}\n          label={label}\n          labelProps={labelProps}\n          extra={extra}\n          tooltip={tooltip}\n          message={message}\n          description={description}\n          errorMessage={errorMessage}\n          Component={child}\n          styles={styles}\n          labelPosition={labelPosition}\n          labelStyles={labelStyles}\n          labelSuffix={labelSuffix}\n        />\n      </LegacyFieldProvider>\n    );\n  }\n\n  if (!form) {\n    warn(\n      'Form Field requires declared form instance if field name is specified',\n    );\n\n    return null;\n  }\n\n  if (!__props.field) {\n    return (\n      <LegacyFieldProvider>\n        {cloneElement(\n          child,\n          mergeProps(child.props as any, {\n            ...getValueProps(inputType),\n            label: name,\n            name,\n            id,\n          }),\n        )}\n      </LegacyFieldProvider>\n    );\n  }\n\n  const newProps: CubeReplaceFieldProps<T> = {\n    id,\n    name,\n    onBlur: __props.onBlur,\n  };\n\n  if (necessityIndicator != null) {\n    newProps.necessityIndicator = necessityIndicator;\n  }\n\n  if (necessityLabel) {\n    newProps.necessityLabel = necessityLabel;\n  }\n\n  if (validationState) {\n    newProps.validationState = validationState;\n  }\n\n  if (isRequired) {\n    newProps.isRequired = isRequired;\n  }\n\n  if (label) {\n    newProps.label = label;\n  }\n\n  if (extra) {\n    newProps.extra = extra;\n  }\n\n  if (tooltip) {\n    newProps.tooltip = tooltip;\n  }\n\n  if (message !== undefined) {\n    newProps.message = message;\n  }\n\n  if (errorMessage !== undefined) {\n    newProps.errorMessage = errorMessage;\n  }\n\n  if (description !== undefined) {\n    newProps.description = description;\n  }\n\n  if (isHidden != null) {\n    newProps.isHidden = isHidden;\n  }\n\n  if (isDisabled != null) {\n    newProps.isDisabled = isDisabled;\n  }\n\n  if (isLoading != null) {\n    newProps.isLoading = isLoading;\n  }\n\n  Object.assign(\n    newProps,\n    getValueProps(\n      inputType,\n      __props.field?.value,\n      __props.onChange,\n      (child.props as any).allowsCustomValue,\n    ),\n  );\n\n  const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n  // onChange event passed to the child should be executed after Form onChange logic\n  return (\n    <LegacyFieldProvider>\n      {cloneElement(\n        child,\n        mergeProps(\n          childProps,\n          newProps,\n          onChange ? { onChange: __props.onChange } : {},\n          onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n        ),\n      )}\n    </LegacyFieldProvider>\n  );\n}\n\ntype LegacyFieldContextValue = {\n  insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n  insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n  const value = useMemo(() => ({ insideLegacyField: true }), []);\n  return (\n    <LegacyFieldContext.Provider value={value}>\n      {props.children}\n    </LegacyFieldContext.Provider>\n  );\n}\n\nexport function useInsideLegacyField() {\n  const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n  return insideLegacyField;\n}\n"],"mappings":"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"}

package/dist/components/form/Form/Form.d.ts

@@ -0,0 +1,35 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FormBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { FieldTypes } from "./types.js";
+import { CubeFormData, CubeFormInstance } from "./use-form.js";
+import * as react from "react";
+import { FormHTMLAttributes, ReactElement } from "react";
+import { DOMRef } from "@react-types/shared";
+
+//#region src/components/form/Form/Form.d.ts
+declare const FormContext: react.Context<{}>;
+declare function useFormProps(props: any): any;
+interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
+  /** Form name */
+  name?: string;
+  /** Default field values */
+  defaultValues?: Partial<T>;
+  /** Trigger when any value of the Field is changed */
+  onValuesChange?: CubeFormInstance<T>['onValuesChange'];
+  /** Trigger on form submit and success */
+  onSubmit?: CubeFormInstance<T>['onSubmit'];
+  /** Trigger on form submit and failed */
+  onSubmitFailed?: (any?: any) => void | Promise<any>;
+  /** Set form instance created by useForm */
+  form?: CubeFormInstance<T, CubeFormData<T>>;
+  /** The size of the side area with labels. Only for `labelPosition="side"` */
+  labelWidth?: Styles['width'];
+  orientation?: 'vertical' | 'horizontal';
+}
+//#endregion
+export { CubeFormProps, FormContext, useFormProps };
+//# sourceMappingURL=Form.d.ts.map