@povio/ui 2.2.9-rc.17 → 2.2.9-rc.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/inputs/DateTime/shared/Calendar.js +1 -1
  2. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +13 -13
  3. package/dist/components/inputs/Selection/Select/Select.js +14 -13
  4. package/dist/components/inputs/Selection/shared/staticSelect.utils.d.ts +21 -0
  5. package/dist/components/inputs/Selection/shared/staticSelect.utils.js +28 -0
  6. package/dist/components/inputs/shared/StaticInput.js +22 -24
  7. package/dist/utils/date-time.utils.js +10 -5
  8. package/package.json +1 -1
package/dist/components/inputs/DateTime/shared/Calendar.js CHANGED
@@ -29,7 +29,7 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
29
29
  setToggleState("time");
30
30
  return;
31
31
  }
32
- onApply(resolvedDate);
32
+ if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
33
33
  };
34
34
  const getContent = () => {
35
35
  if (!toggleState) return /* @__PURE__ */ jsx(CalendarGrid, {
package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js CHANGED
@@ -2,9 +2,10 @@ import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
2
2
  import { UIConfig } from "../../../../config/uiConfig.context.js";
3
3
  import { StaticInput } from "../../shared/StaticInput.js";
4
4
  import { SelectBase } from "../shared/SelectBase.js";
5
+ import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
5
6
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
7
  import { clsx } from "clsx";
7
- import { isValidElement, useEffect, useRef, useState } from "react";
8
+ import { useEffect, useRef, useState } from "react";
8
9
  import { mergeRefs } from "@react-aria/utils";
9
10
  import { Controller, useWatch } from "react-hook-form";
10
11
  //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
@@ -53,20 +54,19 @@ function Autocomplete({ renderStaticInput, ...props }) {
53
54
  setShouldFocus(false);
54
55
  }, [renderInput, shouldFocus]);
55
56
  if (!renderInput) {
56
- const getItemLabel = (id) => {
57
- const item = props.items.find((innerItem) => innerItem.id === id);
58
- if (!item) return "";
59
- if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
60
- return item.label;
61
- };
62
- const mode = props.selectionMode ?? ui.select.selectionMode;
63
- let displayValue = "";
64
- if (mode === "multiple") {
65
- if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = /* @__PURE__ */ jsx(Fragment, { children: currentValue.map((id) => getItemLabel(id)).filter(Boolean).map((item, index) => /* @__PURE__ */ jsxs("span", { children: [item, index < currentValue.length - 1 && ","] }, `${index}`)) });
66
- } else if (currentValue != null) displayValue = getItemLabel(currentValue);
67
57
  const as = props.as ?? ui.input.as;
68
58
  let isDisabled = !!props.isDisabled;
69
59
  if (isFormControlDisabled) isDisabled = true;
60
+ const mode = props.selectionMode ?? ui.select.selectionMode;
61
+ const { displayValue, isEmpty } = getStaticSelectValue({
62
+ items: props.items,
63
+ value: currentValue,
64
+ selectionMode: mode,
65
+ showSelectionContent: props.showSelectionContent,
66
+ isDisabled,
67
+ collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
68
+ selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
69
+ });
70
70
  const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" }) : void 0] }) : void 0;
71
71
  return /* @__PURE__ */ jsx(StaticInput, {
72
72
  ...props,
@@ -84,7 +84,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
84
84
  inputClassName: clsx(props.className, props.inputClassName),
85
85
  placeholder: as === "floating" ? "" : props.placeholder,
86
86
  displayValue,
87
- isEmpty: !displayValue,
87
+ isEmpty,
88
88
  leadingContent: props.leadingContent,
89
89
  trailingContent
90
90
  });
package/dist/components/inputs/Selection/Select/Select.js CHANGED
@@ -2,9 +2,10 @@ import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
2
2
  import { UIConfig } from "../../../../config/uiConfig.context.js";
3
3
  import { StaticInput } from "../../shared/StaticInput.js";
4
4
  import { SelectBase } from "../shared/SelectBase.js";
5
+ import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
5
6
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
7
  import { clsx } from "clsx";
7
- import { isValidElement, useEffect, useRef, useState } from "react";
8
+ import { useEffect, useRef, useState } from "react";
8
9
  import { mergeRefs } from "@react-aria/utils";
9
10
  import { Controller, useWatch } from "react-hook-form";
10
11
  //#region src/components/inputs/Selection/Select/Select.tsx
@@ -49,20 +50,19 @@ function Select({ renderStaticInput, ...props }) {
49
50
  setShouldFocus(false);
50
51
  }, [renderInput, shouldFocus]);
51
52
  if (!renderInput) {
52
- const getItemLabel = (id) => {
53
- const item = props.items.find((innerItem) => innerItem.id === id);
54
- if (!item) return "";
55
- if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
56
- return item.label;
57
- };
58
- const mode = props.selectionMode ?? ui.select.selectionMode;
59
- let displayValue = "";
60
- if (mode === "multiple") {
61
- if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = /* @__PURE__ */ jsx(Fragment, { children: currentValue.map((id) => getItemLabel(id)).filter(Boolean).map((item, index) => /* @__PURE__ */ jsxs("span", { children: [item, index < currentValue.length - 1 && ","] }, `${index}`)) });
62
- } else if (currentValue != null) displayValue = getItemLabel(currentValue);
63
53
  const as = props.as ?? ui.input.as;
64
54
  let isDisabled = !!props.isDisabled;
65
55
  if (isFormControlDisabled) isDisabled = true;
56
+ const mode = props.selectionMode ?? ui.select.selectionMode;
57
+ const { displayValue, isEmpty } = getStaticSelectValue({
58
+ items: props.items,
59
+ value: currentValue,
60
+ selectionMode: mode,
61
+ showSelectionContent: props.showSelectionContent,
62
+ isDisabled,
63
+ collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
64
+ selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
65
+ });
66
66
  const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: `size-6 shrink-0 ${isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"}` }) : void 0] }) : void 0;
