@sats-group/ui-lib 79.2.0 → 80.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "79.2.0",
+  "version": "80.1.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/form-content/form-content.search.tsx

@@ -23,7 +23,7 @@ const FormContentSearch: React.FC<Props> = ({
   }, [searchDataset]);
 
   const searchResults = React.useMemo(
-    () => (term.length > 0 ? search(term).slice(0, 5) : []),
+    () => (term.length > 0 ? search(term) : []),
     [search, term],
   );
 

package/react/select/select.scss

@@ -4,18 +4,20 @@
 @use '../../tokens/font-sizes';
 
 .select {
-  display: flex;
-
-  &--label-position-inline {
-    flex-direction: row;
-    gap: spacing.$xs;
-    align-items: center;
-    flex-wrap: wrap;
-  }
+  &__content {
+    &--position-inline {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: spacing.$xs;
+      flex-wrap: wrap;
+    }
 
-  &--label-position-stacked {
-    flex-direction: column;
-    gap: spacing.$xxs;
+    &--position-stacked {
+      display: grid;
+      gap: spacing.$xxs;
+      justify-items: start;
+    }
   }
 
   // NOTE: Specificity hack
@@ -53,7 +55,6 @@
     border: 1px solid light.$ge-border-default;
     display: block;
     position: relative;
-    width: 100%;
     border-radius: corner-radius.$s;
     padding-right: 36px; // NOTE: custom spacing to offset chevron overlap
 
@@ -109,7 +110,7 @@
     margin-left: spacing.$xs;
   }
 
-  &__label {
+  &__label-text {
     display: flex;
     flex-direction: row;
   }

package/react/select/select.tsx

@@ -18,6 +18,7 @@ const RefSelect = React.forwardRef<
     {
       children,
       className,
+      id,
       isLabelVisible = true,
       label,
       labelPosition = labelPositions.stacked,
@@ -39,66 +40,71 @@ const RefSelect = React.forwardRef<
       validationOnChange(e);
     };
 
+    const asterix = required ? (
+      <span className="select__asterisk">*</span>
+    ) : null;
+
     return (
-      <label
-        className={cn('select', className, {
-          'select--error': error,
-          [`select--label-position-${labelPosition}`]: labelPosition
-            ? labelPositions[labelPosition]
-            : undefined,
-        })}
-      >
-        {isLabelVisible && (label || children) ? (
-          <div className="select__label">
-            <Text
-              size={
-                variant === variants.small ? Text.sizes.small : Text.sizes.basic
-              }
-              theme={Text.themes.emphasis}
+      <div className={cn('select', className, { 'select--error': error })}>
+        <div
+          className={`select__content select__content--position-${labelPosition}`}
+        >
+          {isLabelVisible ? (
+            <label className="select__label" htmlFor={id}>
+              {label || children ? (
+                <div className="select__label-text">
+                  <Text
+                    size={
+                      variant === variants.small
+                        ? Text.sizes.small
+                        : Text.sizes.basic
+                    }
+                    theme={Text.themes.emphasis}
+                  >
+                    {label}
+                  </Text>
+                  {asterix}
+                  {children}
+                </div>
+              ) : required ? (
+                asterix
+              ) : null}
+            </label>
+          ) : null}
+
+          <div className="select__native-wrapper">
+            <select
+              aria-label={isLabelVisible ? undefined : label}
+              className={`select__select select__select--variant-${variant}`}
+              id={id}
+              name={name}
+              onChange={onInputChange}
+              onInvalid={e => {
+                // NOTE: To not break compatibility
+                if (restProps.onInvalid) restProps.onInvalid(e);
+                onInvalid(e);
+              }}
+              ref={ref}
+              required={required}
+              {...restProps}
             >
-              {label}
-            </Text>
-            {required ? <span className="select__asterisk">*</span> : null}
-            {children}
+              {options.map(option => (
+                <Option key={option.value} {...option} />
+              ))}
+            </select>
+            <span className="select__chevron">
+              <SvgArrowDown />
+            </span>
           </div>
-        ) : required ? (
-          <span className="select__asterisk">*</span>
-        ) : null}
 
-        <div className="select__native-wrapper">
-          <select
-            className={cn('select__select', {
-              'select__select--variant-small': variant === variants.small,
-              'select__select--variant-large': variant === variants.large,
-            })}
-            name={name}
-            ref={ref}
-            onChange={onInputChange}
-            required={required}
-            onInvalid={e => {
-              // NOTE: To not break compatibility
-              if (restProps.onInvalid) restProps.onInvalid(e);
-              onInvalid(e);
-            }}
-            aria-label={isLabelVisible ? undefined : label}
-            {...restProps}
-          >
-            {options.map(option => (
-              <Option key={option.value} {...option} />
-            ))}
-          </select>
-          <span className="select__chevron">
-            <SvgArrowDown />
-          </span>
+          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+          {error ? (
+            <div aria-hidden="true" className="select__error">
+              {error}
+            </div>
+          ) : null}
         </div>
-
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error && (
-          <div aria-hidden="true" className="select__error">
-            {error}
-          </div>
-        )}
-      </label>
+      </div>
     );
   },
 );
@@ -114,7 +120,8 @@ const SelectComponent = RefSelect as <OptionExtra>(
 ) => React.ReactElement;
 
 const Select: typeof SelectComponent & {
+  labelPositions: typeof labelPositions;
   variants: typeof variants;
-} = Object.assign(SelectComponent, { variants });
+} = Object.assign(SelectComponent, { labelPositions, variants });
 
 export default Select;

package/react/select/select.types.ts

@@ -10,10 +10,11 @@ export const labelPositions = {
 export const variants = {
   small: 'small',
   large: 'large',
-};
+} as const;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Select<OptionExtra = any> = {
+  id: string;
   isLabelVisible?: boolean;
   label?: string;
   labelPosition?: ObjectValues<typeof labelPositions>;