@kokoccc/vuetify 1.0.1

package/src/util/__tests__/helpers.spec.ts

@@ -0,0 +1,470 @@
+import {
+  deepEqual,
+  getNestedValue,
+  getPropertyFromItem,
+  convertToUnit,
+  getSlotType,
+  arrayDiff,
+  getObjectValueByPath,
+  humanReadableFileSize,
+  sortItems,
+  createSimpleFunctional,
+  normalizeClasses,
+} from '../helpers'
+import { mount } from '@vue/test-utils'
+import { defineComponent, createApp, h } from 'vue'
+
+describe('createSimpleFunctional', () => {
+  it('should render with a custom tag', () => {
+    const component = createSimpleFunctional('v-test', 'pre')
+    const wrapper = mount(component)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('should render with a user-defined tag', () => {
+    const component = createSimpleFunctional('v-test', 'pre')
+    const wrapper = mount(component, {
+      props: { tag: 'h1' },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
+
+describe('helpers', () => {
+  it('should return set difference of arrays A and B', () => {
+    expect(arrayDiff(['one', 'two'], ['one'])).toEqual([])
+    expect(arrayDiff(['one'], ['one', 'two'])).toEqual(['two'])
+    expect(arrayDiff([], [])).toEqual([])
+    expect(arrayDiff([], ['one'])).toEqual(['one'])
+    expect(arrayDiff(['one'], ['two'])).toEqual(['two'])
+    expect(arrayDiff(['one', 'two'], ['one', 'three'])).toEqual(['three'])
+  })
+
+  it('should pass comparison', () => { // eslint-disable-line max-statements
+    // Null
+    expect(deepEqual(null, null)).toEqual(true)
+    expect(deepEqual(null, undefined)).toEqual(false)
+    expect(deepEqual(null, false)).toEqual(false)
+    expect(deepEqual(null, 0)).toEqual(false)
+    expect(deepEqual(null, '')).toEqual(false)
+    expect(deepEqual(null, [])).toEqual(false)
+    expect(deepEqual(null, {})).toEqual(false)
+
+    // Undefined
+    expect(deepEqual(undefined, undefined)).toEqual(true)
+    expect(deepEqual(undefined, null)).toEqual(false)
+    expect(deepEqual(undefined, false)).toEqual(false)
+    expect(deepEqual(undefined, 0)).toEqual(false)
+    expect(deepEqual(undefined, '')).toEqual(false)
+    expect(deepEqual(undefined, [])).toEqual(false)
+    expect(deepEqual(undefined, {})).toEqual(false)
+
+    // Boolean
+    expect(deepEqual(true, true)).toEqual(true)
+    expect(deepEqual(true, false)).toEqual(false)
+    expect(deepEqual(true, undefined)).toEqual(false)
+    expect(deepEqual(true, null)).toEqual(false)
+    expect(deepEqual(true, 0)).toEqual(false)
+    expect(deepEqual(true, 1)).toEqual(false)
+    expect(deepEqual(true, '')).toEqual(false)
+    expect(deepEqual(true, 'abc')).toEqual(false)
+    expect(deepEqual(true, [1, 2])).toEqual(false)
+    expect(deepEqual(true, { x: 1 })).toEqual(false)
+
+    expect(deepEqual(false, false)).toEqual(true)
+    expect(deepEqual(false, true)).toEqual(false)
+    expect(deepEqual(false, undefined)).toEqual(false)
+    expect(deepEqual(false, null)).toEqual(false)
+    expect(deepEqual(false, 0)).toEqual(false)
+    expect(deepEqual(false, 1)).toEqual(false)
+    expect(deepEqual(false, '')).toEqual(false)
+    expect(deepEqual(false, 'abc')).toEqual(false)
+    expect(deepEqual(false, [1, 2])).toEqual(false)
+    expect(deepEqual(false, { x: 1 })).toEqual(false)
+
+    // Number
+    expect(deepEqual(5, 5)).toEqual(true)
+    expect(deepEqual(8, 8.0)).toEqual(true)
+    expect(deepEqual(8, '8')).toEqual(false)
+    expect(deepEqual(-10, -10)).toEqual(true)
+
+    expect(deepEqual(0, '')).toEqual(false)
+    expect(deepEqual(0, false)).toEqual(false)
+    expect(deepEqual(0, null)).toEqual(false)
+    expect(deepEqual(0, undefined)).toEqual(false)
+
+    // String
+    expect(deepEqual('', '')).toEqual(true)
+    expect(deepEqual('a', 'a')).toEqual(true)
+    expect(deepEqual('a', 'b')).toEqual(false)
+    expect(deepEqual('a', 'A')).toEqual(false)
+    expect(deepEqual('abc', 'abc')).toEqual(true)
+    expect(deepEqual('Abc', 'abc')).toEqual(false)
+    expect(deepEqual(' ', '')).toEqual(false)
+
+    // Array
+    expect(deepEqual([], [])).toEqual(true)
+    expect(deepEqual([1], [1.0])).toEqual(true)
+    expect(deepEqual([1, '2'], [1, '2'])).toEqual(true)
+    expect(deepEqual([1, { x: 1, y: 2 }], [1, { x: 1, y: 2 }])).toEqual(true)
+    expect(deepEqual([1, { x: 1, y: null }], [1, { x: 1, y: false }])).toEqual(false)
+    expect(deepEqual([1, [1, 2]], [1, [1, 2]])).toEqual(true)
+
+    // Object
+    expect(deepEqual({}, {})).toEqual(true)
+    expect(deepEqual({ x: 1 }, { x: 1 })).toEqual(true)
+    expect(deepEqual({ x: 1 }, {})).toEqual(false)
+    expect(deepEqual({ x: { a: 1, b: 2 } }, { x: { a: 1, b: 2 } })).toEqual(true)
+
+    // Date
+    const currentDate = new Date()
+    const futureDate = new Date(1000)
+
+    expect(deepEqual(currentDate, currentDate)).toEqual(true)
+    expect(deepEqual({ date: currentDate }, { date: currentDate })).toEqual(true)
+    expect(deepEqual(currentDate, futureDate)).toEqual(false)
+    expect(deepEqual({ date: currentDate }, { date: futureDate })).toEqual(false)
+
+    const circular = {} // eslint-disable-line sonarjs/prefer-object-literal
+    circular.me = circular
+
+    expect(deepEqual({ r: circular }, { r: circular })).toEqual(true)
+    expect(deepEqual({ r: circular, x: 1 }, { r: circular, x: 2 })).toEqual(false)
+    expect(deepEqual({ r: [circular] }, { r: [circular] })).toEqual(true)
+  })
+
+  it('should get value directly on object if not undefined', () => {
+    const obj = {
+      a: 'foo',
+      'b.a': 'foobar',
+      b: {
+        a: 1,
+      },
+      'c.d': undefined,
+      c: {
+        d: 'bar',
+      },
+    }
+
+    expect(getObjectValueByPath(obj, 'a')).toEqual('foo')
+    expect(getObjectValueByPath(obj, 'b.a')).toEqual('foobar')
+    expect(getObjectValueByPath(obj, 'c.d')).toEqual('bar')
+  })
+
+  it('should get nested value', () => {
+    const obj = {
+      a: {
+        b: {
+          c: 1,
+          d: 2,
+        },
+        e: [
+          { f: 'f' },
+          'e1',
+        ],
+      },
+      g: null,
+    }
+
+    expect(getNestedValue(obj, ['a', 'b', 'c'])).toEqual(1)
+    expect(getNestedValue(obj, ['a', 'b', 'd'])).toEqual(2)
+    expect(getNestedValue(obj, ['a', 'b'])).toEqual({ c: 1, d: 2 })
+    expect(getNestedValue(obj, ['a', 'e', '0', 'f'])).toEqual('f')
+    expect(getNestedValue(obj, ['a', 'e', 0, 'f'])).toEqual('f')
+    expect(getNestedValue(obj, ['a', 'e', '1'])).toEqual('e1')
+    expect(getNestedValue(obj, ['g'])).toBeNull()
+    expect(getNestedValue(obj, ['missing', 'key'])).toBeUndefined()
+
+    const arr = ['val', obj]
+
+    expect(getNestedValue(arr, ['1', 'a', 'b', 'c'])).toEqual(1)
+    expect(getNestedValue(arr, ['1', 'a', 'e', 0, 'f'])).toEqual('f')
+    expect(getNestedValue(arr, [0])).toEqual('val')
+    expect(getNestedValue(arr, [1])).toEqual(obj)
+
+    expect(getNestedValue('str', [])).toEqual('str')
+    expect(getNestedValue(5, [])).toEqual(5)
+    expect(getNestedValue(null, [])).toBeNull()
+
+    expect(getNestedValue(null, ['a'])).toBeUndefined()
+  })
+
+  it('should get property from items', () => {
+    const obj = {
+      a: {
+        b: 1,
+      },
+      c: [2, 3, { d: 'd' }],
+      'x.y': 'comp',
+      x: {
+        y: 'nested',
+      },
+    }
+    expect(getPropertyFromItem(obj, 'a.b')).toEqual(1)
+    expect(getPropertyFromItem(obj, 'c.0')).toEqual(2)
+    expect(getPropertyFromItem(obj, 'c.2.d')).toEqual('d')
+    expect(getPropertyFromItem(obj, 'c.2.d.x', 'fallback')).toEqual('fallback')
+    expect(getPropertyFromItem(obj, o => o.a.b + o.c[0])).toEqual(3)
+    expect(getPropertyFromItem(obj, ['c', 2, 'd'])).toEqual('d')
+    expect(getPropertyFromItem(obj, 'x.y')).toEqual('comp')
+    expect(getPropertyFromItem(obj, ['x', 'y'])).toEqual('nested')
+    expect(getPropertyFromItem(obj, ['x.y'])).toEqual('comp')
+  })
+
+  it('should return proper value in convertToUnit', () => {
+    expect(convertToUnit(undefined)).toBeUndefined()
+    expect(convertToUnit(null)).toBeUndefined()
+    expect(convertToUnit('')).toBeUndefined()
+
+    expect(convertToUnit(0)).toBe('0px')
+    expect(convertToUnit(3)).toBe('3px')
+    expect(convertToUnit(3.14)).toBe('3.14px')
+
+    expect(convertToUnit(0, 'em')).toBe('0em')
+    expect(convertToUnit(3, 'em')).toBe('3em')
+    expect(convertToUnit(3.14, 'em')).toBe('3.14em')
+
+    expect(convertToUnit('0vw')).toBe('0vw')
+    expect(convertToUnit('3vw')).toBe('3vw')
+    expect(convertToUnit('3.14vw')).toBe('3.14vw')
+
+    expect(convertToUnit('foo')).toBe('foo')
+  })
+
+  describe.skip('getSlotType', () => {
+    it('should detect old slots', () => {
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
+        template: `<foo ref="foo"><template slot="bar">hello</template></foo>`,
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      // В Vue 3 все слоты считаются scoped, даже старые
+      expect(getSlotType(fooRef.vm, 'bar')).toBe('scoped')
+    })
+
+    it('should detect old scoped slots', () => {
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
+        template: `<foo ref="foo"><template slot="bar" slot-scope="data">hello</template></foo>`,
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      expect(getSlotType(fooRef.vm, 'bar')).toBe('scoped')
+    })
+
+    it('should detect bare v-slot', () => {
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
+        template: `<foo ref="foo"><template #bar>hello</template></foo>`,
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      expect(getSlotType(fooRef.vm, 'bar', true)).toBe('v-slot')
+    })
+
+    it('should detect bound v-slot', () => {
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
+        template: `<foo ref="foo"><template #bar="data">hello</template></foo>`,
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      // В Vue 3 #bar="data" считается v-slot, а не scoped
+      expect(getSlotType(fooRef.vm, 'bar', true)).toBe('v-slot')
+    })
+
+    it('should count bare v-slot as scoped', () => {
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
+        template: `<foo ref="foo"><template #bar>hello</template></foo>`,
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      expect(getSlotType(fooRef.vm, 'bar')).toBe('scoped')
+    })
+  })
+
+  it('humanReadableFileSize should format file sizes with base 1024', () => {
+    expect(humanReadableFileSize(0, true)).toBe('0 B')
+    expect(humanReadableFileSize(512, true)).toBe('512 B')
+
+    expect(humanReadableFileSize(1024, true)).toBe('1.0 KiB')
+    expect(humanReadableFileSize(4096, true)).toBe('4.0 KiB')
+
+    expect(humanReadableFileSize(1048576, true)).toBe('1.0 MiB')
+    expect(humanReadableFileSize(2097152, true)).toBe('2.0 MiB')
+
+    expect(humanReadableFileSize(1073741824, true)).toBe('1.0 GiB')
+    expect(humanReadableFileSize(2147483648, true)).toBe('2.0 GiB')
+  })
+
+  it('humanReadableFileSize should format file sizes with base 1000', () => {
+    expect(humanReadableFileSize(0)).toBe('0 B')
+    expect(humanReadableFileSize(512)).toBe('512 B')
+
+    expect(humanReadableFileSize(1000)).toBe('1.0 kB')
+    expect(humanReadableFileSize(4000)).toBe('4.0 kB')
+
+    expect(humanReadableFileSize(1000000)).toBe('1.0 MB')
+    expect(humanReadableFileSize(2000000)).toBe('2.0 MB')
+
+    expect(humanReadableFileSize(1000000000)).toBe('1.0 GB')
+    expect(humanReadableFileSize(2000000000)).toBe('2.0 GB')
+  })
+
+  it('should sort items by single column', () => {
+    let items
+    const getItems = () => [{ string: 'foo', number: 1 }, { string: 'bar', number: 2 }, { string: 'baz', number: 4 }, { string: 'fizzbuzz', number: 3 }]
+
+    sortItems(items = getItems(), ['string'], [], 'en')
+    expect(items).toStrictEqual([{ string: 'bar', number: 2 }, { string: 'baz', number: 4 }, { string: 'fizzbuzz', number: 3 }, { string: 'foo', number: 1 }])
+
+    sortItems(items = getItems(), ['string'], [true], 'en')
+    expect(items).toStrictEqual([{ string: 'foo', number: 1 }, { string: 'fizzbuzz', number: 3 }, { string: 'baz', number: 4 }, { string: 'bar', number: 2 }])
+
+    sortItems(items = getItems(), ['number'], [], 'en')
+    expect(items).toStrictEqual([{ string: 'foo', number: 1 }, { string: 'bar', number: 2 }, { string: 'fizzbuzz', number: 3 }, { string: 'baz', number: 4 }])
+
+    sortItems(items = getItems(), ['number'], [true], 'en')
+    expect(items).toStrictEqual([{ string: 'baz', number: 4 }, { string: 'fizzbuzz', number: 3 }, { string: 'bar', number: 2 }, { string: 'foo', number: 1 }])
+
+    sortItems(items = getItems(), ['number'], [], 'en', { number: (a, b) => b - a })
+    expect(items).toStrictEqual([{ string: 'baz', number: 4 }, { string: 'fizzbuzz', number: 3 }, { string: 'bar', number: 2 }, { string: 'foo', number: 1 }])
+
+    sortItems(items = getItems(), ['number'], [true], 'en', { number: (a, b) => b - a })
+    expect(items).toStrictEqual([{ string: 'foo', number: 1 }, { string: 'bar', number: 2 }, { string: 'fizzbuzz', number: 3 }, { string: 'baz', number: 4 }])
+  })
+
+  it('should sort items with deep structure', () => {
+    const items = [{ foo: { bar: { baz: 3 } } }, { foo: { bar: { baz: 1 } } }, { foo: { bar: { baz: 2 } } }]
+
+    sortItems(items, ['foo.bar.baz'], [], 'en')
+    expect(items).toStrictEqual([{ foo: { bar: { baz: 1 } } }, { foo: { bar: { baz: 2 } } }, { foo: { bar: { baz: 3 } } }])
+  })
+
+  it('should sort items by multiple columns', () => {
+    let items
+    const getItems = () => [{ string: 'foo', number: 1 }, { string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }]
+
+    sortItems(items = getItems(), ['string', 'number'], [], 'en')
+    expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 1 }, { string: 'baz', number: 2 }, { string: 'foo', number: 1 }])
+
+    sortItems(items = getItems(), ['string', 'number'], [true, false], 'en')
+    expect(items).toStrictEqual([{ string: 'foo', number: 1 }, { string: 'baz', number: 1 }, { string: 'baz', number: 2 }, { string: 'bar', number: 3 }])
+
+    sortItems(items = getItems(), ['string', 'number'], [false, true], 'en')
+    expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }, { string: 'foo', number: 1 }])
+
+    sortItems(items = getItems(), ['string', 'number'], [true, true], 'en')
+    expect(items).toStrictEqual([{ string: 'foo', number: 1 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }, { string: 'bar', number: 3 }])
+
+    sortItems(items = getItems(), ['number', 'string'], [], 'en')
+    expect(items).toStrictEqual([{ string: 'baz', number: 1 }, { string: 'foo', number: 1 }, { string: 'baz', number: 2 }, { string: 'bar', number: 3 }])
+
+    sortItems(items = getItems(), ['number', 'string'], [true, false], 'en')
+    expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }, { string: 'foo', number: 1 }])
+
+    sortItems(items = getItems(), ['number', 'string'], [false, true], 'en')
+    expect(items).toStrictEqual([{ string: 'foo', number: 1 }, { string: 'baz', number: 1 }, { string: 'baz', number: 2 }, { string: 'bar', number: 3 }])
+
+    sortItems(items = getItems(), ['number', 'string'], [true, true], 'en')
+    expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'foo', number: 1 }, { string: 'baz', number: 1 }])
+
+    sortItems(items = getItems(), ['string', 'number'], [], 'en', { number: (a, b) => b - a })
+    expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }, { string: 'foo', number: 1 }])
+
+    sortItems(items = getItems(), ['number', 'string'], [], 'en', { number: (a, b) => b - a })
+    expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }, { string: 'foo', number: 1 }])
+  })
+})
+
+describe('normalizeClasses', () => {
+  it('should return empty object for undefined input', () => {
+    expect(normalizeClasses(undefined)).toEqual({})
+  })
+
+  it('should return empty object for null input', () => {
+    expect(normalizeClasses(null as any)).toEqual({})
+  })
+
+  it('should normalize string classes', () => {
+    expect(normalizeClasses('class1 class2 class3')).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should handle string with extra spaces', () => {
+    expect(normalizeClasses('  class1   class2  ')).toEqual({
+      class1: true,
+      class2: true
+    })
+  })
+
+  it('should return object as is', () => {
+    const classes = { class1: true, class2: false }
+    expect(normalizeClasses(classes)).toBe(classes)
+  })
+
+  it('should normalize array of strings', () => {
+    expect(normalizeClasses(['class1', 'class2', 'class3'])).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should normalize array of objects', () => {
+    expect(normalizeClasses([{ class1: true }, { class2: false }])).toEqual({
+      class1: true,
+      class2: false
+    })
+  })
+
+  it('should normalize mixed array', () => {
+    expect(normalizeClasses(['class1', { class2: true }, 'class3'])).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should handle empty string', () => {
+    expect(normalizeClasses('')).toEqual({})
+  })
+
+  it('should handle string with only spaces', () => {
+    expect(normalizeClasses('   ')).toEqual({})
+  })
+})

