slim-select 2.6.0 → 2.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
@@ -18,8 +18,9 @@
   "sass": "src/slim-select/slimselect.scss",
   "exports": {
     ".": {
+      "import": "./dist/slimselect.js",
       "require": "./dist/slimselect.umd.js",
-      "import": "./dist/slimselect.es.js"
+      "types": "./dist/*.d.ts"
     },
     "./styles": "./dist/slimselect.css"
   },
@@ -49,34 +50,58 @@
     "build:frameworks": "npm run build --workspaces",
     "test": "jest"
   },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "devDependencies": {
-    "@jest/globals": "^29.6.1",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.2",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@jest/globals": "^29.7.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@slim-select/vue": "workspace:src/vue",
-    "@types/downloadjs": "^1.4.3",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@types/downloadjs": "^1.4.6",
+    "@vitejs/plugin-vue": "^4.5.0",
     "clipboard": "^2.0.11",
     "downloadjs": "^1.4.7",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
-    "prettier": "^2.8.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.1.0",
     "prismjs": "^1.29.0",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.26.2",
-    "rollup-plugin-typescript2": "^0.35.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.5.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.63.6",
-    "ts-jest": "^29.1.1",
-    "tslib": "^2.6.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
-    "vue-tsc": "^1.8.4",
-    "vuex": "^4.0.2"
+    "sass": "^1.59.2",
+    "ts-jest": "^29.0.5",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "vue-tsc": "^1.2.0",
+    "vuex": "^4.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-canvas-mock": "^2.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "vite-plugin-dts": "^2.3.0"
   }
 }

package/src/react/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/src/react/.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true, node: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['prettier', 'react-refresh'],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-extra-semi': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-invalid-void-type': 'off',
+  },
+}

package/src/react/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slim Select React</title>
+  </head>
+  <body>
+    <div id="react-root">
+      <div id="react-hide"></div>
+    </div>
+    <script type="module" src="/src/frameworkpage.tsx"></script>
+  </body>
+</html>

package/src/react/jestconfig.json

@@ -0,0 +1,11 @@
+{
+  "transform": {
+    "^.+\\.(t|j)sx?$": "ts-jest"
+  },
+  "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+  "testEnvironment": "jsdom",
+  "moduleNameMapper": {
+    "\\.(css|scss)$": "identity-obj-proxy"
+  }
+}

package/src/react/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@slim-select/react",
+  "private": false,
+  "description": "React integration",
+  "version": "1.0.0",
+  "keywords": [
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brianvoe/slim-select.git"
+  },
+  "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
+  "homepage": "https://slimselectjs.com/frameworks#vue",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "jest --config jestconfig.json",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs"
+  },
+  "main": "dist/slimselectreact.ssr.js",
+  "browser": "dist/slimselect.global.js",
+  "module": "dist/slimselectreact.es.js",
+  "types": "dist/slimselect.react.d.ts",
+  "files": [
+    "dist"
+  ]
+}

