uikit-react-public 0.11.13 → 0.11.16

package/lib/components/Select/subcomponents/VisibleField.tsx

@@ -0,0 +1,69 @@
+import { css, cx } from '@emotion/css';
+import Icon from '../../Icon';
+import { useTheme } from '../../../theme';
+import { OptionData } from '../Select.types';
+
+const NAME = 'ucl-uikit-select__visible-field';
+
+interface VisibleFieldProps {
+  isOpen?: boolean;
+  disabled?: boolean;
+  selectedOption: OptionData | null | undefined;
+  placeholder?: string;
+}
+
+const Field = ({
+  selectedOption,
+  isOpen,
+  placeholder,
+  disabled,
+}: VisibleFieldProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    line-height: ${theme.font.lineHeight.h150};
+  `;
+
+  const innerStyle = css`
+    display: inline-flex;
+    gap: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+  `;
+
+  const iconStyle = css`
+    min-width: 24px;
+    margin-left: auto;
+    color: ${theme.color.interaction.blue70};
+    ${disabled && `color: ${theme.color.neutral.grey20};`}
+    ${isOpen && `transform: rotate(180deg);`}
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+    >
+      <span className={innerStyle}>
+        {selectedOption ? (
+          <>
+            {selectedOption.icon ?? null}
+            {selectedOption.text}
+          </>
+        ) : (
+          placeholder || ''
+        )}
+      </span>
+      <Icon.ChevronDown className={iconStyle} />
+    </div>
+  );
+};
+
+export default Field;

package/lib/components/Select/subcomponents/index.tsx

@@ -0,0 +1,5 @@
+export { default as CustomSelect } from './CustomSelect';
+export { default as NativeSelect } from './NativeSelect';
+export { default as CustomOption } from './CustomOption';
+export { default as Panel } from './Panel';
+export { default as VisibleField } from './VisibleField';

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "MIT",
-  "version": "0.11.13",
+  "version": "0.11.16",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,7 +41,6 @@
     ]
   },
   "dependencies": {
-    "@azure/msal-browser": "^4.7.0",
     "@emotion/css": "^11.13.5",
     "@floating-ui/react-dom": "^2.1.2"
   },
@@ -50,6 +49,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@azure/msal-browser": "^4.7.0",
     "@chromatic-com/storybook": "^3.2.5",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",

package/dist/components/Button/Button.types.d.ts

@@ -1,26 +0,0 @@
-import { ReactElement, ButtonHTMLAttributes, AnchorHTMLAttributes, ComponentPropsWithRef, ElementType, RefObject } from 'react';
-import { MarginProps } from '../common/marginsStyle';
-export interface ButtonBaseProps {
-    variant?: 'primary' | 'secondary' | 'tertiary';
-    destructive?: boolean;
-    size?: 'large' | 'default' | 'small';
-    disabled?: boolean;
-    icon?: ReactElement;
-    iconPosition?: 'left' | 'right';
-    tooltip?: string;
-    loading?: boolean;
-    fullWidth?: boolean;
-    testId?: string;
-    ref?: RefObject<HTMLElement | null>;
-}
-export type ButtonAsButtonProps = ButtonBaseProps & ButtonHTMLAttributes<HTMLButtonElement> & {
-    as?: 'button';
-};
-export type ButtonAsAnchorProps = ButtonBaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
-    as: 'a';
-};
-export type ButtonAsCustomProps<C extends ElementType> = ButtonBaseProps & {
-    as: C;
-} & Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
-export type ButtonProps = (ButtonAsButtonProps | ButtonAsAnchorProps | ButtonAsCustomProps<ElementType>) & MarginProps;
-export type Ref = Element;

package/lib/components/Button/Button.types.ts

@@ -1,46 +0,0 @@
-import {
-  ReactElement,
-  ButtonHTMLAttributes,
-  AnchorHTMLAttributes,
-  ComponentPropsWithRef,
-  ElementType,
-  RefObject,
-} from 'react';
-import { MarginProps } from '../common/marginsStyle';
-
-export interface ButtonBaseProps {
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  destructive?: boolean;
-  size?: 'large' | 'default' | 'small';
-  disabled?: boolean;
-  icon?: ReactElement;
-  iconPosition?: 'left' | 'right';
-  tooltip?: string;
-  loading?: boolean;
-  fullWidth?: boolean;
-  testId?: string;
-  ref?: RefObject<HTMLElement | null>;
-}
-
-export type ButtonAsButtonProps = ButtonBaseProps &
-  ButtonHTMLAttributes<HTMLButtonElement> & {
-    as?: 'button';
-  };
-
-export type ButtonAsAnchorProps = ButtonBaseProps &
-  AnchorHTMLAttributes<HTMLAnchorElement> & {
-    as: 'a';
-  };
-
-export type ButtonAsCustomProps<C extends ElementType> = ButtonBaseProps & {
-  as: C;
-} & Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
-
-export type ButtonProps = (
-  | ButtonAsButtonProps
-  | ButtonAsAnchorProps
-  | ButtonAsCustomProps<ElementType>
-) &
-  MarginProps;
-
-export type Ref = Element;