package/src/util/__tests__/mergeData.spec.ts

@@ -0,0 +1,104 @@
+import { isObject } from '../helpers'
+import { mergeClasses, mergeListeners, mergeStyles } from '../mergeData'
+
+function simpleClone (value) {
+  if (Array.isArray(value)) {
+    return value.map(simpleClone)
+  }
+  if (isObject(value)) {
+    const dest = {}
+    for (const key in value) dest[key] = simpleClone(value[key])
+    return dest
+  }
+  return value
+}
+
+function verifyFactory (mergeMethod: (target: any, source: any) => any) {
+  return function verify (target: any, source: any, expected: any) {
+    const targetClone = simpleClone(target)
+    const sourceClone = simpleClone(source)
+
+    if (expected === target) {
+      expect(mergeMethod(target, source)).toBe(expected)
+    } else {
+      expect(mergeMethod(target, source)).toStrictEqual(expected)
+    }
+
+    // Ensure that mergeMethod does not mutate anything
+    if (isObject(target)) {
+      expect(target).toStrictEqual(targetClone)
+    }
+    if (isObject(source)) {
+      expect(source).toStrictEqual(sourceClone)
+    }
+  }
+}
+
+describe('mergeClasses', () => {
+  const cUndefined = undefined
+  const cEmptyString = ''
+  const cString = 'foo bar'
+  const cArray = ['foo', 'bar']
+  const cObject = { foo: true, bar: false }
+
+  it.each([
+    [cUndefined, cUndefined, cUndefined],
+    [cUndefined, cObject, cObject],
+    [cEmptyString, cUndefined, cEmptyString],
+    [cUndefined, cObject, cObject],
+    [cString, cUndefined, cString],
+    [cString, cEmptyString, cString],
+    [cString, cString, [cString, cString]],
+    [cString, cArray, [cString, ...cArray]],
+    [cString, cObject, [cString, cObject]],
+    [cArray, cUndefined, cArray],
+    [cArray, cEmptyString, cArray],
+    [cArray, cString, [...cArray, cString]],
+    [cArray, cArray, [...cArray, ...cArray]],
+    [cArray, cObject, [...cArray, cObject]],
+    [cObject, cUndefined, cObject],
+    [cObject, cEmptyString, cObject],
+    [cObject, cString, [cObject, cString]],
+    [cObject, cArray, [cObject, ...cArray]],
+    [cObject, cObject, [cObject, cObject]],
+  ])('should merge classes', verifyFactory(mergeClasses))
+})
+
+describe('mergeStyles', () => {
+  const cUndefined = undefined
+  const cEmptyString = ''
+  const cString = 'foo: bar; fizz-buzz: 10px; background: var(--background)'
+  const cObject = { foo: 'bar', fizzBuzz: '10px', background: 'var(--background)' }
+
+  it.each([
+    [cUndefined, cUndefined, cUndefined],
+    [cUndefined, cObject, cObject],
+    [cEmptyString, cUndefined, cUndefined],
+    [cUndefined, cObject, cObject],
+    [cString, cUndefined, cString],
+    [cString, cEmptyString, cString],
+    [cString, cString, [cObject, cObject]],
+    [cString, cObject, [cObject, cObject]],
+    [cObject, cUndefined, cObject],
+    [cObject, cEmptyString, cObject],
+    [cObject, cString, [cObject, cObject]],
+    [cObject, cObject, [cObject, cObject]],
+  ])('should merge styles', verifyFactory(mergeStyles))
+})
+
+describe('mergeListeners', () => {
+  const listener1 = () => {}
+  const listener2 = () => {}
+
+  it.each([
+    [undefined, undefined, undefined],
+    [undefined, { one: listener1 }, { onOne: listener1 }],
+    [undefined, { one: [listener1, listener2] }, { onOne: [listener1, listener2] }],
+    [{ one: listener1 }, undefined, { onOne: listener1 }],
+    [{ one: [listener1, listener2] }, undefined, { onOne: [listener1, listener2] }],
+    [{ one: listener1 }, { one: listener2 }, { onOne: [listener1, listener2] }],
+    [{ one: listener1 }, { one: [listener2] }, { onOne: [listener1, listener2] }],
+    [{ one: [listener1, listener2] }, { one: [listener2] }, { onOne: [listener1, listener2, listener2] }],
+    [{ one: [listener1, listener2] }, { two: listener2 }, { onOne: [listener1, listener2], onTwo: listener2 }],
+  ])('should merge listeners', verifyFactory(mergeListeners))
+})