package/src/react/src/frameworkpage.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { SlimSelect } from '.'
+import { useState } from 'react'
+
+const ShowComponent = () => {
+  const [simpleSingle, setSimpleSingle] = useState('2')
+  const [simpleMultiple, setSimpleMultiple] = useState(['2', '3'])
+
+  return (
+    <div id="react" className="content">
+      <h2 className="header">React</h2>
+      <h3>Install</h3>
+      <p>
+        The react component is in a sub package under SlimSelect. All functionality still work in the implementation.
+      </p>
+      <div className="code-toolbar">
+        <pre className="language-bash">
+          <code>npm install @slim-select/react</code>
+        </pre>
+      </div>
+      <br />
+      <h3>Simple example</h3>
+      <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
+        <div style={{ flex: 0.5 }}>
+          <strong>Value</strong> {simpleSingle}
+          <SlimSelect
+            modelValue={simpleSingle}
+            events={{ afterChange: (values) => setSimpleSingle(values[0].value as unknown as string) }}
+            style={{ marginLeft: '5px' }}
+            ref={null}
+          >
+            <option value="all">All</option>
+            <option value={'1'}>Option 1</option>
+            <option value={'2'}>Option 2</option>
+            <option value={'3'}>Option 3</option>
+          </SlimSelect>
+        </div>
+        <div style={{ flex: 0.6, marginLeft: 15 }}>
+          <div>
+            <strong>Value</strong> {JSON.stringify(simpleMultiple)}
+          </div>
+          <SlimSelect
+            modelValue={simpleMultiple}
+            ref={null}
+            multiple={true}
+            events={{ afterChange: (values) => setSimpleMultiple(values.map((v) => v.value) as unknown as string[]) }}
+          >
+            <option value={'1'}>Option 1</option>
+            <option value={'2'}>Option 2</option>
+            <option value={'3'}>Value 3</option>
+          </SlimSelect>
+        </div>
+      </div>
+      <div className="code-toolbar">
+        <pre className="language-javascript">
+          <code className="language-javascript">
+            import React from &quot;react&quot; <br />
+            import SlimSelect from &quot;@slim-select/react&quot; <br />
+            import {`{`} useState {`}`} from &quot;react&quot;
+            <br />
+            <br />
+            export default MySelect = () {`=>`} {`{`}
+            <br />
+            const [simpleSingle, setSimpleSingle] = useState(&quot;2&quot;) <br />
+            return ( <br />
+            &lt;SlimSelect <br />
+            modelValue= {`{`}simpleSingle{`}`}
+            <br />
+            events={`{{ afterChange: (values) => setSimpleSingle(values[0].value as unknown as string) }}`}
+            &gt; <br />
+            &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt; <br />
+            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt; <br />
+            &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt; <br />
+            &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt; <br />
+            &lt;/SlimSelect&gt; <br /> ){`}`}
+          </code>
+        </pre>
+      </div>
+
+      <br />
+      <div className="separator"></div>
+      <br />
+
+      <h3>Attributes</h3>
+      <p>There are certain attributes that are reactive to changes</p>
+
+      <h4>disabled</h4>
+      <SlimSelect settings={{ disabled: true }}>
+        <option value={'1'}>Option 1</option>
+        <option value={'2'}>Option 2</option>
+        <option value={'3'}>Value 3</option>
+      </SlimSelect>
+      <div className="code-toolbar">
+        <pre className="language-javascript">
+          <code className="language-javascript">
+            import React from &quot;react&quot; <br />
+            import SlimSelect from &quot;@slim-select/react&quot; <br />
+            import {`{`} useState {`}`} from &quot;react&quot;
+            <br />
+            <br />
+            export default MySelect = () {`=>`} {`{`}
+            <br />
+            const [simpleSingle, setSimpleSingle] = useState(&quot;2&quot;) <br />
+            return ( <br />
+            &lt;SlimSelect <br />
+            settings={`{`}
+            {`{`}disabled: true {`}`}
+            {`}`}&gt;
+            <br />
+            &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt; <br />
+            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt; <br />
+            &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt; <br />
+            &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt; <br />
+            &lt;/SlimSelect&gt; <br /> ){`}`}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}
+const timeout = document.getElementById('app') ? 100 : 0
+;(function () {
+  const interval = window.setInterval(() => {
+    if (document.getElementById('react-root') != null && document.getElementById('react-hide') != null) {
+      ReactDOM.createRoot(document.getElementById('react-root') as HTMLElement).render(
+        <React.StrictMode>
+          <ShowComponent />
+        </React.StrictMode>,
+      )
+    }
+  }, timeout)
+})()

package/src/react/src/index.ts

@@ -0,0 +1,3 @@
+import SlimSelect, { SlimSelectProps, SlimSelectRef } from './slimselect'
+export { SlimSelect }
+export type { SlimSelectProps, SlimSelectRef }

package/src/react/src/slimselect.tsx

@@ -0,0 +1,148 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
+import { useEffect } from 'react'
+
+import SlimSelect, { Events, Config } from '../../slim-select'
+import { SettingsPartial } from '../../slim-select/settings'
+import { DataArrayPartial, Option } from '../../slim-select/store'
+import '../../slim-select/slimselect.scss'
+
+export type SlimSelectProps = {
+  style?: React.CSSProperties
+  id?: string | undefined
+  modelValue?: string | string[] | undefined
+  multiple?: boolean
+  data?: DataArrayPartial
+  settings?: SettingsPartial
+  events?: Events
+  children?: React.ReactNode
+}
+export interface SlimSelectRef {
+  set: (newValue: string | string[]) => void
+  // Potentially call other functions on SlimSelect that have not been exposed via Ref yet
+  getSlimSelectInstance: () => SlimSelect
+}
+
+const SlimSelectComponent = (props: SlimSelectProps, ref: React.Ref<any>): JSX.Element => {
+  const { id = undefined, modelValue, style = {}, multiple = false, data, settings, events, children } = props
+
+  const slimHTMLElement = useRef(null)
+  const slimSelect = useRef<SlimSelect>()
+  const value = useRef<any>()
+
+  useEffect(() => {
+    const config = {
+      select: slimHTMLElement.current as unknown as Element,
+      events: {},
+    } as Config
+
+    // If data is passed in, use it
+    if (data) {
+      config.data = data
+    }
+    // If settings are passed in, use it
+    if (settings) {
+      config.settings = settings
+    }
+    // If events are passed in, use it
+    if (events) {
+      config.events = events
+    }
+    // Satisfy tsc
+    if (config.events == undefined) {
+      config.events = {}
+    }
+
+    // Wrap config.events.afterChange to run value update
+    const originalPropAfterChange = config.events.afterChange
+
+    config.events.afterChange = function (newSelectedOption: Option[]): void {
+      if (Array.isArray(newSelectedOption) && newSelectedOption.length > 0) {
+        const stringValue = multiple ? newSelectedOption.map((option) => option.value) : newSelectedOption[0].value
+        if (value.current !== stringValue) {
+          value.current = stringValue
+        }
+        // If they had an original afterChange, run it
+        if (config.events && originalPropAfterChange && typeof originalPropAfterChange === 'function') {
+          originalPropAfterChange(newSelectedOption)
+        }
+      }
+    }
+
+    // Initialize SlimSelect
+    slimSelect.current = new SlimSelect(config)
+
+    // Get SlimSelect selected values
+    const selected = multiple
+      ? (slimSelect.current as SlimSelect).getSelected()
+      : (slimSelect.current as SlimSelect).getSelected()[0]
+
+    // Check if modelValue is the same as the value of the select
+    if (selected !== modelValue && modelValue) {
+      // If not, set the value of the select to the modelValue
+      ;(slimSelect.current as SlimSelect).setSelected(modelValue)
+    }
+
+    // Destroy SlimSelect on unmount
+    return () => {
+      if (slimSelect.current) {
+        ;(slimSelect.current as SlimSelect)?.destroy()
+      }
+    }
+  }, [modelValue, multiple, data, settings, events, children])
+
+  const getCleanValue = useCallback(
+    (val: string | string[] | undefined): string | string[] => {
+      const multi = multiple
+
+      // If its multiple and the modelValue is a string, return an array with the string
+      if (typeof val === 'string') {
+        return multi ? [val] : val
+      }
+
+      // If its not multiple and the modelValue is an array, return the first item
+      if (Array.isArray(val)) {
+        return multi ? val : val[0]
+      }
+
+      return multi ? [] : ''
+    },
+    [multiple],
+  )
+
+  useEffect(() => {
+    if (modelValue) {
+      ;(slimSelect.current as SlimSelect)?.setSelected(getCleanValue(modelValue))
+    }
+  }, [modelValue, getCleanValue])
+
+  useEffect(() => {
+    if (data) {
+      ;(slimSelect.current as SlimSelect)?.setData(data)
+    }
+  }, [data])
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        set(newValue: string | string[]): void {
+          ;(slimSelect.current as SlimSelect)?.setSelected(newValue)
+        },
+        getSlimSelectInstance(): SlimSelect {
+          return slimSelect.current as SlimSelect
+        },
+      } as SlimSelectRef
+    },
+    [],
+  )
+
+  return (
+    <>
+      <select style={style} id={id} data-testid={id} multiple={multiple} ref={slimHTMLElement}>
+        {children}
+      </select>
+    </>
+  )
+}
+
+export default forwardRef(SlimSelectComponent)

