@synerise/ds-search 1.5.9 → 1.5.10

package/dist/Search.styles.js

@@ -1,93 +1,90 @@
-import styled, { keyframes } from 'styled-components';
-import { ANIMATION_DURATION, LABEL_LEFT_OFFSET, MAX_FILTER_WIDTH } from './const';
-export var openDropdownAnimation = keyframes(["0%{opacity:0;overflow:hidden;}50%{opacity:0;overflow:hidden;}100%{opacity:1;}"]);
-export var SearchInputWrapper = styled.div.withConfig({
+import styled, { keyframes } from "styled-components";
+import { MAX_FILTER_WIDTH, ANIMATION_DURATION, LABEL_LEFT_OFFSET } from "./const.js";
+const openDropdownAnimation = /* @__PURE__ */ keyframes(["0%{opacity:0;overflow:hidden;}50%{opacity:0;overflow:hidden;}100%{opacity:1;}"]);
+const SearchInputWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__SearchInputWrapper",
   componentId: "sc-1w8jj1b-0"
 })(["position:relative;direction:rtl;overflow-x:hidden;overflow-y:hidden;height:32px;"]);
-export var SearchWrapper = styled.div.withConfig({
+const SearchWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__SearchWrapper",
   componentId: "sc-1w8jj1b-1"
-})(["", ";position:relative;direction:rtl;"], function (props) {
-  return !!props.$width && "\n   " + (props.inputOpen ? "width:" + props.$width + "px;" : "width:32px") + ";\n  ";
-});
-export var LeftSide = styled.span.withConfig({
+})(["", ";position:relative;direction:rtl;"], (props) => !!props.$width && `
+   ${props.inputOpen ? `width:${props.$width}px;` : `width:32px`};
+  `);
+const LeftSide = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Searchstyles__LeftSide",
   componentId: "sc-1w8jj1b-2"
-})(["position:absolute;z-index:1;height:100%;align-items:center;display:", ";left:4px;"], function (props) {
-  return props.isOpen ? 'flex' : 'none';
-});
-export var Filter = styled.div.withConfig({
+})(["position:absolute;z-index:1;height:100%;align-items:center;display:", ";left:4px;"], (props) => props.isOpen ? "flex" : "none");
+const Filter = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__Filter",
   componentId: "sc-1w8jj1b-3"
-})(["display:flex;align-items:center;color:", ";font-weight:500;max-width:", "px;direction:ltr;position:relative;padding-right:2px;span{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;}&::after{content:':';}.ds-icon{margin-left:4px;}svg{fill:", ";}"], function (props) {
-  return props.theme.palette['blue-600'];
-}, MAX_FILTER_WIDTH, function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var Icon = styled.div.withConfig({
+})(["display:flex;align-items:center;color:", ";font-weight:500;max-width:", "px;direction:ltr;position:relative;padding-right:2px;span{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;}&::after{content:':';}.ds-icon{margin-left:4px;}svg{fill:", ";}"], (props) => props.theme.palette["blue-600"], MAX_FILTER_WIDTH, (props) => props.theme.palette["blue-600"]);
+const Icon = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__Icon",
   componentId: "sc-1w8jj1b-4"
 })(["padding:0 4px 0 8px;"]);
-export var Label = styled.div.withConfig({
+const Label = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__Label",
   componentId: "sc-1w8jj1b-5"
-})(["font-size:13px;font-weight:500;color:", ";"], function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var SearchButton = styled.div.withConfig({
+})(["font-size:13px;font-weight:500;color:", ";"], (props) => props.theme.palette["blue-600"]);
+const SearchButton = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__SearchButton",
   componentId: "sc-1w8jj1b-6"
-})(["position:absolute;", ";z-index:1;top:0;right:0;transition:width 0.5s ease-in-out;svg{fill:", " !important;}.btn-search-open:hover{background:transparent !important;}&&{", " button{padding:4px;transition:padding-right 0.15s ease-in-out,background 0.2s ease-in-out;", "}}"], function (props) {
-  return !props.clickable && "pointer-events:none !important;";
-}, function (props) {
-  return props.inputFocused && props.isOpen ? props.theme.palette['blue-600'] : props.theme.palette['grey-600'];
-}, function (props) {
-  return !!props.isOpen && "\n    .btn-focus{\n       border-color: transparent;\n       box-shadow: none;\n    }\n    ";
-}, function (props) {
-  return !props.clickable && "pointer-events:none !important;";
-});
-export var SearchInner = styled.div.withConfig({
+})(["position:absolute;", ";z-index:1;top:0;right:0;transition:width 0.5s ease-in-out;svg{fill:", " !important;}.btn-search-open:hover{background:transparent !important;}&&{", " button{padding:4px;transition:padding-right 0.15s ease-in-out,background 0.2s ease-in-out;", "}}"], (props) => !props.clickable && `pointer-events:none !important;`, (props) => props.inputFocused && props.isOpen ? props.theme.palette["blue-600"] : props.theme.palette["grey-600"], (props) => !!props.isOpen && `
+    .btn-focus{
+       border-color: transparent;
+       box-shadow: none;
+    }
+    `, (props) => !props.clickable && `pointer-events:none !important;`);
+const SearchInner = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__SearchInner",
   componentId: "sc-1w8jj1b-7"
