semrush / intergalactic Goto Github PK

Currently we are publishing all components separately and also publishing @semcore/ui component to reexport all of them.

It causes the following issues on our side:

1. Publishing process takes 10-20 times more than it should take.
2. Transit dependencies version bumping with reversed topology sorting is extremely complex for a such sensitive process.
3. We are unable to make prereleases on branches.
4. The package is named @semcore/ui while branded design system name is Intergalactic.

It also causes issues on the user side:

1. A lot of troubles with resolving when resolver is not working well. Vite handles it's better than others but, for example, Astro totally fails (#779).
2. Some users are installing components separately and doesn't keep them on the same version what may cause a lot of bugs and makes the debugging almost impossible.

So, we need to replace complex publishing with publishing a single package that will contain all output of components.

Hi there! I try to use this https://developer.semrush.com/intergalactic/style/icon/ lib and copy this import OrientationLandscapeM from '@semcore/ui/icon/OrientationLandscape/m' code, but got error on the picture

What did i do wrong?

Describe the bug
During a11y testing for one of our products, I noticed that focusing InputTag component with the keyboard doesn't work as expected (see att. video).

To Reproduce
Steps to reproduce the behavior:

1. Attempt to focus InputTag component using keyboard

Expected behavior
Input focus behavior is straightforward (for instance, similar to this component - not sure if its behavior 100% correct from a11y point of view, but it works more convenient at least).

Actual behavior
When you attempt to focus on InputTag component, on the first Tab press, default focus ring for 'data-ui-name="InputTags"' component is shown. The custom focus ring appears only after the second Tab press, but 'data-ui-name="ScrollArea.Container"' node inside the InputTags component is focused. See att. video for better understanding.

Ellipsis component doesn't work properly in multiline mode when words are longer then a line.

User report is here:

we are currently exploring the possibility of using astro as an ssr/template render framework
overall everything works great, but we're running into a few issues that seem to be on the Vite side

