fis-component 0.0.74 → 0.0.77

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.
@@ -15,3 +15,4 @@ export declare const Disabled: import("@storybook/core/csf").AnnotatedStoryFn<im
15
15
  export declare const NumberType: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, NumberSelectStoryProps>;
16
16
  export declare const CustomMaxHeight: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
17
17
  export declare const TextEllipsis: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
18
+ export declare const PlaceholderDemo: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
@@ -9,10 +9,11 @@ export interface SelectOption<T = string | number> {
9
9
  value: T;
10
10
  }[];
11
11
  }
12
- type BaseSelectProps<T extends string | number> = Partial<InputLabelProps> & Omit<MenuProps, "groups" | "multi" | "selectedValues" | "onChangeSelected" | "onClickMenu" | "size"> & Omit<SelectFieldProps, "value" | "onChange"> & {
12
+ type BaseSelectProps<T extends string | number> = Partial<InputLabelProps> & Omit<MenuProps, "groups" | "multi" | "selectedValues" | "onChangeSelected" | "onClickMenu" | "size" | "placeholder"> & Omit<SelectFieldProps, "value" | "onChange"> & {
13
13
  options: SelectOption<T>[];
14
14
  message?: string;
15
15
  disabled?: boolean;
16
+ placeholder?: string;
16
17
  placeholderSearch?: string;
17
18
  positive?: boolean;
18
19
  multiDisplayText?: (count: number) => string;
@@ -1,10 +1,10 @@
1
1
  import { DetailedHTMLProps, HTMLAttributes, ReactElement } from "react";
2
- interface ColumnCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> {
2
+ interface ColumnCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "content"> {
3
3
  className?: string;
4
- textAlign?: "left" | "right";
4
+ textAlign?: string;
5
5
  contentWrapText?: boolean;
6
6
  variant?: string;
7
- content?: string;
7
+ content?: React.ReactNode;
8
8
  description?: string;
9
9
  icon?: ReactElement;
10
10
  disabled?: boolean;
package/dist/esm/index.js CHANGED
@@ -70536,9 +70536,12 @@ ${({ $disabled }) => {
70536
70536
  `;
70537
70537
  const SpanLabel$1 = styled.span `
70538
70538
  margin: 0;
70539
- display: flex;
70540
- align-items: center;
70541
- justify-content: center;
70539
+ overflow: hidden;
70540
+ text-overflow: ellipsis;
70541
+ white-space: nowrap;
70542
+ // display: flex;
70543
+ // align-items: center;
70544
+ // justify-content: center;
70542
70545
 
70543
70546
  &.no-padding {
70544
70547
  padding-right: 0;
@@ -71692,7 +71695,7 @@ const DivIconSC = styled.div `
71692
71695
  `;
71693
71696
 
71694
71697
  const FISTableCell = forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, ...rest }, ref) => {
71695
- return (jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxs("div", { className: "single-line-content", children: [icon && (jsx("div", { className: "icon-box", children: jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content, "$hasDescription": description, children: icon }) })), (content || description) && (jsxs("div", { className: "content-box", children: [content && jsx("div", { className: "content", children: content }), description && (jsx("div", { className: "description", children: description }))] }))] })) : (jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxs("div", { className: "content-box", children: [icon && (jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content, "$hasDescription": description, children: icon })), content && jsx("div", { className: "content", children: content })] })), description && jsx("div", { className: "description", children: description })] })) }));
71698
+ return (jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content ? "true" : undefined, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxs("div", { className: "single-line-content", children: [icon && (jsx("div", { className: "icon-box", children: jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxs("div", { className: "content-box", children: [content && jsx("div", { className: "content", children: content }), description && (jsx("div", { className: "description", children: description }))] }))] })) : (jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxs("div", { className: "content-box", children: [icon && (jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsx("div", { className: "content", children: content })] })), description && jsx("div", { className: "description", children: description })] })) }));
71696
71699
  });
71697
71700
  FISTableCell.displayName = "FISTableCell";
71698
71701
 
@@ -73417,7 +73420,7 @@ function isMenuSize(value) {
73417
73420
  return value === "sm" || value === "md";
73418
73421
  }
73419
73422
 
73420
- const FISSelect = forwardRef(({ className, style, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, maxHeight, ...restProps }, ref) => {
73423
+ const FISSelect = forwardRef(({ className, style, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholder, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, maxHeight, ...restProps }, ref) => {
73421
73424
  const [isOpen, setIsOpen] = useState(false);
73422
73425
  const [referenceElement, setReferenceElement] = useState(null);
73423
73426
  const [popperElement, setPopperElement] = useState(null);
@@ -73556,7 +73559,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
73556
73559
  document.addEventListener("mousedown", handleClickOutside);
73557
73560
  return () => document.removeEventListener("mousedown", handleClickOutside);
73558
73561
  }, [referenceElement, popperElement]);
73559
- return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
73562
+ return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
73560
73563
  ...styles.popper,
73561
73564
  width: referenceElement?.offsetWidth,
73562
73565
  zIndex: 9999,