-})(["direction:ltr;margin-bottom:0;", " input::placeholder{line-height:1.29;}"], function (props) {
-  return (props.hasValue || props.alwaysHighlight) && "\n  input, input:hover{\n        box-shadow: inset 0 0 0 1px " + props.theme.palette['blue-600'] + ";\n        border-color: " + props.theme.palette['blue-600'] + ";\n        background-color: " + props.theme.palette['blue-050'] + ";\n   }\n   \n  ";
-});
-export var SearchInputContent = styled.div.withConfig({
+})(["direction:ltr;margin-bottom:0;", " input::placeholder{line-height:1.29;}"], (props) => (props.hasValue || props.alwaysHighlight) && `
+  input, input:hover{
+        box-shadow: inset 0 0 0 1px ${props.theme.palette["blue-600"]};
+        border-color: ${props.theme.palette["blue-600"]};
+        background-color: ${props.theme.palette["blue-050"]};
+   }
+   
+  `);
+const SearchInputContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__SearchInputContent",
   componentId: "sc-1w8jj1b-8"
-})(["overflow:hidden;direction:rtl;transition:width ", "s ease-in-out;width:0;input{opacity:0;height:32px;}input.ant-input{transition:padding-left 0s ease-in-out !important;}&.is-open{width:100%;overflow:visible;input{color:", ";padding-left:", ";padding-right:30px;opacity:1;}}"], ANIMATION_DURATION, function (props) {
-  return props.theme.palette['grey-700'];
-}, function (props) {
-  return props.filterLabel && props.offset ? Math.round(props.offset + LABEL_LEFT_OFFSET) + "px" : '12px';
-});
-export var ClearButton = styled.div.withConfig({
+})(["overflow:hidden;direction:rtl;transition:width ", "s ease-in-out;width:0;input{opacity:0;height:32px;}input.ant-input{transition:padding-left 0s ease-in-out !important;}&.is-open{width:100%;overflow:visible;input{color:", ";padding-left:", ";padding-right:30px;opacity:1;}}"], ANIMATION_DURATION, (props) => props.theme.palette["grey-700"], (props) => props.filterLabel && props.offset ? `${Math.round(props.offset + LABEL_LEFT_OFFSET)}px` : "12px");
+const ClearButton = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__ClearButton",
   componentId: "sc-1w8jj1b-9"
 })(["position:absolute;z-index:1;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px 0 10px;"]);
-export var SearchDropdownContent = styled.div.withConfig({
+const SearchDropdownContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__SearchDropdownContent",
   componentId: "sc-1w8jj1b-10"
-})(["position:absolute;top:40px;background:", ";max-height:", ";direction:ltr;opacity:0;display:none;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);box-sizing:border-box;transition:opacity 0.5s ease-in-out,width 0.5s ease-in-out;.ps__rail-y{.ps__thumb-y{transform:translateX(1px) !important;}}"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.maxHeight + "px";
-});
-export var MenuHeader = styled.div.withConfig({
+})(["position:absolute;top:40px;background:", ";max-height:", ";direction:ltr;opacity:0;display:none;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);box-sizing:border-box;transition:opacity 0.5s ease-in-out,width 0.5s ease-in-out;.ps__rail-y{.ps__thumb-y{transform:translateX(1px) !important;}}"], (props) => props.theme.palette.white, (props) => `${props.maxHeight}px`);
+const MenuHeader = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__MenuHeader",
   componentId: "sc-1w8jj1b-11"
