Merge branch 'master' of github.com:DevoInc/genesys-ui

# Conflicts: # packages/table/src/columnPresets/date.ts
DevoInc · Apr 4, 2024 · afafa55 · afafa55
2 parents 08dad20 + 86e93fb
commit afafa55
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 24 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -138,7 +138,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v5
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/src/components/SelectControl/components/ChildrenValueContainer.tsx b/packages/core/src/components/SelectControl/components/ChildrenValueContainer.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { Typography } from '../../Typography';
+import { HFlex } from '../../HFlex';
+import { TSelectOption } from '../declarations';
+
+type ChildrenValueContainer = {
+  multipleSubtle: boolean;
+  values: TSelectOption[];
+  children: React.ReactNode;
+};
+
+export const ChildrenValueContainer: React.FC<ChildrenValueContainer> = ({
+  multipleSubtle,
+  values,
+  children,
+}) => (
+  <HFlex spacing="cmp-xxs">
+    {multipleSubtle && values.length > 0 && (
+      <Typography.Caption colorScheme="weaker">
+        ({values.length})
+      </Typography.Caption>
+    )}
+    {children}
+  </HFlex>
+);
diff --git a/packages/core/src/components/SelectControl/components/ValueContainer.tsx b/packages/core/src/components/SelectControl/components/ValueContainer.tsx
@@ -9,10 +9,8 @@ import { DragEndEvent } from '@dnd-kit/core';
 import type { TSelectOption } from '../declarations';
 
 import { SelectControlContext } from '../context';
-
-import { Typography } from '../../Typography';
-import { HFlex } from '../../HFlex';
 import { SortableList } from './SorteableList';
+import { ChildrenValueContainer } from './ChildrenValueContainer';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ValueContainerProps extends RSValueContainerProps {}
@@ -77,16 +75,12 @@ export const ValueContainer: React.FC<ValueContainerProps> = ({
     return (
       <div ref={containerRef} className={containerClass}>
         <components.ValueContainer {...props}>
-          {props.selectProps.multipleSubtle && values.length > 0 ? (
-            <HFlex spacing="cmp-xxs">
-              <Typography.Caption colorScheme="weaker">
-                ({values.length})
-              </Typography.Caption>
-              {children}
-            </HFlex>
-          ) : (
-            children
-          )}
+          <ChildrenValueContainer
+            values={values}
+            multipleSubtle={props.selectProps.multipleSubtle}
+          >
+            {children}
+          </ChildrenValueContainer>
         </components.ValueContainer>
       </div>
     );

diff --git a/packages/datetime/src/components/DateTimePicker/DateTimePicker.tsx b/packages/datetime/src/components/DateTimePicker/DateTimePicker.tsx
@@ -34,6 +34,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   placeholder,
   size,
   value: customValue,
+  autofocus = false,
   ...restDateTimeProps
 }) => {
   const value = toTimestamp(customValue);
@@ -47,7 +48,6 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   const onChangeCallback = React.useCallback((ts: number) => {
     setDate(ts);
   }, []);
-
   return (
     <VFlex alignItems={'stretch'}>
       <InputControl
@@ -58,6 +58,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
         onChange={onChange}
         placeholder={placeholder}
         size={size}
+        autoFocus={autofocus}
       />
       <DateTime
         {...restDateTimeProps}

diff --git a/packages/table/src/columnPresets/date.ts b/packages/table/src/columnPresets/date.ts
@@ -1,5 +1,5 @@
 import { TColDef } from '../declarations';
-// import { DateEditor } from '../editors';
+import { DateEditor } from '../editors';
 import { TextRenderer } from '../renderers';
 import { dateFormatter } from '../valueFormatters/date';
 import { enUS } from 'date-fns/locale';
@@ -8,7 +8,7 @@ export const date: TColDef = {
   id: 'date',
   cellRenderer: TextRenderer,
   valueFormatter: dateFormatter,
-  // cellEditor: DateEditor,
+  cellEditor: DateEditor,
   context: {
     formatDate: 'dd/MM/yyyy HH:mm:ss',
     tz: 'Europe/Madrid',

diff --git a/packages/table/src/editors/DateEditor/DateEditor.tsx b/packages/table/src/editors/DateEditor/DateEditor.tsx
@@ -43,6 +43,7 @@ export const DateEditor: React.FC<TCellEditor> = ({
             onChange(event.currentTarget.value)
           }
           value={new Date(value as Date)}
+          autofocus={true}
         />
       </Popover.Panel>
     </Popover>