@constructor-io/constructorio-ui-autocomplete 1.2.1 → 1.2.2

package/README.md

@@ -106,13 +106,13 @@ By default, importing react components or hooks from this library does not pull
 If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
 
 ```js
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 ```
 
 > Note: the path and syntax in this example may change slightly depending on your module bundling strategy
 
  - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
- - To opt out of all default styling, do not import the `Autocomplete.css` stylesheet.
+ - To opt out of all default styling, do not import the `styles.css` stylesheet.
  - All starter styles in this library are scoped within the `.cio-autocomplete` css selector.
  - These starter styles are intended to be extended by layering in your own css rules
 - If you like, you can override the container's className like so:

package/lib/cjs/constants.js

@@ -125,12 +125,12 @@ By default, importing react components or hooks from this library does not pull
 If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
 
 \`
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 \`
 
 <i></i>
 
-- To opt out of all default styling, do not import the \`Autocomplete.css\` stylesheet.
+- To opt out of all default styling, do not import the \`styles.css\` stylesheet.
 - The path and syntax in the example above may change depending on your module bundling strategy
 - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
 - All starter styles in this library are scoped within the \`.cio-autocomplete\` css selector.

package/lib/mjs/constants.js

@@ -121,12 +121,12 @@ By default, importing react components or hooks from this library does not pull
 If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
 
 \`
-import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 \`
 
 <i></i>
 
-- To opt out of all default styling, do not import the \`Autocomplete.css\` stylesheet.
+- To opt out of all default styling, do not import the \`styles.css\` stylesheet.
 - The path and syntax in the example above may change depending on your module bundling strategy
 - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
 - All starter styles in this library are scoped within the \`.cio-autocomplete\` css selector.

package/lib/types/constants.d.ts

@@ -22,4 +22,4 @@ export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) =>
 export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";
 export declare const openOnFocusDescription = "Use `openOnFocus: false` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field";
 export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
-export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `Autocomplete.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .Products p {\n  padding: 5px 5px 0;\n}\n```\n";
+export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport '@constructor-io/constructorio-ui-autocomplete/styles.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `styles.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .Products p {\n  padding: 5px 5px 0;\n}\n```\n";

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
   "exports": {
+    "./styles.css": "./lib/styles.css",
     ".": {
       "import": "./lib/mjs/index.js",
       "require": "./lib/cjs/index.js"
@@ -14,7 +15,7 @@
   "types": "lib/types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext js,ts,jsx,tsx",
-    "copy-files": "copyfiles -u 1 src/**/*.css lib/cjs && copyfiles -u 1 src/**/*.css lib/mjs",
+    "copy-styles": "cp src/styles.css lib/styles.css",
     "prepare": "husky install",
     "dev": "storybook dev -p 6006",
     "storybook:ci": "storybook dev --ci --quiet -p 6006",
@@ -24,7 +25,7 @@
     "build-storybook": "storybook build -o 'docs'",
     "serve-built-storybook": "npx http-server docs",
     "version": "npm run build-storybook && git add -u ./docs && git add ./docs/* && npm run compile",
-    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-files"
+    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles"
   },
   "author": "constructor.io",
   "license": "MIT",
@@ -58,7 +59,6 @@
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
-    "copyfiles": "^2.4.1",
     "downshift": "^7.0.5",
     "eslint": "^8.23.1",
     "eslint-config-airbnb": "^19.0.4",

package/lib/mjs/components/Autocomplete/Autocomplete.css

@@ -1,110 +0,0 @@
-/* Autosuggest Container */
-.cio-autocomplete {
-  position: relative;
-  height: 2rem;
-  padding: 20px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-/* Autosuggest Form */
-.cio-autocomplete .cio-form {
-  position: relative;
-  height: 100%;
-  width: 24rem;
-}
-
-.cio-autocomplete .cio-input {
-  width: 100%;
-  height: 100%;
-  border: 1px solid gray;
-  padding: 0 10px;
-  border-radius: 3px;
-  font-size: 1rem;
-}
-
-.cio-autocomplete .cio-submit-btn,
-.cio-autocomplete .cio-clear-btn {
-  position: absolute;
-  top: 1px;
-  bottom: -1px;
-  right: -21px;
-  cursor: pointer;
-}
-
-.cio-autocomplete button:disabled {
-  cursor: not-allowed;
-}
-
-.cio-autocomplete .cio-submit-btn {
-  right: -21px;
-}
-
-.cio-autocomplete .cio-clear-btn {
-  right: 10px;
-}
-
-.cio-autocomplete .cio-icon {
-  display: flex;
-  justify-content: center;
-}
-
-/* Autosuggest Results */
-.cio-autocomplete .cio-results {
-  position: absolute;
-  background-color: white;
-  gap: 20px;
-  padding-left: 0px;
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  z-index: 1000;
-  margin-top: 5px;
-}
-
-.cio-autocomplete .cio-sectionName {
-  margin: 15px 0;
-  font-size: 1rem;
-}
-
-.cio-autocomplete .cio-section-items {
-  padding: 0;
-}
-
-.cio-autocomplete .cio-item-SearchSuggestions {
-  flex-direction: column;
-  min-width: 160px;
-}
-
-.cio-autocomplete .cio-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  list-style: none;
-  padding: 5px;
-  border-bottom: 3px solid transparent;
-}
-
-.cio-autocomplete .cio-item[aria-selected='true'] {
-  background-color: hsl(0, 0%, 90%);
-  border-radius: 4px;
-}
-
-.cio-autocomplete .Products .cio-item {
-  display: inline-flex;
-  align-items: center;
-  width: 25%;
-  height: 140px;
-  padding: 5px 0;
-}
-
-.cio-autocomplete .cio-item p {
-  margin: 0;
-  overflow: hidden;
-}
-
-.cio-autocomplete .cio-item img {
-  width: 100%;
-  max-width: 100px;
-  max-height: 100px;
-}