67
67
  return /* @__PURE__ */ jsx(StaticInput, {
68
68
  ...props,
@@ -73,13 +73,14 @@ function Select({ renderStaticInput, ...props }) {
73
73
  as,
74
74
  size: props.size ?? ui.input.size,
75
75
  variant: props.variant ?? ui.input.variant,
76
+ isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
76
77
  hideLabel: props.hideLabel ?? ui.input.hideLabel,
77
78
  isDisabled,
78
79
  className: clsx("w-full", props.containerClassName),
79
80
  inputClassName: clsx(props.className, props.inputClassName),
80
81
  placeholder: as === "floating" ? "" : props.placeholder,
81
82
  displayValue,
82
- isEmpty: !displayValue,
83
+ isEmpty,
83
84
  leadingContent: props.leadingContent,
84
85
  trailingContent
85
86
  });
package/dist/components/inputs/Selection/shared/staticSelect.utils.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { ReactNode } from 'react';
2
+ import { Key } from 'react-aria-components';
3
+ import { SelectBaseProps } from './SelectBase';
4
+ import { SelectItem } from './select.types';
5
+ interface GetStaticSelectValueOptions<TKey extends Key = Key> {
6
+ items: SelectItem<TKey>[];
7
+ value: TKey | TKey[] | null | undefined;
8
+ selectionMode: SelectBaseProps<TKey>["selectionMode"];
9
+ showSelectionContent?: boolean;
10
+ isDisabled?: boolean;
11
+ collapseAfter?: SelectBaseProps<TKey>["collapseAfter"];
12
+ selectedTagsType?: SelectBaseProps<TKey>["selectedTagsType"];
13
+ }
14
+ interface StaticSelectValueResult<TKey extends Key = Key> {
15
+ selectedItem: SelectItem<TKey> | null;
16
+ selectedItems: SelectItem<TKey>[];
17
+ displayValue: ReactNode;
18
+ isEmpty: boolean;
19
+ }
20
+ export declare const getStaticSelectValue: <TKey extends Key = Key>({ items, value, selectionMode, showSelectionContent, isDisabled, collapseAfter, selectedTagsType, }: GetStaticSelectValueOptions<TKey>) => StaticSelectValueResult<TKey>;
21
+ export {};
package/dist/components/inputs/Selection/shared/staticSelect.utils.js ADDED
@@ -0,0 +1,28 @@
1
+ import { SelectInputTags } from "./SelectInputTags.js";
2
+ import { jsx } from "react/jsx-runtime";
3
+ //#region src/components/inputs/Selection/shared/staticSelect.utils.tsx
4
+ var getStaticSelectValue = ({ items, value, selectionMode, showSelectionContent, isDisabled, collapseAfter, selectedTagsType }) => {
5
+ const getItem = (id) => items.find((item) => item.id === id) ?? null;
6
+ const selectedItems = Array.isArray(value) ? value.map((id) => getItem(id)).filter((item) => item != null) : [];
7
+ const selectedItem = !Array.isArray(value) && value != null ? getItem(value) : null;
8
+ if (selectionMode === "multiple") return {
9
+ selectedItem,
10
+ selectedItems,
11
+ displayValue: selectedItems.length > 0 ? /* @__PURE__ */ jsx(SelectInputTags, {
12
+ selectedItems,
13
+ isDisabled,
14
+ collapseAfter,
15
+ selectedTagsType,
16
+ onRemove: () => void 0
17
+ }) : "",
18
+ isEmpty: selectedItems.length === 0
19
+ };
20
+ return {
21
+ selectedItem,
22
+ selectedItems,
23
+ displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : selectedItem.label : "",
24
+ isEmpty: selectedItem == null
25
+ };
26
+ };
27
+ //#endregion
28
+ export { getStaticSelectValue };
package/dist/components/inputs/shared/StaticInput.js CHANGED
@@ -40,30 +40,28 @@ var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placehol
40
40
  className: clsx(inputSizeCva({
41
41
  size,
42
42
  as
43
- }), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full"),
44
- children: [leadingVisual && /* @__PURE__ */ jsx("div", {
45
- className: "pointer-events-none shrink-0",
46
- children: leadingVisual
47
- }), /* @__PURE__ */ jsxs("div", {
48
- className: clsx("flex w-full truncate", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements", contentRowClassName),
49
- children: [
50
- as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
51
- as,
52
- size,
53
- label: formFieldProps.label,
54
- isRequired: formFieldProps.isRequired,
55
- isDisabled: formFieldProps.isDisabled
56
- }),
57
- leadingContent && /* @__PURE__ */ jsx("div", {
58
- className: "ml-input-side-default flex shrink-0 items-center",
59
- children: leadingContent
60
- }),
61
- /* @__PURE__ */ jsxs("div", {
62
- className: clsx("w-full truncate", !hasValue && "text-text-default-3"),
63
- children: [staticDisplayContent, shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })]
64
- })
65
- ]
66
- })]
43
+ }), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", contentRowClassName),
44
+ children: [
45
+ leadingVisual && /* @__PURE__ */ jsx("div", {
46
+ className: "pointer-events-none shrink-0",
47
+ children: leadingVisual
48
+ }),
49
+ as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
50
+ as,
51
+ size,
52
+ label: formFieldProps.label,
53
+ isRequired: formFieldProps.isRequired,
54
+ isDisabled: formFieldProps.isDisabled
55
+ }),
56
+ leadingContent && /* @__PURE__ */ jsx("div", {
57
+ className: "ml-input-side-default flex shrink-0 items-center",
58
+ children: leadingContent
59
+ }),
60
+ /* @__PURE__ */ jsxs("div", {
61
+ className: clsx("w-full truncate", !hasValue && "text-text-default-3"),
62
+ children: [staticDisplayContent, shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })]
63
+ })
64
+ ]
67
65
  })
