Every other elements are being exported on the root of the package.

Checkbox and Slider elements are not being exported to the root of the package.

I am facing issues in implementing dropdown and managing focus while creating dropdown from scratch.

Location - Lightning-UI-Components/index.js

In index.js Keyboard component and KEYBOARD_FORMATS are not exported. So, the import is not possible when using the library.

I see that the color of the icon is set in the Button, but it has no effect.

Button stroke parameter doesn't work. Please check it storybook

#90

Hello Metrological!
I work at FX Digital, London.
We are experiencing an issue with how Metrologicial's _announce data is coming through for TTS in the UI Component's Keyboard.
When the standard alphabet is displayed, the Shift button announces Shift on or Shift off accordingly. However, when the accented characters keyboard is displayed, the Shift button always announces Shift off.
We would like to use this data to change our TTS announcement to Caps on or Caps off accordingly, but at the moment it's not possible for the accented keyboard.
The issue can be verified in the UI Components’s Keyboard page:
https://rdkcentral.github.io/Lightning-UI-Components/?path=/docs/elements-keyboard--keys&globals=announce:on
turning TTS announcements ON.
Besides, there are several button in the Keyboard that are not correctly announced:

• à and À are announced as a
• @, #, %, &, * are announced as comma button
  (this is a non-exhaustive list)

Look forward to hearing back from you.

Hi everyone,

when appending items through the appendItems() method on the Column component the appended items flicker when scrolling the page. This happens when I try to simulate infinite scroll functionality (as the provider prop does not seem to be loading more items).

To reproduce, modify the Basic component in Column.stories.js like so:

class Basic extends lng.Component {
    static _template() {
      return {
        Column: {
          type: Column,
          h: 500,
          itemSpacing: args.itemSpacing,
          scrollIndex: args.scrollIndex,
          items: Array.apply(null, { length: 20 }).map((_, i) => ({
            type: Button,
            buttonText: `Button ${i + 1}`
          })),
          alwaysScroll: args.alwaysScroll
        }
      };
    }

    _getFocused() {
      return this.tag('Column');
    }

    _captureDown() {
      const index = this.tag("Column").selectedIndex;
      if (index === 9) {
        const items = this.generateItems(5);
        this.tag("Column").appendItems(items);
      }
      return false;
    }

    generateItems(n) {
      const items = [];
      for (let i = 0; i < n; i++) {
        items.push({
          type: Button,
          buttonText: `NEW ${i + 1}`
        });
      }
      return items;
    }
  }

Then hit the down arrow until you're around the 9-10th item and you can see the appended buttons flicker on the screen and move downwards for a split second.
The only way I found to remedy this issue is to hide the appended items with alpha: 0 and then set it to 1 in a setTimeout function.

Thanks,
David

text: {
textAlign: "left",
color: 0xffffffff,
fontSize: 30
},

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @lightningjs/[email protected] for the project I'm working on.

If skipfocus is set for the first or last item, the focus will be incorrectly switched.

Here is the diff that solved my problem:

diff --git a/node_modules/@lightningjs/ui-components/components/FocusManager/index.js b/node_modules/@lightningjs/ui-components/components/FocusManager/index.js
index 587f1aa..0799287 100644
--- a/node_modules/@lightningjs/ui-components/components/FocusManager/index.js
+++ b/node_modules/@lightningjs/ui-components/components/FocusManager/index.js
@@ -91,10 +91,11 @@ export default class FocusManager extends lng.Component {
   }
 
   // Override
