slim-select 2.5.1 → 2.7.0

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', () => {

package/src/slim-select/render.ts

@@ -6,7 +6,7 @@ export interface Callbacks {
   open: () => void
   close: () => void
   addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null
-  setSelected: (value: string[], runAfterChange: boolean) => void
+  setSelected: (value: string | string[], runAfterChange: boolean) => void
   addOption: (option: Option) => void
   search: (search: string) => void
   beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void
@@ -230,7 +230,10 @@ export default class Render {
 
     // Add id to data-id
     main.dataset.id = this.settings.id
-    main.id = this.settings.id
+    // main.id = this.settings.id+'-main' // Remove for now as it is not needed
+
+    // Add label
+    main.setAttribute('aria-label', this.settings.ariaLabel)
 
     // Set tabable to allow tabbing to the element
     main.tabIndex = 0
@@ -238,7 +241,7 @@ export default class Render {
     // Deal with keyboard events on the main div
     // This is to allow for normal selecting
     // when you may not have a search bar
-    main.onkeydown = (e: KeyboardEvent) => {
+    main.onkeydown = (e: KeyboardEvent): boolean => {
       // Convert above if else statemets to switch
       switch (e.key) {
         case 'ArrowUp':
@@ -261,10 +264,12 @@ export default class Render {
           this.callbacks.close()
           return false
       }
+
+      return false
     }
 
     // Add onclick for main div
-    main.onclick = (e: Event) => {
+    main.onclick = (e: Event): void => {
       // Dont do anything if disabled
       if (this.settings.disabled) {
         return
@@ -314,7 +319,11 @@ export default class Render {
           this.callbacks.setSelected([], false)
           this.updateDeselectAll()
         } else {
-          this.callbacks.setSelected([''], false)
+          // Get first option and set it as selected
+          const firstOption = this.store.getFirstOption()
+          const value = firstOption ? firstOption.value : ''
+
+          this.callbacks.setSelected(value, false)
         }
 
         // Check if we need to close the dropdown
@@ -324,7 +333,7 @@ export default class Render {
 
         // Run afterChange callback
         if (this.callbacks.afterChange) {
-          this.callbacks.afterChange(after)
+          this.callbacks.afterChange(this.store.getSelectedOptions())
         }
       }
     }
@@ -624,7 +633,7 @@ export default class Render {
 
     // Add id to data-id
     main.dataset.id = this.settings.id
-    main.id = this.settings.id
+    // main.id = this.settings.id + '-content' // Remove for now as it is not needed
 
     // Add search
     const search = this.searchDiv()
@@ -696,7 +705,7 @@ export default class Render {
     }, 100)
 
     // Deal with keyboard events on search input field
-    input.onkeydown = (e: KeyboardEvent) => {
+    input.onkeydown = (e: KeyboardEvent): boolean => {
       // Convert above if else statemets to switch
       switch (e.key) {
         case 'ArrowUp':
@@ -727,6 +736,8 @@ export default class Render {
           }
           return true
       }
+
+      return true // Allow normal typing
     }
 
     main.appendChild(input)
@@ -867,15 +878,34 @@ export default class Render {
 
     // If length is 1, highlight it
     if (options.length === 1) {
-      // Check if option doesnt already has highlighted class
+      // Check if option doesnt already have highlighted class
       if (!options[0].classList.contains(this.classes.highlighted)) {
         options[0].classList.add(this.classes.highlighted)
         return
       }
     }
 
+    // Loop through options and see if there are no highlighted ones
+    let highlighted = false
+    for (const o of options) {
+      if (o.classList.contains(this.classes.highlighted)) {
+        highlighted = true
+      }
+    }
+
+    // If no highlighted, see if any are selected and if so highlight selected first one
+    if (!highlighted) {
+      for (const o of options) {
+        if (o.classList.contains(this.classes.selected)) {
+          o.classList.add(this.classes.highlighted)
+          break
+        }
+      }
+    }
+
     // Loop through options and find the highlighted one
     for (let i = 0; i < options.length; i++) {
+      // Found highlighted option
       if (options[i].classList.contains(this.classes.highlighted)) {
         const prevOption = options[i]
         // Remove highlighted class from current one
@@ -1005,7 +1035,7 @@ export default class Render {
 
           // Add select all text span
           const selectAllText = document.createElement('span')
-          selectAllText.textContent = 'Select All'
+          selectAllText.textContent = d.selectAllText
           selectAll.appendChild(selectAllText)
 
           // Create new svg for checkbox
@@ -1051,7 +1081,16 @@ export default class Render {
               // Put together new list with all options in this optgroup
               const newSelected = currentSelected.concat(d.options.map((o) => o.value))
 
+              // Loop through options and if they don't exist in the store
+              // run addOption callback
+              for (const o of d.options) {
+                if (!this.store.getOptionByID(o.id)) {
+                  this.callbacks.addOption(o)
+                }
+              }
+
               this.callbacks.setSelected(newSelected, true)
+              return
             }
           })
 

package/src/slim-select/select.ts

@@ -17,8 +17,9 @@ export default class Select {
   constructor(select: HTMLSelectElement) {
     this.select = select
 
+    this.valueChange = this.valueChange.bind(this)
     // Add change event listener
-    this.select.addEventListener('change', this.valueChange.bind(this), {
+    this.select.addEventListener('change', this.valueChange, {
       // allow bubbling of event
       passive: true,
     })
@@ -160,6 +161,7 @@ export default class Select {
       id: optgroup.id,
       label: optgroup.label,
       selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
+      selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
       closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
       options: [],
     } as OptgroupOptional
@@ -360,7 +362,7 @@ export default class Select {
     this.changeListen(false)
 
     // Remove event change listener
-    this.select.removeEventListener('change', this.valueChange.bind(this))
+    this.select.removeEventListener('change', this.valueChange)
 
     // Disconnect observer and null
     if (this.observer) {

package/src/slim-select/settings.ts

@@ -17,6 +17,7 @@ export default class Settings {
   public disabled: boolean
   public alwaysOpen: boolean
   public showSearch: boolean
+  public ariaLabel: string
   public searchPlaceholder: string
   public searchText: string
   public searchingText: string
@@ -47,6 +48,7 @@ export default class Settings {
     this.disabled = settings.disabled !== undefined ? settings.disabled : false
     this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false
     this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true
+    this.ariaLabel = settings.ariaLabel || 'Combobox'
     this.searchPlaceholder = settings.searchPlaceholder || 'Search'
     this.searchText = settings.searchText || 'No Results'
     this.searchingText = settings.searchingText || 'Searching...'

package/src/slim-select/slimselect.scss

@@ -9,6 +9,7 @@
   --ss-highlight-color: #fffb8c;
   --ss-success-color: #00b755;
   --ss-error-color: #dc3545;
+  --ss-focus-color: #5897fb;
 
   // Heights
   --ss-main-height: 30px;
@@ -71,7 +72,7 @@
   overflow: hidden;
 
   &:focus {
-    box-shadow: 0 0 5px var(--ss-primary-color);
+    box-shadow: 0 0 5px var(--ss-focus-color);
   }
 
   &.ss-disabled {
@@ -303,7 +304,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 5px var(--ss-primary-color);
+        box-shadow: 0 0 5px var(--ss-focus-color);
       }
     }
 

package/src/slim-select/store.ts

@@ -12,6 +12,7 @@ export interface OptgroupOptional {
   id?: string
   label: string // Required
   selectAll?: boolean
+  selectAllText?: string
   closable?: 'off' | 'open' | 'close'
   options?: OptionOptional[]
 }
@@ -20,6 +21,7 @@ export class Optgroup {
   public id: string
   public label: string
   public selectAll: boolean
+  public selectAllText: string
   public closable: 'off' | 'open' | 'close'
   public options: Option[]
 
@@ -27,6 +29,7 @@ export class Optgroup {
     this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id
     this.label = optgroup.label || ''
     this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll
+    this.selectAllText = optgroup.selectAllText || 'Select All'
     this.closable = optgroup.closable || 'off'
 
     // If options exist, loop through options and create new option class
@@ -281,6 +284,26 @@ export default class Store {
     return options.length ? options[0] : null
   }
 
+  public getSelectType(): string {
+    return this.selectType
+  }
+
+  public getFirstOption(): Option | null {
+    let option: Option | null = null
+    for (let dataObj of this.data) {
+      if (dataObj instanceof Optgroup) {
+        option = dataObj.options[0]
+      } else if (dataObj instanceof Option) {
+        option = dataObj
+      }
+
+      if (option) {
+        break
+      }
+    }
+    return option
+  }
+
   // Take in search string and return filtered list of values
   public search(search: string, searchFilter: (opt: Option, search: string) => boolean): DataArray {
     search = search.trim()
@@ -339,7 +362,4 @@ export default class Store {
     return dataSearch
   }
 
-  public getSelectType(): string {
-    return this.selectType
-  }
 }

package/src/vue/dist/slim-select/helpers.d.ts

@@ -1,5 +1,5 @@
-export declare function generateID(): string;
-export declare function hasClassInTree(element: HTMLElement, className: string): any;
-export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
-export declare function isEqual(a: any, b: any): boolean;
-export declare function kebabCase(str: string): string;
+export declare function generateID(): string;
+export declare function hasClassInTree(element: HTMLElement, className: string): any;
+export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
+export declare function isEqual(a: any, b: any): boolean;
+export declare function kebabCase(str: string): string;