@trackunit/react-form-components 1.7.23 → 1.7.24

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 (4) hide show
  1. package/index.cjs.js +8 -5
  2. package/index.esm.js +8 -5
  3. package/package.json +1 -1
  4. package/src/components/Select/TagsContainer.d.ts +2 -1
package/index.cjs.js CHANGED
@@ -2100,7 +2100,7 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
2100
2100
  * @param {TagsContainerProps} props - The props for the TagContainer
2101
2101
  * @returns {ReactElement} TagsContainer
2102
2102
  */
2103
- const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled }) => {
2103
+ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, disabled, }) => {
2104
2104
  const containerRef = react.useRef(null);
2105
2105
  const [isReady, setIsReady] = react.useState(false);
2106
2106
  const [counterWidth, setCounterWidth] = react.useState(0);
@@ -2167,9 +2167,9 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
2167
2167
  }, { elements: [], counter: 0 });
2168
2168
  return elements;
2169
2169
  }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
2170
- return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
2170
+ return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady || !!preFix }), ref: containerRef, style: {
2171
2171
  width: `${width}`,
2172
- }, children: [renderedElements, postFix] }));
2172
+ }, children: [preFix, renderedElements, postFix] }));
2173
2173
  };
2174
2174
 
2175
2175
  /**
@@ -2202,6 +2202,9 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2202
2202
  const tags = key === PLACEHOLDER_KEY ? [] : values;
2203
2203
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
2204
2204
  const searchInput = props && props.children && props.children[1];
2205
+ const placeholderElement = Array.isArray(props.children)
2206
+ ? props.children.find(child => child && child.key === PLACEHOLDER_KEY)
2207
+ : null;
2205
2208
  return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
2206
2209
  ? tags.map(({ props: tagProps }) => {
2207
2210
  const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
@@ -2217,7 +2220,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2217
2220
  Icon: optionPrefix,
2218
2221
  };
2219
2222
  })
2220
- : [], postFix: searchInput, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
2223
+ : [], postFix: searchInput, preFix: placeholderElement ? jsxRuntime.jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
2221
2224
  ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
2222
2225
  return (jsxRuntime.jsx(reactComponents.Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
2223
2226
  e.stopPropagation();
@@ -2225,7 +2228,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2225
2228
  tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
2226
2229
  }, children: tagProps.children }, tagProps.children?.toString()));
2227
2230
  })
2228
- : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
2231
+ : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
2229
2232
  }
2230
2233
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
2231
2234
  },
package/index.esm.js CHANGED
@@ -2099,7 +2099,7 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
2099
2099
  * @param {TagsContainerProps} props - The props for the TagContainer
2100
2100
  * @returns {ReactElement} TagsContainer
2101
2101
  */
2102
- const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled }) => {
2102
+ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, disabled, }) => {
2103
2103
  const containerRef = useRef(null);
2104
2104
  const [isReady, setIsReady] = useState(false);
2105
2105
  const [counterWidth, setCounterWidth] = useState(0);
@@ -2166,9 +2166,9 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
2166
2166
  }, { elements: [], counter: 0 });
2167
2167
  return elements;
2168
2168
  }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
2169
- return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
2169
+ return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady || !!preFix }), ref: containerRef, style: {
2170
2170
  width: `${width}`,
2171
- }, children: [renderedElements, postFix] }));
2171
+ }, children: [preFix, renderedElements, postFix] }));
2172
2172
  };
2173
2173
 
2174
2174
  /**
@@ -2201,6 +2201,9 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2201
2201
  const tags = key === PLACEHOLDER_KEY ? [] : values;
2202
2202
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
2203
2203
  const searchInput = props && props.children && props.children[1];
2204
+ const placeholderElement = Array.isArray(props.children)
2205
+ ? props.children.find(child => child && child.key === PLACEHOLDER_KEY)
2206
+ : null;
2204
2207
  return (jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
2205
2208
  ? tags.map(({ props: tagProps }) => {
2206
2209
  const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
@@ -2216,7 +2219,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2216
2219
  Icon: optionPrefix,
2217
2220
  };
2218
2221
  })
2219
- : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags
2222
+ : [], postFix: searchInput, preFix: placeholderElement ? jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxs(Fragment, { children: [tags
2220
2223
  ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
2221
2224
  return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
2222
2225
  e.stopPropagation();
@@ -2224,7 +2227,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
2224
2227
  tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
2225
2228
  }, children: tagProps.children }, tagProps.children?.toString()));
2226
2229
  })
2227
- : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
2230
+ : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
2228
2231
  }
2229
2232
  return (jsx(Fragment, { children: jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
2230
2233
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "1.7.23",
3
+ "version": "1.7.24",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/components/Select/TagsContainer.d.ts CHANGED
@@ -34,6 +34,7 @@ interface TagsContainerProps {
34
34
  * @memberof TagsContainerProps
35
35
  */
36
36
  itemsGap?: number;
37
+ preFix: ReactElement | null;
37
38
  postFix: ReactElement;
38
39
  /**
39
40
  * Is the parent dropdown disabled
@@ -46,5 +47,5 @@ interface TagsContainerProps {
46
47
  * @param {TagsContainerProps} props - The props for the TagContainer
47
48
  * @returns {ReactElement} TagsContainer
48
49
  */
49
- export declare const TagsContainer: ({ items, width, itemsGap, postFix, disabled }: TagsContainerProps) => import("react/jsx-runtime").JSX.Element;
50
+ export declare const TagsContainer: ({ items, width, itemsGap, postFix, preFix, disabled, }: TagsContainerProps) => import("react/jsx-runtime").JSX.Element;
50
51
  export {};