-  render() {}
+  render() { }
 
   selectPrevious() {
     if (this.selectedIndex > 0) {
+      let currentIndex = this.selectedIndex;
       let prevIndex = this.selectedIndex - 1;
       let previous = this.items[prevIndex];
       while (prevIndex && previous.skipFocus) {
@@ -103,7 +104,10 @@ export default class FocusManager extends lng.Component {
         prevIndex -= 1;
         previous = this.items[prevIndex];
       }
-      this.selectedIndex = prevIndex;
+       if (previous.skipFocus && (prevIndex == 0))
+        this.selectedIndex = currentIndex;
+      else
+        this.selectedIndex = prevIndex;
       return true;
     } else if (this.wrapSelected) {
       this.selectedIndex = this.Items.children.length - 1;
@@ -114,6 +118,7 @@ export default class FocusManager extends lng.Component {
 
   selectNext() {
     if (this.selectedIndex < this.Items.children.length - 1) {
+      let currentIndex = this.selectedIndex;
       let nextIndex = this.selectedIndex + 1;
       let next = this.items[nextIndex];
       while (nextIndex < this.items.length - 1 && next.skipFocus) {
@@ -122,7 +127,10 @@ export default class FocusManager extends lng.Component {
         nextIndex += 1;
         next = this.items[nextIndex];
       }
-      this.selectedIndex = nextIndex;
+      if (next.skipFocus && (nextIndex == this.items.length - 1))
+        this.selectedIndex = currentIndex;
+      else
+        this.selectedIndex = nextIndex;
       return true;
     } else if (this.wrapSelected) {
       this.selectedIndex = 0;

This issue body was partially generated by patch-package.

Hi,
Recently I was writing some tests to check if my animations were correctly triggered when, for example, I press a button or when I navigate away or wtv other use case I had.

I created a couple of functions to help me with this, which to be honest I'm not sure are strictly correct since I had to dig around in the methods / props available for a Lightning component instance. I wrote this:

export function getAnimations(Element) {
  return Array.from(Element.stage.animations.active).filter(
    a => a._element === Element || a._settings._actions.some(e => e._selector === Element.__ref)
  )
}

export function isAnimatingProp(Element, property) {
  const animations = getAnimations(Element)
  return animations.some(e => {
    if (e._element === Element) {
      return e._settings._actions.some(a => a._props[0] === property)
    } else {
      return e._settings._actions.some(
        a => a._selector === Element.__ref && a._props[0] === property
      )
    }
  })
}

I was wondering if you want to include these methods in the test-utils. Feel free to modify them if you think they are not correct.

Here is an example of a test making use of these:

test('moreInfo signal from Controls triggers controls and more info animations', async () => {
    const { instance } = await renderComponent(mockedStation, mockedVideoRecording)
    instance.PlayerControls.signal('moreInfo')

    expect(isAnimatingProp(instance.PlayerControls, 'y')).toBeTruthy()
    expect(isAnimatingProp(instance.MoreInfo, 'x')).toBeTruthy()
  })

Hello,
Once again thank you for this library, it's really much better than writing everything by hand. I have a question because I have two issues with the Keyboard and one with Column.

1. The Keyboard component is missing the Backspace icon, how to add it (is it a dependency or some svg in static folder?), or customise it? Could you also make a bit more clear as for the formats and layouts go in the documentation? It's not as clear really, the example has only one layout so it's not showing how to change items. Also the new typings (in v2.7.0) are not aligned with the documentation.
2. The Keyboard flickers when switching the layout, it seems like it's trying to animate the drawing of the layout, can it be disabled somehow? It also happens on the storybook, it makes it seem a bit less polished than it could.
3. The Column rows the same as the keyboard, makes a bit of the artefact, when drawing many rows at the same time - it's more visible on slower equipment. This is how it looks like:
   
   
   Is there any way to mitigate this issue?

Thank you for the library and any help with resolving those issues :)
Kacper

Add a scroll wrapper layout to handle scrollable text areas

I found two errors on documentation and an small failure:

Installation error

npm command doesn't work because it's not registered on the standard npm directory.

Solution

You can add that dependency by editing the package.json file and addiding on the devDependencies section/property:

"lightning-ui-components": "git+https://github.com/rdkcentral/Lightning-UI-Components.git"

On that way you are adding it directly from the git.

Of course you can do the same on the npm i command, but I don't remember the syntax (sorry, blame me).

Component importation error

Using the way that is included on the components to import them doesn't work.

Solution

After installing at the way above, the correct way to import a component is (Column example, but for the others is the same).

import Column from 'lightning-ui-components/components/Column/index'

This is because there's no index that export all the components on the /components/ directory and at the package.json file there's no main property to tell the package where to find the main entry of the components.

Hello guys, after i update the release1.0 version, i found the Column can't be scrolled. I debuged found that caused by the render(next, prev)function, ‘this.itemsChangeable’ is awalys true, so the 'this._performRender()' won't be called.

I found the 'this.itemsChangeable' set to true in the '$itemChanged()' and not changed anymore.

Is that a bug, please help, thanks.

Add a Slider - a progress control component, similar to the DOM's input[type="range"]

Hi Guys,
When I use Column, if there are many data items, the switching will be very slow. Is there any way to improve performance?

🚨 The automated release from the release branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the release branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Fatal MySQL error: DB-vitess_replica: ResourceExhausted 1203 target: mainuser.88-90.replica: vttablet: rpc error: code = ResourceExhausted desc = pool ConnPool waiter count exceeded (CallerID: vitess_rw_app_b)

target: mainuser.c0-c8.replica: vttablet: rpc error: code = ResourceExhausted desc = pool ConnPool waiter count exceeded (CallerID: vitess_rw_app_b)
target: mainuser.e0-e8.replica: vttablet: rpc error: code = ResourceExhausted desc = pool ConnPool waiter count exceeded (CallerID: vitess_rw_app_b)
target: mainuser.f8-.replica: vttablet: rpc error: code = Resour

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the [Function: semantic-release-monorepo] plugin to add more helpful information.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Hello!

If you select the column component's first element and press the Up button, it consumes the input event. The expected behavior is for it to ignore the event because it's already on the first element. Because of this, I can't navigate from the column to the component above it.

This issue began when the update-row branch was merged into master a couple of days ago. I have not verified if the row has the same problem.

The @lightningjs/ui-components package is currently un-usable, as the Styles and textures folders are missing, but the index file attempts to export components from them.

This can be verified by:

• Install version 1.2.0 with npm in a newly initialized project.
• Open node_modules/@lightningjs/ui-components
• Observe Styles and textures folders are missing
• Observe that index.js is importing from those folders.

add a tab-style navigation between groups of content

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Add a component to visually display progress in a range

Hello there!!!

Guys, I have been facing an error using the Shadow component.
Previously we had @lightningjs/ui-components in release 2.2.4, however when we updated to latest version we started to get an error in the colsole and our UI navigation breaks.
The error in the console is this:
TypeError: undefined is not an object (evaluating 'v.toString') lightning-inspect.js:633

 Object.defineProperty(ElementCore.prototype, '_colorUl', {
      get: function() {
          return this.__colorUl;
      },
      set: function(v) {
          if (this.__colorUl !== v) {
              val(this, 'colorUl', v.toString(16), "ffffffff"); //Line where error occurs
              this.__colorUl = v;
              checkColors(this);
          }
      }
  });

After investigation we found out that until version 2.10.0 It works fine, but from 2.11.0 we start getting this error, we also tried to update the code and use different values from what we had, but nothing seems to work and the error is still there. This is our code using the Shadow component:

import { Shadow } from '@lightningjs/ui-components'
//ofc it has the whole lightning structure around it, only pasted here the shadow part

Dropshadow: {
        w: 400,
        h: 300,
        type: Shadow,
        style: {
          alpha: 0.6,
          blur: 60,
          color: 0xFF000000,
          offsetY: 44,
          radius: 8,
          spread: 2,
        },
      },

As the error seems related to the color of the component we tried '#000000' and Colors('black').get().
We also analyzed the changes from releases 2.10.0 to 2.11.0 and we saw nothing related to the Shadow component, also none of the changes made us think "could be this or that".

Is there anything we might be missing?
A new approach on the Shadow usage/implementation is necessary on our side?

Thank you for your support.
Best regards

Description

Firstly, I'd like to express my appreciation for the effort put into this package. It has been a significant help in creating lightning UI.

However, I have encountered some inconsistencies during implementation:

1. The Input field is missing type definitions for the insert(x: string) and backspace() methods. These methods are functional but not defined in the type spec of the input.
2. The documentation includes information about setting the value directly using input.value = "newvalue", but this does not work, regardless of the listening setting.
3. The Tab component does not appear to be exported from the package. I am only able to find the TabBar component.

Thank you again for the great work, and I look forward to your response. Have a wonderful day!

Hello!

Currently, the wrapping style of the row component is scrolling back to the first item. It would be very nice if you could add a wrapping style that makes the row appear infinite. It doesn't need to duplicate items because we are using enough to fill the screen width.

Hi team,

It seems that any app using a UI component from this library that extends the "withStyles()" helper function breaks in STBs using a Chrome 39 implementation in the field. The particular STB runs ES5.

Here are screenshots of the issue:

You can find an example app to replicate the issue here:
com.metrological.app.uitest.zip

Please note that the issue cannot be replicated in modern browser.
If you need more information about which STB breaks, please contact me through internal channels.

Hello guys! After the latest update when I use Column + Rows components for building the Grid component I faced this issue :

Here is how it look like before the update :

Also, after debugging lightning-ui-components package I see that on Row component we patch this.Items with nextH:

(previously you patched nextH directly to Row component : this.patch( {h: nextH } ). If we add this code to Row component then everythning works as expected :

Please review this issue and will be great to see the fix in the next version!
Thank you,

Suppose a Column component with 10 children, from which only 4 are created, and the rest are stored in the _lazyItems array, if you navigate to the 8th element directly (with no animations) by setting column.selectedIndex = 8, the column will truncate the index and focus on the last one that was created, the 4th one.

We made a workaround while the issue is addressed here.

import { Lightning } from '@lightningjs/sdk'
import { Column as LngColumn } from 'lightning-ui-components'
import { getW } from 'lightning-ui-components/utils'
import { clamp } from '../../Utils'

export default class Column extends LngColumn {
    // Add lazy items as needed to reach the desired index
    set lazyIndex(index: number) {
        if (index < 0) return

        if (this._lazyItems && this._lazyItems.length > 0 && index >= this.items.length) {
            const itemsLength = this.items.length
            const lazyItemsLength = this._lazyItems.length
            const totalLength = itemsLength + lazyItemsLength
            const indexClamped = clamp(index, 0, totalLength - 1)
            const lazyItemCount = indexClamped - itemsLength + 1 + this.lazyUpCount
            const lazyItemCountClamped = clamp(lazyItemCount, 0, lazyItemsLength)
            const lazyItems = this._lazyItems.splice(0, lazyItemCountClamped)
            index = indexClamped
            this._appendItems(lazyItems)
        }

        this.selectedIndex = index
    }

    // Append items without adding them to the _lazyItems array
    _appendItems(items: Lightning.Component[] = []): void {
        const itemWidth = this.renderWidth
        this._smooth = false

        items.forEach(item => {
            item.parentFocus = this.hasFocus()
            item = this.Items.childList.a(item)
            item.w = getW(item) || itemWidth
        })

        this.stage.update()
        this._update()
        this._refocus()
    }
}

Hi,

This is not an issue or a problem, is a request.

It will be nice to have some event on some _handleKeys so we can perform some actions when it happens. For example. in a column will be nice to have an event when you press up (or down) so the application can, for example, not only move into the items but to do an extra thing (whatever).

The same for the rows.

I know this can be done by extending the class and doing by your own, and I don't know if this will be useful to others.

Hello,

I updated our project to the latest version of this repo and noticed the column items are being rendered outside its area.

If I move the column near the bottom edge of the screen, the items before the current index overlap with other components instead of hiding away.

This bug is not present on commit 0e0c303. I have not verified if the row has the same problem.

I have a column component where each item is a row. Data is received in column component, I need to send it to the row components and force them to render the new data. I am unable to find a way to achieve this. I need help on how to proceed here.