68
66
  }), trailingContent && /* @__PURE__ */ jsx("div", {
69
67
  className: clsx(inputSizeCva({
package/dist/utils/date-time.utils.js CHANGED
@@ -39,18 +39,23 @@ var DateTimeUtils;
39
39
  hourCycle: "h23",
40
40
  timeZone: "UTC"
41
41
  });
42
- const mapTypeToPlaceholder = (type) => {
42
+ const repeatLocalizedFieldLabel = (type, length, locale) => {
43
+ const placeholderChar = new Intl.DisplayNames(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
44
+ if (!placeholderChar) return null;
45
+ return placeholderChar.repeat(length);
46
+ };
47
+ const mapTypeToPlaceholder = (type, locale) => {
43
48
  switch (type) {
44
- case "day": return "dd";
45
- case "month": return "mm";
46
- case "year": return "yyyy";
49
+ case "day": return repeatLocalizedFieldLabel(type, 2, locale);
50
+ case "month": return repeatLocalizedFieldLabel(type, 2, locale);
51
+ case "year": return repeatLocalizedFieldLabel(type, 4, locale);
47
52
  case "hour": return "hh";
48
53
  case "minute": return "mm";
49
54
  default: return null;
50
55
  }
51
56
  };
52
57
  const formatPlaceholder = (formatter, sampleDate) => {
53
- return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type) ?? part.value).join("");
58
+ return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value.replace(/\s+/gu, "")).join("");
54
59
  };
55
60
  function getDatePlaceholder(locale) {
56
61
  return formatPlaceholder(getDatePlaceholderFormatter(locale), DATE_SAMPLE_DATE_UTC);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@povio/ui",
3
- "version": "2.2.9-rc.17",
3
+ "version": "2.2.9-rc.19",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",