package/src/util/color/transformCIELAB.ts

@@ -0,0 +1,36 @@
+import { XYZ, LAB } from '../colorUtils'
+
+const delta = 0.20689655172413793 // 6÷29
+
+const cielabForwardTransform = (t: number): number => (
+  t > delta ** 3
+    ? Math.cbrt(t)
+    : (t / (3 * delta ** 2)) + 4 / 29
+)
+
+const cielabReverseTransform = (t: number): number => (
+  t > delta
+    ? t ** 3
+    : (3 * delta ** 2) * (t - 4 / 29)
+)
+
+export function fromXYZ (xyz: XYZ): LAB {
+  const transform = cielabForwardTransform
+  const transformedY = transform(xyz[1])
+
+  return [
+    116 * transformedY - 16,
+    500 * (transform(xyz[0] / 0.95047) - transformedY),
+    200 * (transformedY - transform(xyz[2] / 1.08883)),
+  ]
+}
+
+export function toXYZ (lab: LAB): XYZ {
+  const transform = cielabReverseTransform
+  const Ln = (lab[0] + 16) / 116
+  return [
+    transform(Ln + lab[1] / 500) * 0.95047,
+    transform(Ln),
+    transform(Ln - lab[2] / 200) * 1.08883,
+  ]
+}

package/src/util/color/transformSRGB.ts