package/src/react/tests/slimselect.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+
+import 'jest-canvas-mock'
+
+import SlimSelectComponent from '../src/slimselect'
+
+describe('Slim Select', () => {
+  console.log(React.version)
+  it('renders successfully', () => {
+    const { queryByTestId, queryAllByText, getByText } = render(
+      <SlimSelectComponent id="slimselect" ref={null} multiple={true}>
+        <option value={'value1'}>Value 1</option>
+        <option value={'value2'}>Value 2</option>
+        <option value={'value3'}>Value 3</option>
+      </SlimSelectComponent>,
+    )
+    expect(queryByTestId('slimselect')).not.toEqual(null)
+    expect(queryByTestId('slimselect')).not.toBeVisible()
+    expect(getByText('Select Value')).not.toEqual(null)
+    expect(queryAllByText('Value 1')[1].getAttribute('aria-selected')).toEqual('false')
+    expect(queryAllByText('Value 2')[1].getAttribute('aria-selected')).toEqual('false')
+    expect(queryAllByText('Value 3')[1].getAttribute('aria-selected')).toEqual('false')
+  })
+  it('can be selected with onchange callback', async () => {
+    const { queryAllByText } = render(
+      <SlimSelectComponent id="slimselect" ref={null} multiple={true}>
+        <option value={'value1'}>Value 1</option>
+        <option value={'value2'}>Value 2</option>
+        <option value={'value3'}>Value 3</option>
+      </SlimSelectComponent>,
+    )
+
+    // First original html select element gets hidden, after comes slimselect div - that is why array index = 1
+    const firstSlimOption = queryAllByText('Value 1')[1]
+    const thirdSlimOpption = queryAllByText('Value 3')[1]
+
+    expect(firstSlimOption).not.toBeUndefined()
+    expect(thirdSlimOpption).not.toBeUndefined()
+
+    await userEvent.click(firstSlimOption as HTMLElement)
+    await userEvent.click(thirdSlimOpption as HTMLElement)
+
+    expect(queryAllByText('Select Value')).toHaveLength(0)
+    expect(queryAllByText('Value 1')[1].getAttribute('aria-selected')).toEqual('true')
+    expect(queryAllByText('Value 2')[1].getAttribute('aria-selected')).toEqual('false')
+    expect(queryAllByText('Value 3')[1].getAttribute('aria-selected')).toEqual('true')
+  })
+})

