@equinor/cpl-compact-autocomplete 0.0.1

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Equinor ASA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+[<-- Go back](../../README.md)
+
+# @equinor/cpl-compact-autocomplete
+
+## Installation
+
+```sh
+yarn add @equinor/cpl-compact-autocomplete
+```

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AutocompleteProps } from '@equinor/eds-core-react';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+import * as styled_components from 'styled-components';
+import * as react from 'react';
+
+interface CompactAutocompleteProps<T> extends Omit<AutocompleteProps<T>, 'ref'> {
+}
+declare function CompactAutocomplete<T>({ id, label, ...props }: CompactAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+
+declare const CompactAutocompleteLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+
+declare const CompactAutocompleteWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+
+export { CompactAutocomplete, CompactAutocompleteLabel, type CompactAutocompleteProps, CompactAutocompleteWrapper };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AutocompleteProps } from '@equinor/eds-core-react';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+import * as styled_components from 'styled-components';
+import * as react from 'react';
+
+interface CompactAutocompleteProps<T> extends Omit<AutocompleteProps<T>, 'ref'> {
+}
+declare function CompactAutocomplete<T>({ id, label, ...props }: CompactAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+
+declare const CompactAutocompleteLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+
+declare const CompactAutocompleteWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+
+export { CompactAutocomplete, CompactAutocompleteLabel, type CompactAutocompleteProps, CompactAutocompleteWrapper };

package/dist/index.js

@@ -0,0 +1,172 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CompactAutocomplete: () => CompactAutocomplete,
+  CompactAutocompleteLabel: () => CompactAutocompleteLabel,
+  CompactAutocompleteWrapper: () => CompactAutocompleteWrapper
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/CompactAutocomplete.tsx
+var import_eds_core_react = require("@equinor/eds-core-react");
+var import_eds_tokens2 = require("@equinor/eds-tokens");
+var import_react = require("react");
+var import_styled_components3 = __toESM(require("styled-components"));
+
+// src/CompactAutocompleteLabel.tsx
+var import_eds_tokens = require("@equinor/eds-tokens");
+var import_styled_components = __toESM(require("styled-components"));
+var CompactAutocompleteLabel = import_styled_components.default.label`
+  align-self: stretch;
+
+  display: flex;
+  align-items: center;
+  padding: 0;
+
+  font-weight: 400;
+
+  background-color: ${import_eds_tokens.tokens.colors.interactive.disabled__fill.rgba};
+
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
+
+  border-top-left-radius: 10rem;
+  border-bottom-left-radius: 10rem;
+`;
+
+// src/CompactAutocompleteWrapper.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var CompactAutocompleteWrapper = import_styled_components2.default.div`
+  display: flex;
+  align-items: center;
+
+  --font-size: 0.75rem;
+
+  font-size: var(--font-size);
+`;
+
+// src/CompactAutocomplete.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CompactAutocomplete(_a) {
+  var _b = _a, { id, label } = _b, props = __objRest(_b, ["id", "label"]);
+  const autocompleteId = (0, import_react.useMemo)(() => id != null ? id : crypto.randomUUID(), [id]);
+  const labelId = (0, import_react.useMemo)(() => crypto.randomUUID(), []);
+  const { multiple, optionLabel, selectedOptions } = props;
+  const placeholder = (0, import_react.useMemo)(() => {
+    if (!multiple) {
+      return void 0;
+    }
+    const selectedLabels = optionLabel ? selectedOptions == null ? void 0 : selectedOptions.map((option) => optionLabel(option)) : selectedOptions;
+    return selectedLabels == null ? void 0 : selectedLabels.join(", ");
+  }, [multiple, optionLabel, selectedOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CompactAutocompleteWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompactAutocompleteLabel, { id: labelId, htmlFor: autocompleteId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CPLAutocompleteWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_eds_core_react.Autocomplete,
+      __spreadValues({
+        id: autocompleteId,
+        label: null,
+        "aria-labelledby": labelId,
+        placeholder
+      }, props)
+    ) })
+  ] });
+}
+var CPLAutocompleteWrapper = import_styled_components3.default.div`
+  div:has(input) {
+    box-shadow: none;
+    background-color: ${import_eds_tokens2.tokens.colors.ui.background__light.rgba};
+    border-top-right-radius: 10rem;
+    border-bottom-right-radius: 10rem;
+  }
+
+  & input {
+    font-size: inherit;
+    font-weight: 400;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 0.5rem;
+    padding-left: 0.5rem;
+    line-height: 1;
+
+    &::placeholder {
+      color: inherit;
+    }
+  }
+
+  // Override right padding of button placement
+  & input + div {
+    padding-right: 0.25rem;
+  }
+
+  & button {
+    // Change icon color
+    color: ${import_eds_tokens2.tokens.colors.text.static_icons__default.rgba};
+
+    & svg {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CompactAutocomplete,
+  CompactAutocompleteLabel,
+  CompactAutocompleteWrapper
+});

package/dist/index.mjs

@@ -0,0 +1,136 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/CompactAutocomplete.tsx
+import { Autocomplete } from "@equinor/eds-core-react";
+import { tokens as tokens2 } from "@equinor/eds-tokens";
+import { useMemo } from "react";
+import styled3 from "styled-components";
+
+// src/CompactAutocompleteLabel.tsx
+import { tokens } from "@equinor/eds-tokens";
+import styled from "styled-components";
+var CompactAutocompleteLabel = styled.label`
+  align-self: stretch;
+
+  display: flex;
+  align-items: center;
+  padding: 0;
+
+  font-weight: 400;
+
+  background-color: ${tokens.colors.interactive.disabled__fill.rgba};
+
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
+
+  border-top-left-radius: 10rem;
+  border-bottom-left-radius: 10rem;
+`;
+
+// src/CompactAutocompleteWrapper.tsx
+import styled2 from "styled-components";
+var CompactAutocompleteWrapper = styled2.div`
+  display: flex;
+  align-items: center;
+
+  --font-size: 0.75rem;
+
+  font-size: var(--font-size);
+`;
+
+// src/CompactAutocomplete.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CompactAutocomplete(_a) {
+  var _b = _a, { id, label } = _b, props = __objRest(_b, ["id", "label"]);
+  const autocompleteId = useMemo(() => id != null ? id : crypto.randomUUID(), [id]);
+  const labelId = useMemo(() => crypto.randomUUID(), []);
+  const { multiple, optionLabel, selectedOptions } = props;
+  const placeholder = useMemo(() => {
+    if (!multiple) {
+      return void 0;
+    }
+    const selectedLabels = optionLabel ? selectedOptions == null ? void 0 : selectedOptions.map((option) => optionLabel(option)) : selectedOptions;
+    return selectedLabels == null ? void 0 : selectedLabels.join(", ");
+  }, [multiple, optionLabel, selectedOptions]);
+  return /* @__PURE__ */ jsxs(CompactAutocompleteWrapper, { children: [
+    /* @__PURE__ */ jsx(CompactAutocompleteLabel, { id: labelId, htmlFor: autocompleteId, children: label }),
+    /* @__PURE__ */ jsx(CPLAutocompleteWrapper, { children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      __spreadValues({
+        id: autocompleteId,
+        label: null,
+        "aria-labelledby": labelId,
+        placeholder
+      }, props)
+    ) })
+  ] });
+}
+var CPLAutocompleteWrapper = styled3.div`
+  div:has(input) {
+    box-shadow: none;
+    background-color: ${tokens2.colors.ui.background__light.rgba};
+    border-top-right-radius: 10rem;
+    border-bottom-right-radius: 10rem;
+  }
+
+  & input {
+    font-size: inherit;
+    font-weight: 400;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 0.5rem;
+    padding-left: 0.5rem;
+    line-height: 1;
+
+    &::placeholder {
+      color: inherit;
+    }
+  }
+
+  // Override right padding of button placement
+  & input + div {
+    padding-right: 0.25rem;
+  }
+
+  & button {
+    // Change icon color
+    color: ${tokens2.colors.text.static_icons__default.rgba};
+
+    & svg {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+`;
+export {
+  CompactAutocomplete,
+  CompactAutocompleteLabel,
+  CompactAutocompleteWrapper
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@equinor/cpl-compact-autocomplete",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "dependencies": {
+    "@equinor/eds-icons": "^0.21.0",
+    "@equinor/eds-tokens": "^0.9.2"
+  },
+  "devDependencies": {
+    "@equinor/eds-core-react": "^0.42.1",
+    "@storybook/react": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.11",
+    "tsup": "^8.1.0",
+    "eslint-config-custom": "0.0.5",
+    "tsconfig": "0.0.1"
+  },
+  "peerDependencies": {
+    "@equinor/eds-core-react": ">=0.42.1",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "styled-components": ">=5.3.11"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "lint": "TIMING=1 eslint . --fix"
+  }
+}