-})(["display:flex;align-items:center;font-size:10px;font-weight:500;text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"], function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var HeaderIconWrapper = styled.div.withConfig({
+})(["display:flex;align-items:center;font-size:10px;font-weight:500;text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"], (props) => props.theme.palette["grey-500"]);
+const HeaderIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__HeaderIconWrapper",
   componentId: "sc-1w8jj1b-12"
-})(["& > .ds-icon > svg{fill:", ";}"], function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var SearchDropdownWrapper = styled.div.withConfig({
+})(["& > .ds-icon > svg{fill:", ";}"], (props) => props.theme.palette["grey-400"]);
+const SearchDropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Searchstyles__SearchDropdownWrapper",
   componentId: "sc-1w8jj1b-13"
-})(["width:0;& > .search-list-open{width:", ";animation:", " 0.3s ease-in-out 0s 1;opacity:1;display:initial;padding:8px 0 8px 8px;z-index:10;}"], function (props) {
-  return props.dropdownWidth ? props.dropdownWidth + "px" : '100%';
-}, openDropdownAnimation);
+})(["width:0;& > .search-list-open{width:", ";animation:", " 0.3s ease-in-out 0s 1;opacity:1;display:initial;padding:8px 0 8px 8px;z-index:10;}"], (props) => props.dropdownWidth ? `${props.dropdownWidth}px` : "100%", openDropdownAnimation);
+export {
+  ClearButton,
+  Filter,
+  HeaderIconWrapper,
+  Icon,
+  Label,
+  LeftSide,
+  MenuHeader,
+  SearchButton,
+  SearchDropdownContent,
+  SearchDropdownWrapper,
+  SearchInner,
+  SearchInputContent,
+  SearchInputWrapper,
+  SearchWrapper,
+  openDropdownAnimation
+};

package/dist/Search.types.d.ts

@@ -1,7 +1,7 @@
-import { type InputProps } from 'antd/lib/input';
-import type React from 'react';
-import { type ListProps } from 'react-window';
-import { type TooltipProps } from '@synerise/ds-tooltip';
+import { InputProps } from 'antd/lib/input';
+import { default as React } from 'react';
+import { ListProps } from '../../../../config/vitest/__mocks__/reactWindowMock.js';
+import { TooltipProps } from '@synerise/ds-tooltip';
 export type AnyObject = Record<string, any>;
 export type DataSetProps = {
     itemRender: (item: any) => JSX.Element;

package/dist/Search.types.js

@@ -1,7 +1,8 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-export var SelectResultDataKeys = /*#__PURE__*/function (SelectResultDataKeys) {
-  SelectResultDataKeys["RECENT"] = "recent";
-  SelectResultDataKeys["SUGGESTIONS"] = "suggestions";
-  return SelectResultDataKeys;
-}({});
+var SelectResultDataKeys = /* @__PURE__ */ ((SelectResultDataKeys2) => {
+  SelectResultDataKeys2["RECENT"] = "recent";
+  SelectResultDataKeys2["SUGGESTIONS"] = "suggestions";
+  return SelectResultDataKeys2;
+})(SelectResultDataKeys || {});
+export {
+  SelectResultDataKeys
+};

package/dist/const.js

@@ -1,7 +1,16 @@
-export var MENU_WIDTH_OFFSET = 17;
-export var INPUT_EXPAND_ANIMATION_DURATION = 100;
-export var SCROLLBAR_HEIGHT_OFFSET = 28;
-export var LIST_HEADER_HEIGHT = 42;
-export var LABEL_LEFT_OFFSET = 7;
-export var ANIMATION_DURATION = INPUT_EXPAND_ANIMATION_DURATION / 1000;
-export var MAX_FILTER_WIDTH = 120;
+const MENU_WIDTH_OFFSET = 17;
+const INPUT_EXPAND_ANIMATION_DURATION = 100;
+const SCROLLBAR_HEIGHT_OFFSET = 28;
+const LIST_HEADER_HEIGHT = 42;
+const LABEL_LEFT_OFFSET = 7;
+const ANIMATION_DURATION = INPUT_EXPAND_ANIMATION_DURATION / 1e3;
+const MAX_FILTER_WIDTH = 120;
+export {
+  ANIMATION_DURATION,
+  INPUT_EXPAND_ANIMATION_DURATION,
+  LABEL_LEFT_OFFSET,
+  LIST_HEADER_HEIGHT,
+  MAX_FILTER_WIDTH,
+  MENU_WIDTH_OFFSET,
+  SCROLLBAR_HEIGHT_OFFSET
+};

package/dist/index.js

@@ -1,2 +1,14 @@
-export { default } from './Search';
-export * from './Elements';
+import { Search } from "./Search.js";
+import { default as default2 } from "./Elements/SearchInput/SearchInput.js";
+import { default as default3 } from "./Elements/SearchHeader/SearchHeader.js";
+import { default as default4, default as default5, renderSearchList } from "./Elements/SearchItems/SearchItems.js";
+import { default as default6 } from "./Elements/SearchButton/SearchButton.js";
+export {
+  default6 as SearchButton,
+  default3 as SearchHeader,
+  default2 as SearchInput,
+  default4 as SearchItemList,
+  default5 as SearchItems,
+  Search as default,
+  renderSearchList
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "description": "Search UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,13 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.17",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-list-item": "^1.4.9",
-    "@synerise/ds-menu": "^1.4.12",
-    "@synerise/ds-scrollbar": "^1.2.16",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-list-item": "^1.4.10",
+    "@synerise/ds-menu": "^1.4.13",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1",
     "react-onclickoutside": "^6.9.0",
     "react-window": "^1.8.11"
   },
@@ -51,5 +51,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }