@descope/flow-components 2.0.116 → 2.0.118

package/dist/index.cjs.js

@@ -103,7 +103,8 @@ var icons = /*#__PURE__*/Object.freeze({
 
 const Button = React__default.default.forwardRef(({ children, startIcon, startIconColorText, color, ...props }, ref) => {
     const icon = React.useMemo(() => icons[startIcon]?.({ noColor: startIconColorText }), [startIcon, startIconColorText]);
-    return (React__default.default.createElement("descope-button", { ...props, mode: color, ref: ref },
+    const isSquare = React.useMemo(() => !!(icon && !children), [icon, children]);
+    return (React__default.default.createElement("descope-button", { ...props, mode: color, ref: ref, square: isSquare },
         icon,
         children));
 });
@@ -246,6 +247,31 @@ const UploadFile = React__default.default.forwardRef((props, ref) => React__defa
 
 const Recaptcha = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-recaptcha", { ref: ref, ...props }));
 
+const ButtonSelectionGroup = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-button-selection-group", { ...props, ref: ref }));
+ButtonSelectionGroup.defaultProps = {
+    // eslint-disable-next-line react/default-props-match-prop-types
+    size: 'md'
+};
+
+const ComboBox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-combo-box", { ...props, ref: ref }));
+ComboBox.defaultProps = {
+    // eslint-disable-next-line react/default-props-match-prop-types
+    size: 'md',
+    // eslint-disable-next-line react/default-props-match-prop-types
+    bordered: true
+};
+
+const SingleSelect = React__default.default.forwardRef(({ type, data, ...props }, ref) => {
+    switch (type) {
+        case 'button-selection-group':
+            return (React__default.default.createElement(ButtonSelectionGroup, { ...props, ref: ref }, data.map(({ label, value }) => (React__default.default.createElement("descope-button-selection-group-item", { value: value }, label)))));
+        case 'combobox':
+            return (React__default.default.createElement(ComboBox, { "item-label-path": "data-name", "item-value-path": "id", ...props, ref: ref }, data.map(({ label, value }) => (React__default.default.createElement("span", { "data-name": label, "data-id": value }, label)))));
+        default:
+            return null;
+    }
+});
+
 exports.Boolean = Boolean;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
@@ -263,6 +289,7 @@ exports.Password = Password;
 exports.Phone = Phone;
 exports.Recaptcha = Recaptcha;
 exports.Select = Select;
+exports.SingleSelect = SingleSelect;
 exports.Switch = Switch;
 exports.TOTPImage = TOTPImage;
 exports.TOTPLink = TOTPLink;

package/dist/index.d.ts

@@ -44,14 +44,15 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "r
 type BooleanType = {
     type: 'switch' | 'checkbox';
 };
-type Props$f = React.ComponentProps<typeof Checkbox> & React.ComponentProps<typeof Switch> & BooleanType;
-declare const Boolean: React.ForwardRefExoticComponent<Omit<Props$f, "ref"> & React.RefAttributes<HTMLInputElement>>;
+type Props$h = React.ComponentProps<typeof Checkbox> & React.ComponentProps<typeof Switch> & BooleanType;
+declare const Boolean: React.ForwardRefExoticComponent<Omit<Props$h, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare global {
     namespace JSX {
         interface IntrinsicElements {
             'descope-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
                 mode: string;
+                square?: boolean;
             };
         }
     }
@@ -66,17 +67,17 @@ declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes
     'full-width'?: boolean;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Props$e = {
+type Props$g = {
     digits?: number;
 };
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-passcode': DescopeInputProps & Props$e;
+            'descope-passcode': DescopeInputProps & Props$g;
         }
     }
 }
-declare const Code: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$e, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Code: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$g, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 type Never<T extends Record<string, any>> = {
     [K in keyof T]: never;
@@ -92,7 +93,7 @@ type ContainerAlignment = {
     'vertical-alignment'?: FlexAlignment;
     'space-between'?: 'sm' | 'md' | 'lg';
 };
-type Props$d = {
+type Props$f = {
     direction?: 'row' | 'column';
     shadow?: 'md' | 'lg' | 'xl' | '2xl';
     'border-radius'?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
@@ -108,9 +109,9 @@ declare global {
         }
     }
 }
-declare const Container: React.ForwardRefExoticComponent<(Props$d & React.HTMLAttributes<HTMLDivElement>) & React.RefAttributes<HTMLDivElement>>;
+declare const Container: React.ForwardRefExoticComponent<(Props$f & React.HTMLAttributes<HTMLDivElement>) & React.RefAttributes<HTMLDivElement>>;
 
-type Props$c = {
+type Props$e = {
     vertical?: boolean;
     italic?: boolean;
     variant?: TypographyVariants;
@@ -120,11 +121,11 @@ type Props$c = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-divider': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & Omit<Props$c, 'children'>;
+            'descope-divider': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & Omit<Props$e, 'children'>;
         }
     }
 }
-declare const Divider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & Props$c, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Divider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & Props$e, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare const _default$b: ({ noColor }: {
     noColor: any;
@@ -174,7 +175,7 @@ declare const _default: ({ noColor }: {
     noColor: any;
 }) => React.JSX.Element;
 
-type Props$b = {
+type Props$d = {
     width?: string;
     height?: string;
     alt?: string;
@@ -183,15 +184,15 @@ type Props$b = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$b;
+            'descope-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$d;
         }
     }
 }
-declare const Image: React.ForwardRefExoticComponent<Props$b & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const Image: React.ForwardRefExoticComponent<Props$d & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 
 declare const Input: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$a = {
+type Props$c = {
     href?: string | undefined;
     italic?: boolean;
     variant?: TypographyVariants;
@@ -203,18 +204,18 @@ type Props$a = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & Omit<Props$a, 'children'>;
+            'descope-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & Omit<Props$c, 'children'>;
         }
     }
 }
-declare const Link: React.ForwardRefExoticComponent<Props$a & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<Props$c & React.RefAttributes<HTMLAnchorElement>>;
 
-type Props$9 = {
+type Props$b = {
     variant?: 'linear' | 'radial';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     color?: Mode;
 };
-type LoaderType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$9>;
+type LoaderType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$b>;
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -223,22 +224,22 @@ declare global {
         }
     }
 }
-declare const Loader: React.ForwardRefExoticComponent<Props$9 & React.RefAttributes<HTMLDivElement>>;
+declare const Loader: React.ForwardRefExoticComponent<Props$b & React.RefAttributes<HTMLDivElement>>;
 
-type Props$8 = {
+type Props$a = {
     width?: string;
     height?: string;
 };
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$8>;
+            'descope-logo': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$a>;
         }
     }
 }
-declare const Logo: React.ForwardRefExoticComponent<Props$8 & React.RefAttributes<HTMLDivElement>>;
+declare const Logo: React.ForwardRefExoticComponent<Props$a & React.RefAttributes<HTMLDivElement>>;
 
-type Props$7 = {
+type Props$9 = {
     'password-label'?: string;
     'password-placeholder'?: string;
     'confirm-label'?: string;
@@ -248,11 +249,11 @@ type Props$7 = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-new-password': DescopeInputProps & Props$7;
+            'descope-new-password': DescopeInputProps & Props$9;
         }
     }
 }
-declare const NewPassword: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$7, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const NewPassword: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$9, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare global {
     namespace JSX {
@@ -272,16 +273,16 @@ declare global {
 }
 declare const Password: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$6 = {
+type Props$8 = {
     variant: 'countrySelection' | 'inputBox';
     'default-code'?: string;
     'phone-input-placeholder'?: string;
     'country-input-placeholder'?: string;
     'restrict-countries'?: string;
 } & DescopeInputProps;
-declare const Phone: React.ForwardRefExoticComponent<Omit<Props$6, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Phone: React.ForwardRefExoticComponent<Omit<Props$8, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$5 = {
+type Props$7 = {
     children?: JSX.Element[];
 };
 declare global {
@@ -291,9 +292,9 @@ declare global {
         }
     }
 }
-declare const Select: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$5, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Select: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & Props$7, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$4 = {
+type Props$6 = {
     italic?: boolean;
     variant?: string;
     mode?: string;
@@ -303,11 +304,11 @@ type Props$4 = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$4;
+            'descope-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$6;
         }
     }
 }
-declare const Text: React.ForwardRefExoticComponent<Omit<Props$4 & {
+declare const Text: React.ForwardRefExoticComponent<Omit<Props$6 & {
     typography?: TypographyVariants;
 } & Omit<React.HTMLProps<HTMLSpanElement>, "mode">, "ref"> & React.RefAttributes<HTMLElement>>;
 
@@ -329,23 +330,23 @@ declare global {
 }
 declare const TextField: React.ForwardRefExoticComponent<Omit<DescopeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type Props$3 = {
+type Props$5 = {
     width?: string;
     height?: string;
 };
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-totp-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$3>;
+            'descope-totp-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & PropsToAttrs<Props$5>;
         }
     }
 }
-declare const TOTPImage: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLDivElement>>;
+declare const TOTPImage: React.ForwardRefExoticComponent<Props$5 & React.RefAttributes<HTMLDivElement>>;
 
-type Props$2 = Omit<React.ComponentProps<typeof Link>, 'href'>;
-declare const TOTPLink: React.ForwardRefExoticComponent<Omit<Props$2, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+type Props$4 = Omit<React.ComponentProps<typeof Link>, 'href'>;
+declare const TOTPLink: React.ForwardRefExoticComponent<Omit<Props$4, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
-type Props$1 = {
+type Props$3 = {
     title?: string;
     description?: string;
     icon?: string;
@@ -364,13 +365,13 @@ type Props$1 = {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'descope-upload-file': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$1;
+            'descope-upload-file': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$3;
         }
     }
 }
-declare const UploadFile: React.ForwardRefExoticComponent<Props$1 & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const UploadFile: React.ForwardRefExoticComponent<Props$3 & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-type Props = {
+type Props$2 = {
     disabled?: boolean;
     'site-key'?: string;
     enterprise?: boolean;
@@ -382,10 +383,41 @@ declare global {
     }
     namespace JSX {
         interface IntrinsicElements {
-            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props;
+            'descope-recaptcha': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Props$2;
+        }
+    }
+}
+declare const Recaptcha: React.ForwardRefExoticComponent<Props$2 & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type Props$1 = DescopeInputProps & {
+    'default-value': string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'descope-button-selection-group': Props$1;
+            'descope-button-selection-group-item': {
+                value: string;
+                children: string;
+            };
         }
     }
 }