package/src/react/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "exclude": ["dist", "node_modules"],
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    //"rootDir": "./src",
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
+  },
+  "include": ["./src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/src/react/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/src/react/vite.config.ts

@@ -0,0 +1,55 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { babel } from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import dts from 'vite-plugin-dts'
+
+const formatNameMap = {
+  iife: 'global',
+  cjs: 'ssr',
+  es: 'es',
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      skipDiagnostics: true,
+    }),
+  ],
+  build: {
+    target: 'modules',
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: 'src/index.ts',
+      formats: ['es', 'cjs', 'iife'],
+      name: 'SlimSelectReact',
+      // the proper extensions will be added
+      fileName: (format) => `slimselectreact.${formatNameMap[format]}.js`,
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      // external: ['react', 'react-dom'],
+      plugins: [
+        peerDepsExternal(),
+        babel({
+          babelHelpers: 'bundled',
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+          exclude: '../../node_modules/',
+        }),
+        commonjs(),
+      ],
+      output: {
+        // for externalized deps
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+})

package/src/slim-select/index.test.ts

@@ -5,8 +5,8 @@
 'use strict'
 import { describe, expect, test } from '@jest/globals'
 import SlimSelect from './'
-import { OptionOptional } from 'src/vue/dist/slim-select/store'
-import { Config } from 'src/vue/dist/slim-select'
+import { OptionOptional } from './store'
+import { Config } from './index'
 
 describe('SlimSelect Module', () => {
   test('constructor', () => {