@@ -0,0 +1,66 @@
+import { ColorInt, XYZ } from '../colorUtils'
+import { clamp } from '../../util/helpers'
+
+// For converting XYZ to sRGB
+const srgbForwardMatrix = [
+  [3.2406, -1.5372, -0.4986],
+  [-0.9689, 1.8758, 0.0415],
+  [0.0557, -0.2040, 1.0570],
+]
+
+// Forward gamma adjust
+const srgbForwardTransform = (C: number): number => (
+  C <= 0.0031308
+    ? C * 12.92
+    : 1.055 * C ** (1 / 2.4) - 0.055
+)
+
+// For converting sRGB to XYZ
+const srgbReverseMatrix = [
+  [0.4124, 0.3576, 0.1805],
+  [0.2126, 0.7152, 0.0722],
+  [0.0193, 0.1192, 0.9505],
+]
+
+// Reverse gamma adjust
+const srgbReverseTransform = (C: number): number => (
+  C <= 0.04045
+    ? C / 12.92
+    : ((C + 0.055) / 1.055) ** 2.4
+)
+
+export function fromXYZ (xyz: XYZ): ColorInt {
+  const rgb = Array(3)
+  const transform = srgbForwardTransform
+  const matrix = srgbForwardMatrix
+
+  // Matrix transform, then gamma adjustment
+  for (let i = 0; i < 3; ++i) {
+    rgb[i] = Math.round(clamp(transform(
+      matrix[i][0] * xyz[0] +
+      matrix[i][1] * xyz[1] +
+      matrix[i][2] * xyz[2]
+    )) * 255)
+  }
+
+  // Rescale back to [0, 255]
+  return (rgb[0] << 16) + (rgb[1] << 8) + (rgb[2] << 0)
+}
+
+export function toXYZ (rgb: ColorInt): XYZ {
+  const xyz: XYZ = [0, 0, 0]
+  const transform = srgbReverseTransform
+  const matrix = srgbReverseMatrix
+
+  // Rescale from [0, 255] to [0, 1] then adjust sRGB gamma to linear RGB
+  const r = transform((rgb >> 16 & 0xff) / 255)
+  const g = transform((rgb >> 8 & 0xff) / 255)
+  const b = transform((rgb >> 0 & 0xff) / 255)
+
+  // Matrix color space transform
+  for (let i = 0; i < 3; ++i) {
+    xyz[i] = matrix[i][0] * r + matrix[i][1] * g + matrix[i][2] * b
+  }
+
+  return xyz
+}