@activecollab/components 2.0.256 → 2.0.258
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/components/Select/Option/Option.js +1 -1
- package/dist/cjs/components/Select/Option/Option.js.map +1 -1
- package/dist/cjs/components/Select/Option/Styles.js +6 -1
- package/dist/cjs/components/Select/Option/Styles.js.map +1 -1
- package/dist/cjs/hooks/useHighlightText.js +2 -2
- package/dist/cjs/hooks/useHighlightText.js.map +1 -1
- package/dist/esm/components/Select/Option/Option.d.ts.map +1 -1
- package/dist/esm/components/Select/Option/Option.js +2 -2
- package/dist/esm/components/Select/Option/Option.js.map +1 -1
- package/dist/esm/components/Select/Option/Styles.d.ts +1 -0
- package/dist/esm/components/Select/Option/Styles.d.ts.map +1 -1
- package/dist/esm/components/Select/Option/Styles.js +5 -0
- package/dist/esm/components/Select/Option/Styles.js.map +1 -1
- package/dist/esm/hooks/useHighlightText.js +2 -2
- package/dist/esm/hooks/useHighlightText.js.map +1 -1
- package/dist/index.js +8 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -36,7 +36,7 @@ var Option = exports.Option = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
|
|
|
36
36
|
className: (0, _classnames.default)("c-option", className),
|
|
37
37
|
hover: hover,
|
|
38
38
|
onClick: onClick
|
|
39
|
-
}, renderOption ? renderOption : name);
|
|
39
|
+
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionContent, null, renderOption ? renderOption : name));
|
|
40
40
|
});
|
|
41
41
|
Option.displayName = "Option";
|
|
42
42
|
//# sourceMappingURL=Option.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Option","exports","forwardRef","_ref","ref","id","name","_ref$tooltip","tooltip","hover","className","renderOption","onMouseEnter","_ref$onClick","onClick","handleOnMouseEnter","useCallback","createElement","StyledOption","title","onTouchStart","classnames","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n forwardRef,\n MouseEventHandler,\n ReactNode,\n Ref,\n useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption } from \"./Styles\";\n\nexport interface IOptionItemProps {\n /** Value of option */\n id: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Additional info right-side of name */\n additionalInfo?: string;\n /** image url for Avatar or MultiAvatar */\n image?: string | string[];\n /** Hex color for label */\n color?: string;\n /** Color for chip label */\n chipColor?: string;\n /** Value of mixed */\n mixed?: boolean;\n /** Hide option */\n hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n /** Value of option */\n id?: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Hovered state */\n hover?: boolean;\n /** Class name of option */\n className?: string;\n /** Render option function */\n renderOption?: ReactNode;\n /** On mouse enter callback */\n onMouseEnter?: (e: string | number | undefined) => void;\n /** On mouse click */\n onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n (\n {\n id,\n name,\n tooltip = \"\",\n hover,\n className,\n renderOption,\n onMouseEnter,\n onClick = () => null,\n }: IAdditionalOptionItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\n const handleOnMouseEnter = useCallback(() => {\n if (onMouseEnter) {\n onMouseEnter(id);\n }\n }, [onMouseEnter, id]);\n\n return (\n <StyledOption\n ref={hover ? ref : null}\n title={tooltip ? tooltip : name}\n onMouseEnter={handleOnMouseEnter}\n onTouchStart={handleOnMouseEnter}\n className={classnames(\"c-option\", className)}\n hover={hover}\n onClick={onClick}\n >\n {renderOption ? renderOption : name}\n </StyledOption>\n );\n }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAQA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;
|
|
1
|
+
{"version":3,"file":"Option.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Option","exports","forwardRef","_ref","ref","id","name","_ref$tooltip","tooltip","hover","className","renderOption","onMouseEnter","_ref$onClick","onClick","handleOnMouseEnter","useCallback","createElement","StyledOption","title","onTouchStart","classnames","StyledOptionContent","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n forwardRef,\n MouseEventHandler,\n ReactNode,\n Ref,\n useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption, StyledOptionContent } from \"./Styles\";\n\nexport interface IOptionItemProps {\n /** Value of option */\n id: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Additional info right-side of name */\n additionalInfo?: string;\n /** image url for Avatar or MultiAvatar */\n image?: string | string[];\n /** Hex color for label */\n color?: string;\n /** Color for chip label */\n chipColor?: string;\n /** Value of mixed */\n mixed?: boolean;\n /** Hide option */\n hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n /** Value of option */\n id?: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Hovered state */\n hover?: boolean;\n /** Class name of option */\n className?: string;\n /** Render option function */\n renderOption?: ReactNode;\n /** On mouse enter callback */\n onMouseEnter?: (e: string | number | undefined) => void;\n /** On mouse click */\n onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n (\n {\n id,\n name,\n tooltip = \"\",\n hover,\n className,\n renderOption,\n onMouseEnter,\n onClick = () => null,\n }: IAdditionalOptionItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\n const handleOnMouseEnter = useCallback(() => {\n if (onMouseEnter) {\n onMouseEnter(id);\n }\n }, [onMouseEnter, id]);\n\n return (\n <StyledOption\n ref={hover ? ref : null}\n title={tooltip ? tooltip : name}\n onMouseEnter={handleOnMouseEnter}\n onTouchStart={handleOnMouseEnter}\n className={classnames(\"c-option\", className)}\n hover={hover}\n onClick={onClick}\n >\n <StyledOptionContent>\n {renderOption ? renderOption : name}\n </StyledOptionContent>\n </StyledOption>\n );\n }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledOption = void 0;
|
|
6
|
+
exports.StyledOptionContent = exports.StyledOption = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _BoxSizingStyle = require("../../BoxSizingStyle");
|
|
9
9
|
var _FontStyle = require("../../FontStyle");
|
|
@@ -19,4 +19,9 @@ var StyledOption = exports.StyledOption = _styledComponents.default.li.withConfi
|
|
|
19
19
|
return props.hover && (0, _styledComponents.css)(["background-color:var(--color-theme-200);"]);
|
|
20
20
|
});
|
|
21
21
|
StyledOption.displayName = "StyledOption";
|
|
22
|
+
var StyledOptionContent = exports.StyledOptionContent = _styledComponents.default.span.withConfig({
|
|
23
|
+
displayName: "Styles__StyledOptionContent",
|
|
24
|
+
componentId: "sc-1232l97-1"
|
|
25
|
+
})(["display:flex;align-items:center;width:100%;justify-content:space-between;"]);
|
|
26
|
+
StyledOptionContent.displayName = "StyledOptionContent";
|
|
22
27
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledOption","exports","styled","li","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","hover","css"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n ${tw`tw-select-none tw-font-normal`}\n font-size: 14px;\n display: flex;\n justify-content: space-between;\n height: 28px;\n padding-left: 16px;\n padding-right: 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition-duration: 0.1s;\n color: var(--color-theme-900);\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.hover &&\n css`\n background-color: var(--color-theme-200);\n `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAA4C,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAErC,IAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,QACXC,qBAAG,+CAEF;AAAA,EACJ;AAEDX,YAAY,CAACK,WAAW,GAAG,cAAc"}
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledOption","exports","styled","li","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","hover","css","StyledOptionContent","span"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n ${tw`tw-select-none tw-font-normal`}\n font-size: 14px;\n display: flex;\n justify-content: space-between;\n height: 28px;\n padding-left: 16px;\n padding-right: 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition-duration: 0.1s;\n color: var(--color-theme-900);\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.hover &&\n css`\n background-color: var(--color-theme-200);\n `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n\nexport const StyledOptionContent = styled.span`\n display: flex;\n align-items: center;\n width: 100%;\n justify-content: space-between;\n`;\n\nStyledOptionContent.displayName = \"StyledOptionContent\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAA4C,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAErC,IAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,QACXC,qBAAG,+CAEF;AAAA,EACJ;AAEDX,YAAY,CAACK,WAAW,GAAG,cAAc;AAElC,IAAMO,mBAAmB,GAAAX,OAAA,CAAAW,mBAAA,GAAGV,yBAAM,CAACW,IAAI,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iFAK7C;AAEDM,mBAAmB,CAACP,WAAW,GAAG,qBAAqB"}
|
|
@@ -27,9 +27,9 @@ var useHighlightText = function useHighlightText(text, searchBy) {
|
|
|
27
27
|
var beforeHighlighted = text.substring(0, textComparator.indexOf(searchByComparator));
|
|
28
28
|
var highLighted = text.substring(textComparator.indexOf(searchByComparator), textComparator.indexOf(searchByComparator) + searchBy.length);
|
|
29
29
|
var afterHighlighted = text.substring(textComparator.indexOf(searchByComparator) + searchBy.length);
|
|
30
|
-
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, beforeHighlighted.replace(/ /g, "\u00a0"), /*#__PURE__*/_react.default.createElement(StyledHiglightedText, {
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, beforeHighlighted.replace(/ /g, "\u00a0")), /*#__PURE__*/_react.default.createElement(StyledHiglightedText, {
|
|
31
31
|
className: "c-option--text__highlight"
|
|
32
|
-
}, highLighted.replace(/ /g, "\u00a0")), afterHighlighted.replace(/ /g, "\u00a0"));
|
|
32
|
+
}, highLighted.replace(/ /g, "\u00a0")), /*#__PURE__*/_react.default.createElement("span", null, afterHighlighted.replace(/ /g, "\u00a0")));
|
|
33
33
|
}
|
|
34
34
|
return text;
|
|
35
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHighlightText.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledHiglightedText","styled","span","withConfig","displayName","componentId","useHighlightText","text","searchBy","matchCase","arguments","length","undefined","textComparator","searchByComparator","toLowerCase","indexOf","beforeHighlighted","substring","highLighted","afterHighlighted","createElement","Fragment","replace","className","_default","exports"],"sources":["../../../src/hooks/useHighlightText.tsx"],"sourcesContent":["import React, { Fragment, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nconst StyledHiglightedText = styled.span`\n background-color: var(--color-primary-200);\n`;\n\nStyledHiglightedText.displayName = \"StyledHiglightedText\";\n\nconst useHighlightText = (\n text: string,\n searchBy: string,\n matchCase = false\n): ReactNode => {\n let textComparator = text;\n let searchByComparator = searchBy;\n if (!text) return;\n\n if (!matchCase) {\n textComparator = text.toLowerCase();\n searchByComparator = searchBy.toLowerCase();\n }\n\n if (\n searchBy &&\n textComparator &&\n textComparator.indexOf(searchByComparator) >= 0\n ) {\n const beforeHighlighted = text.substring(\n 0,\n textComparator.indexOf(searchByComparator)\n );\n const highLighted = text.substring(\n textComparator.indexOf(searchByComparator),\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n const afterHighlighted = text.substring(\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n\n return (\n <Fragment>\n {beforeHighlighted.replace(/ /g, \"\\u00a0\")}
|
|
1
|
+
{"version":3,"file":"useHighlightText.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledHiglightedText","styled","span","withConfig","displayName","componentId","useHighlightText","text","searchBy","matchCase","arguments","length","undefined","textComparator","searchByComparator","toLowerCase","indexOf","beforeHighlighted","substring","highLighted","afterHighlighted","createElement","Fragment","replace","className","_default","exports"],"sources":["../../../src/hooks/useHighlightText.tsx"],"sourcesContent":["import React, { Fragment, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nconst StyledHiglightedText = styled.span`\n background-color: var(--color-primary-200);\n`;\n\nStyledHiglightedText.displayName = \"StyledHiglightedText\";\n\nconst useHighlightText = (\n text: string,\n searchBy: string,\n matchCase = false\n): ReactNode => {\n let textComparator = text;\n let searchByComparator = searchBy;\n if (!text) return;\n\n if (!matchCase) {\n textComparator = text.toLowerCase();\n searchByComparator = searchBy.toLowerCase();\n }\n\n if (\n searchBy &&\n textComparator &&\n textComparator.indexOf(searchByComparator) >= 0\n ) {\n const beforeHighlighted = text.substring(\n 0,\n textComparator.indexOf(searchByComparator)\n );\n const highLighted = text.substring(\n textComparator.indexOf(searchByComparator),\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n const afterHighlighted = text.substring(\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n\n return (\n <Fragment>\n <span>{beforeHighlighted.replace(/ /g, \"\\u00a0\")}</span>\n <StyledHiglightedText className=\"c-option--text__highlight\">\n {highLighted.replace(/ /g, \"\\u00a0\")}\n </StyledHiglightedText>\n <span>{afterHighlighted.replace(/ /g, \"\\u00a0\")}</span>\n </Fragment>\n );\n }\n\n return text;\n};\n\nexport default useHighlightText;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EACjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,0BAA0B;IAClC,sBAAsB;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EACjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,0BAA0B;IAClC,sBAAsB;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,MAAM,kGAoClB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef, useCallback } from "react";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
import { StyledOption } from "./Styles";
|
|
3
|
+
import { StyledOption, StyledOptionContent } from "./Styles";
|
|
4
4
|
export const Option = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
5
5
|
let {
|
|
6
6
|
id,
|
|
@@ -25,7 +25,7 @@ export const Option = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
25
25
|
className: classnames("c-option", className),
|
|
26
26
|
hover: hover,
|
|
27
27
|
onClick: onClick
|
|
28
|
-
}, renderOption ? renderOption : name);
|
|
28
|
+
}, /*#__PURE__*/React.createElement(StyledOptionContent, null, renderOption ? renderOption : name));
|
|
29
29
|
});
|
|
30
30
|
Option.displayName = "Option";
|
|
31
31
|
//# sourceMappingURL=Option.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","names":["React","forwardRef","useCallback","classnames","StyledOption","Option","_ref","ref","id","name","tooltip","hover","className","renderOption","onMouseEnter","onClick","handleOnMouseEnter","createElement","title","onTouchStart","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n forwardRef,\n MouseEventHandler,\n ReactNode,\n Ref,\n useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption } from \"./Styles\";\n\nexport interface IOptionItemProps {\n /** Value of option */\n id: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Additional info right-side of name */\n additionalInfo?: string;\n /** image url for Avatar or MultiAvatar */\n image?: string | string[];\n /** Hex color for label */\n color?: string;\n /** Color for chip label */\n chipColor?: string;\n /** Value of mixed */\n mixed?: boolean;\n /** Hide option */\n hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n /** Value of option */\n id?: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Hovered state */\n hover?: boolean;\n /** Class name of option */\n className?: string;\n /** Render option function */\n renderOption?: ReactNode;\n /** On mouse enter callback */\n onMouseEnter?: (e: string | number | undefined) => void;\n /** On mouse click */\n onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n (\n {\n id,\n name,\n tooltip = \"\",\n hover,\n className,\n renderOption,\n onMouseEnter,\n onClick = () => null,\n }: IAdditionalOptionItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\n const handleOnMouseEnter = useCallback(() => {\n if (onMouseEnter) {\n onMouseEnter(id);\n }\n }, [onMouseEnter, id]);\n\n return (\n <StyledOption\n ref={hover ? ref : null}\n title={tooltip ? tooltip : name}\n onMouseEnter={handleOnMouseEnter}\n onTouchStart={handleOnMouseEnter}\n className={classnames(\"c-option\", className)}\n hover={hover}\n onClick={onClick}\n >\n {renderOption ? renderOption : name}\n </StyledOption>\n );\n }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,UAAU,EAIVC,WAAW,QACN,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,YAAY,QAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"Option.js","names":["React","forwardRef","useCallback","classnames","StyledOption","StyledOptionContent","Option","_ref","ref","id","name","tooltip","hover","className","renderOption","onMouseEnter","onClick","handleOnMouseEnter","createElement","title","onTouchStart","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n forwardRef,\n MouseEventHandler,\n ReactNode,\n Ref,\n useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption, StyledOptionContent } from \"./Styles\";\n\nexport interface IOptionItemProps {\n /** Value of option */\n id: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Additional info right-side of name */\n additionalInfo?: string;\n /** image url for Avatar or MultiAvatar */\n image?: string | string[];\n /** Hex color for label */\n color?: string;\n /** Color for chip label */\n chipColor?: string;\n /** Value of mixed */\n mixed?: boolean;\n /** Hide option */\n hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n /** Value of option */\n id?: string | number;\n /** Label of option */\n name: string;\n /** Content for tooltip */\n tooltip?: string;\n /** Hovered state */\n hover?: boolean;\n /** Class name of option */\n className?: string;\n /** Render option function */\n renderOption?: ReactNode;\n /** On mouse enter callback */\n onMouseEnter?: (e: string | number | undefined) => void;\n /** On mouse click */\n onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n (\n {\n id,\n name,\n tooltip = \"\",\n hover,\n className,\n renderOption,\n onMouseEnter,\n onClick = () => null,\n }: IAdditionalOptionItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\n const handleOnMouseEnter = useCallback(() => {\n if (onMouseEnter) {\n onMouseEnter(id);\n }\n }, [onMouseEnter, id]);\n\n return (\n <StyledOption\n ref={hover ? ref : null}\n title={tooltip ? tooltip : name}\n onMouseEnter={handleOnMouseEnter}\n onTouchStart={handleOnMouseEnter}\n className={classnames(\"c-option\", className)}\n hover={hover}\n onClick={onClick}\n >\n <StyledOptionContent>\n {renderOption ? renderOption : name}\n </StyledOptionContent>\n </StyledOption>\n );\n }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,UAAU,EAIVC,WAAW,QACN,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,YAAY,EAAEC,mBAAmB,QAAQ,UAAU;AA0C5D,OAAO,MAAMC,MAAM,gBAAGL,UAAU,CAC9B,CAAAM,IAAA,EAWEC,GAAuB,KACpB;EAAA,IAXH;IACEC,EAAE;IACFC,IAAI;IACJC,OAAO,GAAG,EAAE;IACZC,KAAK;IACLC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,OAAO,GAAGA,CAAA,KAAM;EACU,CAAC,GAAAT,IAAA;EAG7B,MAAMU,kBAAkB,GAAGf,WAAW,CAAC,MAAM;IAC3C,IAAIa,YAAY,EAAE;MAChBA,YAAY,CAACN,EAAE,CAAC;IAClB;EACF,CAAC,EAAE,CAACM,YAAY,EAAEN,EAAE,CAAC,CAAC;EAEtB,oBACET,KAAA,CAAAkB,aAAA,CAACd,YAAY;IACXI,GAAG,EAAEI,KAAK,GAAGJ,GAAG,GAAG,IAAK;IACxBW,KAAK,EAAER,OAAO,GAAGA,OAAO,GAAGD,IAAK;IAChCK,YAAY,EAAEE,kBAAmB;IACjCG,YAAY,EAAEH,kBAAmB;IACjCJ,SAAS,EAAEV,UAAU,CAAC,UAAU,EAAEU,SAAS,CAAE;IAC7CD,KAAK,EAAEA,KAAM;IACbI,OAAO,EAAEA;EAAQ,gBAEjBhB,KAAA,CAAAkB,aAAA,CAACb,mBAAmB,QACjBS,YAAY,GAAGA,YAAY,GAAGJ,IACZ,CACT,CAAC;AAEnB,CACF,CAAC;AAEDJ,MAAM,CAACe,WAAW,GAAG,QAAQ"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export declare const StyledOption: import("styled-components").StyledComponent<"li", any, {
|
|
2
2
|
hover?: boolean | undefined;
|
|
3
3
|
}, never>;
|
|
4
|
+
export declare const StyledOptionContent: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
4
5
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;SAyBxB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;SAyBxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
|
|
@@ -9,4 +9,9 @@ export const StyledOption = styled.li.withConfig({
|
|
|
9
9
|
"fontWeight": "400"
|
|
10
10
|
}, FontStyle, BoxSizingStyle, props => props.hover && css(["background-color:var(--color-theme-200);"]));
|
|
11
11
|
StyledOption.displayName = "StyledOption";
|
|
12
|
+
export const StyledOptionContent = styled.span.withConfig({
|
|
13
|
+
displayName: "Styles__StyledOptionContent",
|
|
14
|
+
componentId: "sc-1232l97-1"
|
|
15
|
+
})(["display:flex;align-items:center;width:100%;justify-content:space-between;"]);
|
|
16
|
+
StyledOptionContent.displayName = "StyledOptionContent";
|
|
12
17
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledOption","li","withConfig","displayName","componentId","props","hover"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n ${tw`tw-select-none tw-font-normal`}\n font-size: 14px;\n display: flex;\n justify-content: space-between;\n height: 28px;\n padding-left: 16px;\n padding-right: 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition-duration: 0.1s;\n color: var(--color-theme-900);\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.hover &&\n css`\n background-color: var(--color-theme-200);\n `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,IACXT,GAAG,8CAEF,CACJ;AAEDG,YAAY,CAACG,WAAW,GAAG,cAAc"}
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledOption","li","withConfig","displayName","componentId","props","hover","StyledOptionContent","span"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n ${tw`tw-select-none tw-font-normal`}\n font-size: 14px;\n display: flex;\n justify-content: space-between;\n height: 28px;\n padding-left: 16px;\n padding-right: 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition-duration: 0.1s;\n color: var(--color-theme-900);\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.hover &&\n css`\n background-color: var(--color-theme-200);\n `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n\nexport const StyledOptionContent = styled.span`\n display: flex;\n align-items: center;\n width: 100%;\n justify-content: space-between;\n`;\n\nStyledOptionContent.displayName = \"StyledOptionContent\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,IACXT,GAAG,8CAEF,CACJ;AAEDG,YAAY,CAACG,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMI,mBAAmB,GAAGX,MAAM,CAACY,IAAI,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iFAK7C;AAEDG,mBAAmB,CAACJ,WAAW,GAAG,qBAAqB"}
|
|
@@ -20,9 +20,9 @@ const useHighlightText = function (text, searchBy, matchCase) {
|
|
|
20
20
|
const beforeHighlighted = text.substring(0, textComparator.indexOf(searchByComparator));
|
|
21
21
|
const highLighted = text.substring(textComparator.indexOf(searchByComparator), textComparator.indexOf(searchByComparator) + searchBy.length);
|
|
22
22
|
const afterHighlighted = text.substring(textComparator.indexOf(searchByComparator) + searchBy.length);
|
|
23
|
-
return /*#__PURE__*/React.createElement(Fragment, null, beforeHighlighted.replace(/ /g, "\u00a0"), /*#__PURE__*/React.createElement(StyledHiglightedText, {
|
|
23
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", null, beforeHighlighted.replace(/ /g, "\u00a0")), /*#__PURE__*/React.createElement(StyledHiglightedText, {
|
|
24
24
|
className: "c-option--text__highlight"
|
|
25
|
-
}, highLighted.replace(/ /g, "\u00a0")), afterHighlighted.replace(/ /g, "\u00a0"));
|
|
25
|
+
}, highLighted.replace(/ /g, "\u00a0")), /*#__PURE__*/React.createElement("span", null, afterHighlighted.replace(/ /g, "\u00a0")));
|
|
26
26
|
}
|
|
27
27
|
return text;
|
|
28
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHighlightText.js","names":["React","Fragment","styled","StyledHiglightedText","span","withConfig","displayName","componentId","useHighlightText","text","searchBy","matchCase","textComparator","searchByComparator","toLowerCase","indexOf","beforeHighlighted","substring","highLighted","length","afterHighlighted","createElement","replace","className"],"sources":["../../../src/hooks/useHighlightText.tsx"],"sourcesContent":["import React, { Fragment, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nconst StyledHiglightedText = styled.span`\n background-color: var(--color-primary-200);\n`;\n\nStyledHiglightedText.displayName = \"StyledHiglightedText\";\n\nconst useHighlightText = (\n text: string,\n searchBy: string,\n matchCase = false\n): ReactNode => {\n let textComparator = text;\n let searchByComparator = searchBy;\n if (!text) return;\n\n if (!matchCase) {\n textComparator = text.toLowerCase();\n searchByComparator = searchBy.toLowerCase();\n }\n\n if (\n searchBy &&\n textComparator &&\n textComparator.indexOf(searchByComparator) >= 0\n ) {\n const beforeHighlighted = text.substring(\n 0,\n textComparator.indexOf(searchByComparator)\n );\n const highLighted = text.substring(\n textComparator.indexOf(searchByComparator),\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n const afterHighlighted = text.substring(\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n\n return (\n <Fragment>\n {beforeHighlighted.replace(/ /g, \"\\u00a0\")}
|
|
1
|
+
{"version":3,"file":"useHighlightText.js","names":["React","Fragment","styled","StyledHiglightedText","span","withConfig","displayName","componentId","useHighlightText","text","searchBy","matchCase","textComparator","searchByComparator","toLowerCase","indexOf","beforeHighlighted","substring","highLighted","length","afterHighlighted","createElement","replace","className"],"sources":["../../../src/hooks/useHighlightText.tsx"],"sourcesContent":["import React, { Fragment, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nconst StyledHiglightedText = styled.span`\n background-color: var(--color-primary-200);\n`;\n\nStyledHiglightedText.displayName = \"StyledHiglightedText\";\n\nconst useHighlightText = (\n text: string,\n searchBy: string,\n matchCase = false\n): ReactNode => {\n let textComparator = text;\n let searchByComparator = searchBy;\n if (!text) return;\n\n if (!matchCase) {\n textComparator = text.toLowerCase();\n searchByComparator = searchBy.toLowerCase();\n }\n\n if (\n searchBy &&\n textComparator &&\n textComparator.indexOf(searchByComparator) >= 0\n ) {\n const beforeHighlighted = text.substring(\n 0,\n textComparator.indexOf(searchByComparator)\n );\n const highLighted = text.substring(\n textComparator.indexOf(searchByComparator),\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n const afterHighlighted = text.substring(\n textComparator.indexOf(searchByComparator) + searchBy.length\n );\n\n return (\n <Fragment>\n <span>{beforeHighlighted.replace(/ /g, \"\\u00a0\")}</span>\n <StyledHiglightedText className=\"c-option--text__highlight\">\n {highLighted.replace(/ /g, \"\\u00a0\")}\n </StyledHiglightedText>\n <span>{afterHighlighted.replace(/ /g, \"\\u00a0\")}</span>\n </Fragment>\n );\n }\n\n return text;\n};\n\nexport default useHighlightText;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAmB,OAAO;AAElD,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,MAAMC,oBAAoB,GAAGD,MAAM,CAACE,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAEvC;AAEDJ,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AAEzD,MAAME,gBAAgB,GAAG,SAAAA,CACvBC,IAAY,EACZC,QAAgB,EAChBC,SAAS,EACK;EAAA,IADdA,SAAS;IAATA,SAAS,GAAG,KAAK;EAAA;EAEjB,IAAIC,cAAc,GAAGH,IAAI;EACzB,IAAII,kBAAkB,GAAGH,QAAQ;EACjC,IAAI,CAACD,IAAI,EAAE;EAEX,IAAI,CAACE,SAAS,EAAE;IACdC,cAAc,GAAGH,IAAI,CAACK,WAAW,CAAC,CAAC;IACnCD,kBAAkB,GAAGH,QAAQ,CAACI,WAAW,CAAC,CAAC;EAC7C;EAEA,IACEJ,QAAQ,IACRE,cAAc,IACdA,cAAc,CAACG,OAAO,CAACF,kBAAkB,CAAC,IAAI,CAAC,EAC/C;IACA,MAAMG,iBAAiB,GAAGP,IAAI,CAACQ,SAAS,CACtC,CAAC,EACDL,cAAc,CAACG,OAAO,CAACF,kBAAkB,CAC3C,CAAC;IACD,MAAMK,WAAW,GAAGT,IAAI,CAACQ,SAAS,CAChCL,cAAc,CAACG,OAAO,CAACF,kBAAkB,CAAC,EAC1CD,cAAc,CAACG,OAAO,CAACF,kBAAkB,CAAC,GAAGH,QAAQ,CAACS,MACxD,CAAC;IACD,MAAMC,gBAAgB,GAAGX,IAAI,CAACQ,SAAS,CACrCL,cAAc,CAACG,OAAO,CAACF,kBAAkB,CAAC,GAAGH,QAAQ,CAACS,MACxD,CAAC;IAED,oBACEnB,KAAA,CAAAqB,aAAA,CAACpB,QAAQ,qBACPD,KAAA,CAAAqB,aAAA,eAAOL,iBAAiB,CAACM,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAQ,CAAC,eACxDtB,KAAA,CAAAqB,aAAA,CAAClB,oBAAoB;MAACoB,SAAS,EAAC;IAA2B,GACxDL,WAAW,CAACI,OAAO,CAAC,IAAI,EAAE,QAAQ,CACf,CAAC,eACvBtB,KAAA,CAAAqB,aAAA,eAAOD,gBAAgB,CAACE,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAQ,CAC9C,CAAC;EAEf;EAEA,OAAOb,IAAI;AACb,CAAC;AAED,eAAeD,gBAAgB"}
|
package/dist/index.js
CHANGED
|
@@ -17072,6 +17072,11 @@
|
|
|
17072
17072
|
return props.hover && styled.css(["background-color:var(--color-theme-200);"]);
|
|
17073
17073
|
});
|
|
17074
17074
|
StyledOption.displayName = "StyledOption";
|
|
17075
|
+
var StyledOptionContent = styled__default["default"].span.withConfig({
|
|
17076
|
+
displayName: "Styles__StyledOptionContent",
|
|
17077
|
+
componentId: "sc-1232l97-1"
|
|
17078
|
+
})(["display:flex;align-items:center;width:100%;justify-content:space-between;"]);
|
|
17079
|
+
StyledOptionContent.displayName = "StyledOptionContent";
|
|
17075
17080
|
|
|
17076
17081
|
var StyledAutocompleteScrollShadow = styled__default["default"](ScrollShadow).withConfig({
|
|
17077
17082
|
displayName: "Styles__StyledAutocompleteScrollShadow",
|
|
@@ -17116,9 +17121,9 @@
|
|
|
17116
17121
|
var beforeHighlighted = text.substring(0, textComparator.indexOf(searchByComparator));
|
|
17117
17122
|
var highLighted = text.substring(textComparator.indexOf(searchByComparator), textComparator.indexOf(searchByComparator) + searchBy.length);
|
|
17118
17123
|
var afterHighlighted = text.substring(textComparator.indexOf(searchByComparator) + searchBy.length);
|
|
17119
|
-
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, beforeHighlighted.replace(/ /g, "\u00a0"), /*#__PURE__*/React__default["default"].createElement(StyledHiglightedText, {
|
|
17124
|
+
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", null, beforeHighlighted.replace(/ /g, "\u00a0")), /*#__PURE__*/React__default["default"].createElement(StyledHiglightedText, {
|
|
17120
17125
|
className: "c-option--text__highlight"
|
|
17121
|
-
}, highLighted.replace(/ /g, "\u00a0")), afterHighlighted.replace(/ /g, "\u00a0"));
|
|
17126
|
+
}, highLighted.replace(/ /g, "\u00a0")), /*#__PURE__*/React__default["default"].createElement("span", null, afterHighlighted.replace(/ /g, "\u00a0")));
|
|
17122
17127
|
}
|
|
17123
17128
|
return text;
|
|
17124
17129
|
};
|
|
@@ -17150,7 +17155,7 @@
|
|
|
17150
17155
|
className: classNames__default["default"]("c-option", className),
|
|
17151
17156
|
hover: hover,
|
|
17152
17157
|
onClick: onClick
|
|
17153
|
-
}, renderOption ? renderOption : name);
|
|
17158
|
+
}, /*#__PURE__*/React__default["default"].createElement(StyledOptionContent, null, renderOption ? renderOption : name));
|
|
17154
17159
|
});
|
|
17155
17160
|
Option.displayName = "Option";
|
|
17156
17161
|
|