1. imports like @semcore/ui/* do not work, we get the error Unexpected token 'export'
2. when using imports like @semcore/*, everything works fine in development mode, but during the production build we > get an error like Element type is invalid: expected a string, which can be solved with such hack:

import $Button from "@semcore/button";
const Button = $Button.default || $Button

I found some opened github issues, but nothing has helped me so far

1. withastro/astro#5277
2. withastro/astro#4692
3. vitejs/vite#9061

It seems that issue is caused by weird Astro resolver but anyway we must support it.

Describe the bug
The rendering of donut with zero value segment is interrupted by the following error:

Uncaught Error: Pie(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Code example
Codesandbox. This bug doesn't appear on React <18.

Expected behavior
In React 16 there is no error when displaying the zero pie.

Additional context

It looks like the error is being caused by this return expression, since React <18 doesn't support return undefined:

Versions:

• @semcore/[email protected]
• @semcore/[email protected]
• [email protected]

### Why we need this feature
Product teams need the ability to compare two periods in a DatePicker. With the ability to set a set of presets for the first and second fields for selecting a period.

### What needs to be done
DatePicker needs the ability to compare two periods in a DatePicker. With the ability to set a set of presets for the first and second fields for selecting a period. More details you can find in Figma:

• Work flow of the feature + requirements from designers

• Design tokens for this feature you can find in this PR #670

• Please note that the margin between the lines in the calendar has increased, just like in a calendar with months.

Describe the issue
Seems that DropdownMenu trigger doesn't get active state, when popper is opened (like in the Select component).

Code example
I've found it on our website examples for DropdownMenu.

Expected behavior
As we can see from the design guide, DropdownMenu.Trigger should be in active state after DropdownMenu was opened.

Additional context
We've discussed this at the daily meeting, and thought it was because BaseTrigger doesn't has a blue border in active state, but it has.

Describe the bug
DateRangePicker fires the native validation on the form submit event with valid data.

Code example
Open codesandbox codesandbox.

To Reproduce
Steps to reproduce the behavior:

1. Chose any date range in the input
2. Click on 'submit' button
3. The form doesn't submit, validation error appears on the first input (wrong format input)

Expected behavior
The form is submitted

Additional context

Describe the bug
Noticed, that the focus ring is not initially visible when a user opens modal.

To Reproduce

1. Open modal (first example from docs can be used)
2. Check focus ring around 'Close' button

Expected behavior
Focus ring is visible

Actual behavior
Focus ring is not visible (see att. screencast)

Describe the bug
Looks like it was accidentally removed here, so the fixes weren't such safe I suppose ;D

It's caused by DataTable architecture. Probably we need to develop new component that is not recalculating columns width after first render.

During installation of the package @semcore/babel-plugin-styles I see next warnings:

 WARN  deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
 WARN  deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
 WARN  deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

Can you fix these warnings?

Describe the bug
Noticed, that focus trap doesn't work properly for 'modal inside modal' case

To Reproduce

1. Open modal from another modal (this example from docs can be used)
2. Focus over elements in the last opened modal

Expected behavior
Focus is trapped inside the last opened modal

Additional context
Focus is not trapped and leaks to the previous modal (see att. screencast).

A lot of our components allows to pass color in color or theme prop. The prop accepts color as is or, as a name of color from hardcoded palette:

const colors = preval`
  const path = require('path');
  module.exports = require('@semcore/babel-plugin-react-semcore').getColorVars(path.resolve(__dirname, './style/var.css'));
`;

All colors resolving goes via resolveColor function. We need to replace it with some kind of useResolveColor hook that will resolve colors by css variables + hardcoded default values.

Describe the bug
After the last major update, I've met an issue related to typings of @semcore/flex-box component. Tag property seems working wrong, forwarding property "tag" from Box interface to the Box component is marked as invalid.

Code example
Example

To Reproduce
All steps listed in an example.

Expected behavior
Box component will recognise "tag" property from it's interface as a valid value

Our current documentation website contains a lot of home-invented wheels that makes it's support extremely hard. Also it doesn't have good browsers support and loads pretty slow.

Recently https://vitepress.dev/ got out of alpha testing. It should be pretty good for us.

Possible troubles:

1. It uses Vue, so we will get a few .vue files in the repository.
2. It doesn't have built-in code sandboxes. Need to implement it by ourself.
3. Design is pretty far from the design system. Need to kinda of merge it.

Here's a quick overview of the chart:

1. We're tentatively calling it the Cigarette chart. If you have any creative name suggestions, please feel free to share them.
2. It's a straightforward chart that illustrates the relationship of parts to a whole.
3. Note that this chart won’t include the metric texts you might have seen in the accompanying screenshots.

Link to Figma branch with design decisions

app-index.js:32 Warning: FunctionMemoComponent: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead. at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Box (webpack-internal:///(app-client)/./node_modules/@semcore/flex-box/lib/es6/Box/index.js:12:68) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at FadeInOut at Overlay (webpack-internal:///(app-client)/./node_modules/@semcore/modal/lib/es6/Modal.js:214:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Children at Portal (webpack-internal:///(app-client)/./node_modules/@semcore/portal/lib/es6/Portal.js:24:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Workspaces (webpack-internal:///(app-client)/./components/(app)/Workspaces/page.jsx:23:80) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at div at main at div at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at body at html at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:33:9) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11) at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11) at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:374:13) at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11) at RSCComponent at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11) window.console.error @ app-index.js:32 console.error @ hydration-error-info.js:45 printWarning @ react-dom.development.js:94 error @ react-dom.development.js:68 updateMemoComponent @ react-dom.development.js:14740 beginWork$1 @ react-dom.development.js:17406 beginWork @ react-dom.development.js:25650 performUnitOfWork @ react-dom.development.js:24501 workLoopSync @ react-dom.development.js:24217 renderRootSync @ react-dom.development.js:24182 performSyncWorkOnRoot @ react-dom.development.js:23677 flushSyncWorkAcrossRoots_impl @ react-dom.development.js:9965 flushSyncWorkOnAllRoots @ react-dom.development.js:9923 processRootScheduleInMicrotask @ react-dom.development.js:10067 eval @ react-dom.development.js:10238 app-index.js:32 Warning: OutsideClick: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at OutsideClick (webpack-internal:///(app-client)/./node_modules/@semcore/outside-click/lib/es6/OutsideClick.js:18:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Box (webpack-internal:///(app-client)/./node_modules/@semcore/flex-box/lib/es6/Box/index.js:12:68) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at FadeInOut at Overlay (webpack-internal:///(app-client)/./node_modules/@semcore/modal/lib/es6/Modal.js:214:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Children at Portal (webpack-internal:///(app-client)/./node_modules/@semcore/portal/lib/es6/Portal.js:24:24) at FunctionMemoComponent (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:270:65) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at Component (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:194:88) at WrapperForwardRef (webpack-internal:///(app-client)/./node_modules/@semcore/core/lib/es6/index.js:130:34) at div at Workspaces (webpack-internal:///(app-client)/./components/(app)/Workspaces/page.jsx:23:80) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at div at main at div at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:225:11) at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:330:11) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9) at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:211:11) at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:340:11) at body at html at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:33:9) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11) at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11) at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11) at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11) at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:374:13) at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11) at RSCComponent at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

Am I in trouble with this error? I'm just using modal.

`  
  <Modal visible={visible} onClose={handleClose}>
    <Modal.Title>Create Workspace</Modal.Title>
    <Text size={200} mb={4} tag="p">
     You can't change your domain when you create workspace.
    </Text>
    <Box mt={2}>
      <Input size="m" w={370} mb={4} state="normal">
        <Input.Value placeholder="Workspace Name" />
      </Input>
    </Box>
    <Box mt={2}>
    <Input size="m" w={370} mb={4} state="normal">
      <Input.Value placeholder="domain.com" />
    </Input>
    </Box>
    

    <Button use="primary" theme="success" size="l" onClick={handleClose}>
      Create
    </Button>
    <Button size="l" ml={2} onClick={handleClose}>
      Cancel
    </Button>
  </Modal>`

It's hilarious a little bit, but our charts still doesn't have any special component that helps to build charts legend. Documentation recommends developers to build chart legends on their own but we able to provide much better DX by creating a high-level component that works with charts out of the box.

Here is the component design: https://developer.semrush.com/intergalactic/data-display/chart-legend/

Request

For greater accessibility of our chart library, it is important that the data on the graphs can be distinguished not only by color but also by non-color elements, so that one dataset can be distinguished from another. Similar remarks were made in the recommendations from Level Access:

The blue and green lines and areas do not have sufficient contrast with each other and with the white background. They must have at least a 3:1 contrast ratio.

What needs to be done:

• Prepare the technical implementation of this feature
• Select a set of SVG patterns for charts in the design
• Determine the order of using patterns on the charts
• Discuss the final implementation
• Implement the capability to fill charts with colored patterns in our chart library

Warning recieved from npm run dev with a scroll-area
Warning: ScrollArea.Bar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at Component (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:346:22)
at FunctionMemoComponent (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:308:37)
at WrapperForwardRef (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:168:34)
at div
at Box (webpack-internal:///(ssr)/./node_modules/@semcore/flex-box/lib/cjs/Box/index.js:13:41)
at Component (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:232:39)
at WrapperForwardRef (webpack-internal:///(ssr)/./node_modules/@semcore/core/lib/cjs/index.js:168:34)
at ViewChats (webpack-internal:///(ssr)/./app/viewchats/page.tsx:76:76)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:335:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:344:11)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:335:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:344:11)
at Lazy
at body
at html
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at ReactDevOverlay (C:\vercel\chatmd-client\node_modules\next\dist\client\components\react-dev-overlay\internal\ReactDevOverlay.js:66:9)
at HotReload (C:\vercel\chatmd-client\node_modules\next\dist\client\components\react-dev-overlay\hot-reloader-client.js:343:11)
at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:144:11)
at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11)
at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:403:13)
at Lazy
at Lazy
at ServerComponentWrapper (C:\vercel\chatmd-client\node_modules\next\dist\server\app-render\create-server-components-renderer.js:78:31)
at ServerComponentWrapper (C:\vercel\chatmd-client\node_modules\next\dist\server\app-render\create-server-components-renderer.js:78:31)
at ServerInsertedHTMLProvider (C:\vercel\chatmd-client\node_modules\next\dist\server\app-render\server-inserted-html.js:26:39)

Types for UiKitPagination.TotalPages don’t have a default value for ComponentTag. And I can only write <UiKitPagination.TotalPages<'button'> onClick={click} />. If you add a default value ComponentTag = 'button' like in many other places I could simple write <UiKitPagination.TotalPages onClick={click} /> without tag specifying.

Describe the issue
I've noticed that wrong styles applied to Button in on of the examples on our website.

Code example
Find the buggy styles in this example on the website.

Expected behavior
Button in the example above should have Button styles (with use="secondary", theme="muted"), not the BaseTrigger/ButtonTrigger styles. Check the design in the Export guide.

Describe the bug
DragAndDrop sorting does not work in the list example. The declared behavior for selecting an element to rearrange via pressing the spacebar does not work. Voice over does not correctly read the current state and the ability to select items to rearrange.

Code example
https://codesandbox.io/s/charming-bash-f3qr9h

To Reproduce
Steps to reproduce the behavior:

1. Go to sandbox
2. Open select with keyboard
3. Arrows to navigate to the desired component
4. Press space to grab element
5. See error

Expected behavior
After hitting the spacebar, the item should be selected to reorder in the list

Additional context
Link to good workable example.

Is your feature request related to a problem? Please describe.
Props for our Text component lacks semibold prop with value 600. It's necessary for using in titles.

Describe the solution you'd like
Add a semibold prop with 600 value to the API of the Text component.

sssssssssssssssssss<script>alert(123);</script>

�><script>alert(�XSS�)</script>

</script><script>alert(1)</script>
�; alert(1);
�)alert(1);//

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

�><script>alert(�XSS�)</script>

</script><script>alert(1)</script>
�; alert(1);
�)alert(1);//

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

`<script>alert(123);</script>

�><script>alert(�XSS�)</script>

</script><script>alert(1)</script>
�; alert(1);
�)alert(1);//

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

�)alert(1);//

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

<style>{font-family:'<iframe/onload=confirm(1)>'

<input/onmouseover="javaSCRIPT:confirm(1)"

<scRipt %00>alert(1) {Opera}

<img/src=%00 onerror=this.onerror=confirm(1)

Problem:
When I pass foreignObject as a tag, Label is not positioned correctly. Passing the coordinates doesn't change anything because they are not changeable. Code

Example:
I've prepared an example https://codesandbox.io/s/silly-scott-9kqpz2?file=/src/App.tsx

Our styling works extremely unobvious. It's better explained here: https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md#implicit-code-transformations

I propose to very change it and make it work the way same to way css modules works.

In my propose we will import css as following:

import { SLabel, SItem } from './filename.component.css'.

I also propose to add unplugin (universal plugin for all kinds of bundlers) that will transform compoennts.css file into .tsx file with React components SLabel, SItem and so on, that also imports a virtual css file.

The virtual css file should contain hashed class names (like with css modules). If classed, described in .component.css file has attribute selectors, the attribute selectors also are used to generate new css classed that are going to be applied to generated components when corresponding prop is provided. If css class uses css variables the generated component should also accept it via prop, while css variable name should be hashed for isolation.

The unplugin should support filtering variable names to allow us work with existing design tokens (named as --intergalactic-*)

New year is coming, it's better to publish major release after it.

1. Manual control over highlighted property is needed. Here is demo of attempt with empty array passing, but active highlighted inside of components is nog going to be reset. Demo is here
2. It's a pain to customize the trigger. For example if you want to replace button with Link, icon disappears and it's impossible to use date-picker value.
3. Need control over logic of selecting display periods.
4. Dark mode support

Is your feature request related to a problem? Please describe.

Hello, team!
Can you help me with the new icon for our new reporting 2.0?

Describe the solution you'd like

I thought about metaphor "plug" and already did some drafts.

"@semcore/date-picker": "2.7.1".

Hello! I've encountered incorrect signature in onDisplayedPeriodChange method in MonthRangePicker. See details on screenshots. Long story short, onDisplayedPeriodChange may return argument of type Date or string (date: Date | string), when it must be Date type only (date: Date) according to method's signature.

InputSearch component contains clear button that are not exposed from component api while this exposure might be very helpful.

We need to provide api like the following:

<InputSearch>
  <InputSearch.SearchIcon />
  <InputSearch.Value />
  <InputSearch.Clear />
</InputSearch>

Actual result

Expected result

Motivation

HTML OL element has 'start' and 'reversed' attributes that impacts items' markers.

The native HTML code like this should render an item started with "3".

    <ol start="3">
        <li> this item starts with "3" </li>
    </ol>

At the same time, wrapping lists with FormatText breaks this features

<FormatText>
    <ol start="3">
        <li> this item starts with "1" </li>
    </ol>
</FormatText/>

Looking into source code it is clear why this happens:

• styles for FormatText reset standard list markers and puts own markers based on custom counter 'item'. That counter obviously starts from 0 and does not depend on any HTML attributes.

Proposal:

Replace custom counter 'item' with built-in counter 'list-item'. This built-in counter is automatically initiated by OL tag and supports OL's attributes.

How to test:

This code should render an item starting with "3"

<FormatText>
    <ol start="3">
        <li> this item starts with "3" </li>
    </ol>
</FormatText/>

Describe the issue

I've upgraded to @semcore/[email protected] (@semcore/[email protected]) and I'm trying to draw a donut of two segments:

import { colors, Donut, Plot } from '@semcore/ui/d3-chart';

const chartData = {
    value,
    other: 100 - value,
};

<Plot width={24} height={24} data={chartData}>
    <Donut outerRadius={12} innerRadius={7} duration={0}>
        <Donut.Pie dataKey='value' />
        <Donut.Pie dataKey='other' color={colors['gray-200']} />
    </Donut>
</Plot>

However, when the other value is zero, the rendering of graph is interrupted by the following error:

Uncaught Error: Pie(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Code example

https://codesandbox.io/s/elastic-breeze-k4xg3d

In this example, the error is not reproduced 🤷🏻, perhaps it's somehow related to the webpack's specific behaviour.

I have made a simple demo on the code sandbox

https://codesandbox.io/s/semrush-theme-3kbhtd?file=/webpack.config.js

I followed by documentation https://developer.semrush.com/intergalactic/style/themes/themes-global/

But I don't see that button changed to a red color. You can check the file: src/theme/button/button.shadow.css

Can you help me to change global styles for any elements?

I started my local project with Vite
My local config is:

• vite: ^2.9.9
• @semcore/ui: ^13.2.0
• @semcore/babel-plugin-react-semcore: 4.3.0

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(() => {
  const config = {
    plugins: [react({
      babel: {
        configFile: true,
      }
    })]
  }


  return config;
});

babel.config.js:

const path = require('path');

const presets = [];
const plugins = [
  [
    '@semcore/babel-plugin-react-semcore',
    {
      theme: path.resolve(process.cwd(), 'src', 'theme'),
      verbose: true,
    },
  ],
];

module.exports = { presets, plugins };

The most critical issues of our codebase are:

1. A lot of not typed code (weak typed core and weak typed components).
2. Low component performance due to propsForElement mechanism.

To resolve it, probably we need to almost fully rewrite our components. It's actually not so hard because we will preserve all the tests and styles.

Also, it might be a very good chance to rewrite our components on some framework agnostic technology, such as https://github.com/builderio/mitosis or another that will generate our components runtime code for multiple frameworks such React, Vue, Qwik and Svelte.

Is your feature request related to a problem? Please describe.
We need to add a pattern to the inputs in the invalid state, which I will list below. More details in the ClickUp (links to the results of user testing, etc.)

Describe the solution you'd like
You need to add patterns to the following inputs/components (links lead to the design in the branch of the core Figma library):

• Checkbox
• DatePicker.Trigger
• Drag and drop is questionable (let's discuss, this is also an input)
• InlineInput
• Input
• InputNumber
• InputPhone
• InputTags
• Radio
• Select trigger (for BaseTrigger)
• Textarea
• TimePicker

During installation of the package @semcore/babel-plugin-react-semcore I see next warnings:

 WARN  deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
 WARN  deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
 WARN  deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
 WARN  deprecated [email protected]: use String.prototype.padStart()
 WARN  deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
 WARN  deprecated [email protected]: this library is no longer supported
 WARN  deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
 WARN  deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
 WARN  deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
 WARN  deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

Can you fix these warnings?

Describe the bug
The FormatText component does not allow "reversed", "start" and "type" attributes to be used with the <ol> tag.

Code example
Codesandbox.

Expected behavior
I expect the correct behavior of the <ol> tag when using its native attributes.

Describe the bug
In DateRangePicker.Trigger render props value has wrong type, it should be Date[] but now it is just Date and in the onChange handler too. And also the placeholder is gone.

Actual behavor

 <DateRangePicker.Trigger>
    {({ value: Date | undefined, onChange: (value: Date, event) => void }) => {
        ...
    }}
</DateRangePicker.Trigger>

Expected behavior

 <DateRangePicker.Trigger>
    {({ value: Date[] | undefined, onChange: (value: Date[], event) => void, placeholder }) => {
        ...
    }}
</DateRangePicker.Trigger>

Describe the bug
Extra margin-top and margin-bottom for h1 in product-head component

According to this doc it should be only 8px for top and bottom, but on the example page there are additional margins.

Describe the bug
When interacting with data summary pop-up for charts, user is not able to place focus on 'Close' link

To Reproduce

1. Open data summary pop-up for any supported chart (e.g. Donut chart can be used)
2. Open the data summary pop-up using keyboard
3. Attempt to place focus on 'Close' link

Expected behavior
'Close' link can be focused (and it is expected to be first focusable element inside the pop-up)

Actual behavior
'Close' link is not available for focusing using keyboard (hence it cannot be pushed by the user). So currently user has to focus through the pop-up completely to close it (see att. screen cast).

Describe the bug
Changing the line-height CSS property outside the DatePicker component causes alignment issues inside the component when using DatePicker.InputTrigger.

Code example
Open codesandbox.

To Reproduce
Steps to reproduce the behavior:

1. Wrap a DatePicker (with the default DatePicker.InputTrigger) into a div.
2. Set the div's line-height to 2.
3. See that DatePicker.InputTrigger is distorted when displaying the humanized date.

Expected behavior
DatePicker.InputTrigger remains unaffected by changes to the line-height property. It displays the humanized date with proper alignment, similar to DatePicker.ButtonTrigger.

I was building a table where I particularly want to decrease the width of Scroll Bar Slider of the DataTable , that goes by

Hi team,

The NPM page for @semcore/table lists version 4.3.0 as the latest release, but the changelogs reveal that the actual latest version is 4.12.2.

It appears that only pre-release versions have been pushed to NPM recently. Could you please investigate that?

Describe the bug
When modal elements are focused backward (Shift + Tab), focus get locked on 'Close' icon when reaches it.

To Reproduce

1. Open any modal with 'Close' icon (e.g. this)
2. Move focus forward to any element
3. Attempt to move focus backward so it'll cycle back to the same element

Expected behavior
Backward focus is cycled inside the modal, as it is for regular focus direction.

Actual behavior
Backward focus (Shift + Tab) is not cycled inside modal and locks on 'Close' icon when reaches it (see screen cast in attachment).