-declare const Recaptcha: React.ForwardRefExoticComponent<Props & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ButtonSelectionGroup: React.ForwardRefExoticComponent<Omit<HTMLInputAttrs & DescopeInputExtraProps & {
+    'default-value': string;
+} & {
+    children: JSX.Element[];
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type Item = {
+    label: string;
+    value: string;
+};
+type SingleSelectType = {
+    type: 'button-selection-group' | 'combobox';
+    data: Item[];
+};
+type Props = React.ComponentProps<typeof ButtonSelectionGroup> & SingleSelectType;
+declare const SingleSelect: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-export { Boolean, Button, Checkbox, Code, Container, Divider, Image, Input, Link, Loader, Logo, NewPassword, NumberField, Password, Phone, Recaptcha, Select, Switch, TOTPImage, TOTPLink, Text, TextField, Textarea, UploadFile, _default$b as apple, _default$2 as discord, _default$a as facebook, _default$8 as fingerprint, _default$6 as github, _default$5 as gitlab, _default$4 as google, _default$1 as linkedin, _default$3 as microsoft, _default$7 as passkey, _default$9 as slack, _default as sso };
+export { Boolean, Button, Checkbox, Code, Container, Divider, Image, Input, Link, Loader, Logo, NewPassword, NumberField, Password, Phone, Recaptcha, Select, SingleSelect, Switch, TOTPImage, TOTPLink, Text, TextField, Textarea, UploadFile, _default$b as apple, _default$2 as discord, _default$a as facebook, _default$8 as fingerprint, _default$6 as github, _default$5 as gitlab, _default$4 as google, _default$1 as linkedin, _default$3 as microsoft, _default$7 as passkey, _default$9 as slack, _default as sso };

package/dist/index.esm.js

@@ -97,7 +97,8 @@ var icons = /*#__PURE__*/Object.freeze({
 
 const Button = React.forwardRef(({ children, startIcon, startIconColorText, color, ...props }, ref) => {
     const icon = useMemo(() => icons[startIcon]?.({ noColor: startIconColorText }), [startIcon, startIconColorText]);
-    return (React.createElement("descope-button", { ...props, mode: color, ref: ref },
+    const isSquare = useMemo(() => !!(icon && !children), [icon, children]);
+    return (React.createElement("descope-button", { ...props, mode: color, ref: ref, square: isSquare },
         icon,
         children));
 });
@@ -240,4 +241,29 @@ const UploadFile = React.forwardRef((props, ref) => React.createElement("descope
 
 const Recaptcha = React.forwardRef((props, ref) => React.createElement("descope-recaptcha", { ref: ref, ...props }));
 
-export { Boolean, Button, Checkbox, Code, Container, Divider, Image, Input, Link, Loader, Logo, NewPassword, NumberField, Password, Phone, Recaptcha, Select, Switch, TOTPImage, TOTPLink, Text, TextField, Textarea, UploadFile, apple, discord, facebook, fingerprint, github, gitlab, google, linkedin, microsoft, passkey, slack, sso };
+const ButtonSelectionGroup = React.forwardRef((props, ref) => React.createElement("descope-button-selection-group", { ...props, ref: ref }));
+ButtonSelectionGroup.defaultProps = {
+    // eslint-disable-next-line react/default-props-match-prop-types
+    size: 'md'
+};
+
+const ComboBox = React.forwardRef((props, ref) => React.createElement("descope-combo-box", { ...props, ref: ref }));
+ComboBox.defaultProps = {
+    // eslint-disable-next-line react/default-props-match-prop-types
+    size: 'md',
+    // eslint-disable-next-line react/default-props-match-prop-types
+    bordered: true
+};
+
+const SingleSelect = React.forwardRef(({ type, data, ...props }, ref) => {
+    switch (type) {
+        case 'button-selection-group':
+            return (React.createElement(ButtonSelectionGroup, { ...props, ref: ref }, data.map(({ label, value }) => (React.createElement("descope-button-selection-group-item", { value: value }, label)))));
+        case 'combobox':
+            return (React.createElement(ComboBox, { "item-label-path": "data-name", "item-value-path": "id", ...props, ref: ref }, data.map(({ label, value }) => (React.createElement("span", { "data-name": label, "data-id": value }, label)))));
+        default:
+            return null;
+    }
+});
+
+export { Boolean, Button, Checkbox, Code, Container, Divider, Image, Input, Link, Loader, Logo, NewPassword, NumberField, Password, Phone, Recaptcha, Select, SingleSelect, Switch, TOTPImage, TOTPLink, Text, TextField, Textarea, UploadFile, apple, discord, facebook, fingerprint, github, gitlab, google, linkedin, microsoft, passkey, slack, sso };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.116",
+	"version": "2.0.118",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -99,7 +99,7 @@
 		"typescript": "^4.5.3"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.0.176",
+		"@descope/web-components-ui": "1.0.180",
 		"rollup-plugin-dts": "^5.3.0"
 	},
 	"peerDependencies": {