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.
- package/dist/cjs/index.js +9 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/src/components/Select/Select.stories.d.ts +1 -0
- package/dist/cjs/types/src/components/Select/types.d.ts +2 -1
- package/dist/cjs/types/src/components/Table/ColumnCell/index.d.ts +3 -3
- package/dist/esm/index.js +9 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/src/components/Select/Select.stories.d.ts +1 -0
- package/dist/esm/types/src/components/Select/types.d.ts +2 -1
- package/dist/esm/types/src/components/Table/ColumnCell/index.d.ts +3 -3
- package/dist/index.d.ts +5 -4
- package/package.json +1 -1
|
@@ -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?:
|
|
4
|
+
textAlign?: string;
|
|
5
5
|
contentWrapText?: boolean;
|
|
6
6
|
variant?: string;
|
|
7
|
-
content?:
|
|
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
|
-
|
|
70540
|
-
|
|
70541
|
-
|
|
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,
|