From afa83c8d55fcad6e57bf9333b147dc7d0df75ee1 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Fri, 24 Feb 2023 10:17:40 +0100 Subject: [PATCH] Add target and prefetch to a link (#1117) ## Description Adding target and prefetch to initial properties of a Link component along with the defaults ## Steps for reproduction 1. add a link 2. try target prop 3. try prefetch options ## Code Review - [ ] hi @rpominov, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory --- .../app/canvas/custom-components/link.tsx | 13 +++++++++---- packages/generate-arg-types/src/arg-types.ts | 2 +- .../custom-components/shared/remix-link.tsx | 7 ++++--- .../__generated__/blockquote.props.ts | 4 ++-- .../components/__generated__/body.props.ts | 4 ++-- .../components/__generated__/bold.props.ts | 4 ++-- .../src/components/__generated__/box.props.ts | 4 ++-- .../components/__generated__/button.props.ts | 4 ++-- .../components/__generated__/code.props.ts | 4 ++-- .../components/__generated__/form.props.ts | 4 ++-- .../components/__generated__/heading.props.ts | 4 ++-- .../components/__generated__/image.props.ts | 4 ++-- .../components/__generated__/input.props.ts | 4 ++-- .../components/__generated__/italic.props.ts | 4 ++-- .../components/__generated__/link.props.ts | 18 +++++++++++++++--- .../__generated__/list-item.props.ts | 4 ++-- .../components/__generated__/list.props.ts | 6 +++--- .../__generated__/paragraph.props.ts | 4 ++-- .../__generated__/rich-text-link.props.ts | 19 +++++++++++++++---- .../__generated__/separator.props.ts | 4 ++-- .../components/__generated__/span.props.ts | 4 ++-- .../__generated__/subscript.props.ts | 4 ++-- .../__generated__/superscript.props.ts | 4 ++-- .../__generated__/text-block.props.ts | 4 ++-- packages/react-sdk/src/components/link.tsx | 13 +++++++++++-- packages/react-sdk/src/components/link.ws.tsx | 2 +- .../src/components/rich-text-link.tsx | 9 +++++---- 27 files changed, 100 insertions(+), 61 deletions(-) diff --git a/apps/builder/app/canvas/custom-components/link.tsx b/apps/builder/app/canvas/custom-components/link.tsx index bb43351339..49192437b5 100644 --- a/apps/builder/app/canvas/custom-components/link.tsx +++ b/apps/builder/app/canvas/custom-components/link.tsx @@ -11,10 +11,10 @@ import { preserveSearchBuildParams } from "~/shared/router-utils"; const isAbsoluteUrl = (href: string) => { try { new URL(href); - return true; - } catch (e) { + } catch { return false; } + return true; }; export const preserveBuildParams = (href: string, sourceSearch: string) => { @@ -33,7 +33,7 @@ export const preserveBuildParams = (href: string, sourceSearch: string) => { sourceSearchParams = new URLSearchParams(sourceSearch); // eslint-disable-next-line no-empty - } catch (e) {} + } catch {} if (url === undefined || sourceSearchParams === undefined) { return href; @@ -46,7 +46,12 @@ export const preserveBuildParams = (href: string, sourceSearch: string) => { return `${url.pathname}${search === "" ? "" : `?${search}`}`; }; -type Props = Omit, "href"> & { href?: string }; +// @todo this copy-paste has to go away, along with this wrapper component +type Props = Omit, "href" | "target"> & { + href?: string; + target?: "self" | "blank" | "parent" | "top"; + prefetch?: "none" | "intent" | "render"; +}; type Ref = ElementRef<"a">; diff --git a/packages/generate-arg-types/src/arg-types.ts b/packages/generate-arg-types/src/arg-types.ts index 925aaed241..3baf9648a4 100644 --- a/packages/generate-arg-types/src/arg-types.ts +++ b/packages/generate-arg-types/src/arg-types.ts @@ -88,7 +88,7 @@ export const getArgType = (propItem: PropItem): PropMeta | undefined => { ); return makePropMeta( "string", - options.length <= 5 ? "radio" : "select", + options.length <= 3 ? "radio" : "select", { options } ); } diff --git a/packages/react-sdk/src/app/custom-components/shared/remix-link.tsx b/packages/react-sdk/src/app/custom-components/shared/remix-link.tsx index 1afba6d584..95fb4d2f3e 100644 --- a/packages/react-sdk/src/app/custom-components/shared/remix-link.tsx +++ b/packages/react-sdk/src/app/custom-components/shared/remix-link.tsx @@ -6,12 +6,13 @@ import type { ForwardRefExoticComponent, } from "react"; import { forwardRef } from "react"; +import type { Link as BaseLink } from "../../../components/link"; const isAbsoluteUrl = (href: string) => { try { new URL(href); return true; - } catch (e) { + } catch { return false; } }; @@ -21,7 +22,7 @@ const isAbsoluteUrl = (href: string) => { const isAbsoluteUrlRemix = (href: string) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//"); -type Props = Omit, "href"> & { href?: string }; +type Props = ComponentProps; type Ref = ElementRef<"a">; @@ -41,7 +42,7 @@ export const wrapLinkComponent = ( if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) { return ( - = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -406,7 +406,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/body.props.ts b/packages/react-sdk/src/components/__generated__/body.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/body.props.ts +++ b/packages/react-sdk/src/components/__generated__/body.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/bold.props.ts b/packages/react-sdk/src/components/__generated__/bold.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/bold.props.ts +++ b/packages/react-sdk/src/components/__generated__/bold.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/box.props.ts b/packages/react-sdk/src/components/__generated__/box.props.ts index 3fb234f501..aed5b33ae8 100644 --- a/packages/react-sdk/src/components/__generated__/box.props.ts +++ b/packages/react-sdk/src/components/__generated__/box.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/button.props.ts b/packages/react-sdk/src/components/__generated__/button.props.ts index 8fc5ce8b62..d17a5b3d26 100644 --- a/packages/react-sdk/src/components/__generated__/button.props.ts +++ b/packages/react-sdk/src/components/__generated__/button.props.ts @@ -120,7 +120,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -422,7 +422,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/code.props.ts b/packages/react-sdk/src/components/__generated__/code.props.ts index 8c6a44796f..8e3eedc03c 100644 --- a/packages/react-sdk/src/components/__generated__/code.props.ts +++ b/packages/react-sdk/src/components/__generated__/code.props.ts @@ -104,7 +104,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["inline", "list", "none", "both"], }, @@ -406,7 +406,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/form.props.ts b/packages/react-sdk/src/components/__generated__/form.props.ts index 765b1a202f..68835d18a7 100644 --- a/packages/react-sdk/src/components/__generated__/form.props.ts +++ b/packages/react-sdk/src/components/__generated__/form.props.ts @@ -111,7 +111,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -413,7 +413,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/heading.props.ts b/packages/react-sdk/src/components/__generated__/heading.props.ts index 1d3b4122d2..93db54c34d 100644 --- a/packages/react-sdk/src/components/__generated__/heading.props.ts +++ b/packages/react-sdk/src/components/__generated__/heading.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/image.props.ts b/packages/react-sdk/src/components/__generated__/image.props.ts index 415f0447e6..5fb214b4db 100644 --- a/packages/react-sdk/src/components/__generated__/image.props.ts +++ b/packages/react-sdk/src/components/__generated__/image.props.ts @@ -144,7 +144,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -446,7 +446,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/input.props.ts b/packages/react-sdk/src/components/__generated__/input.props.ts index a328e33f18..c97cb2949b 100644 --- a/packages/react-sdk/src/components/__generated__/input.props.ts +++ b/packages/react-sdk/src/components/__generated__/input.props.ts @@ -141,7 +141,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -443,7 +443,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/italic.props.ts b/packages/react-sdk/src/components/__generated__/italic.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/italic.props.ts +++ b/packages/react-sdk/src/components/__generated__/italic.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/link.props.ts b/packages/react-sdk/src/components/__generated__/link.props.ts index a4ab21e834..77eb1f20ce 100644 --- a/packages/react-sdk/src/components/__generated__/link.props.ts +++ b/packages/react-sdk/src/components/__generated__/link.props.ts @@ -10,7 +10,13 @@ export const props: Record = { media: { required: false, control: "text", type: "string" }, ping: { required: false, control: "text", type: "string" }, rel: { required: false, control: "text", type: "string" }, - target: { required: false, control: "text", type: "string" }, + target: { + required: false, + control: "select", + type: "string", + defaultValue: "self", + options: ["self", "blank", "parent", "top"], + }, type: { required: false, control: "text", type: "string" }, referrerPolicy: { required: false, @@ -127,7 +133,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -429,7 +435,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, @@ -459,4 +465,10 @@ export const props: Record = { control: "text", type: "string", }, + prefetch: { + required: false, + control: "radio", + type: "string", + options: ["none", "intent", "render"], + }, }; diff --git a/packages/react-sdk/src/components/__generated__/list-item.props.ts b/packages/react-sdk/src/components/__generated__/list-item.props.ts index b340a3205d..7cff9cb800 100644 --- a/packages/react-sdk/src/components/__generated__/list-item.props.ts +++ b/packages/react-sdk/src/components/__generated__/list-item.props.ts @@ -104,7 +104,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -406,7 +406,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/list.props.ts b/packages/react-sdk/src/components/__generated__/list.props.ts index 87068cc196..17f023d433 100644 --- a/packages/react-sdk/src/components/__generated__/list.props.ts +++ b/packages/react-sdk/src/components/__generated__/list.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, @@ -439,7 +439,7 @@ export const props: Record = { start: { required: false, control: "number", type: "number" }, type: { required: false, - control: "radio", + control: "select", type: "string", options: ["a", "i", "1", "A", "I"], }, diff --git a/packages/react-sdk/src/components/__generated__/paragraph.props.ts b/packages/react-sdk/src/components/__generated__/paragraph.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/paragraph.props.ts +++ b/packages/react-sdk/src/components/__generated__/paragraph.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/rich-text-link.props.ts b/packages/react-sdk/src/components/__generated__/rich-text-link.props.ts index a4ab21e834..62f777e08d 100644 --- a/packages/react-sdk/src/components/__generated__/rich-text-link.props.ts +++ b/packages/react-sdk/src/components/__generated__/rich-text-link.props.ts @@ -5,12 +5,17 @@ export const props: Record = { style: { required: false, control: "text", type: "string" }, title: { required: false, control: "text", type: "string" }, download: { required: false, control: "text", type: "string" }, - href: { required: false, control: "text", type: "string", defaultValue: "" }, + href: { required: false, control: "text", type: "string" }, hrefLang: { required: false, control: "text", type: "string" }, media: { required: false, control: "text", type: "string" }, ping: { required: false, control: "text", type: "string" }, rel: { required: false, control: "text", type: "string" }, - target: { required: false, control: "text", type: "string" }, + target: { + required: false, + control: "select", + type: "string", + options: ["self", "blank", "parent", "top"], + }, type: { required: false, control: "text", type: "string" }, referrerPolicy: { required: false, @@ -127,7 +132,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -429,7 +434,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, @@ -459,4 +464,10 @@ export const props: Record = { control: "text", type: "string", }, + prefetch: { + required: false, + control: "radio", + type: "string", + options: ["none", "intent", "render"], + }, }; diff --git a/packages/react-sdk/src/components/__generated__/separator.props.ts b/packages/react-sdk/src/components/__generated__/separator.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/separator.props.ts +++ b/packages/react-sdk/src/components/__generated__/separator.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/span.props.ts b/packages/react-sdk/src/components/__generated__/span.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/span.props.ts +++ b/packages/react-sdk/src/components/__generated__/span.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/subscript.props.ts b/packages/react-sdk/src/components/__generated__/subscript.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/subscript.props.ts +++ b/packages/react-sdk/src/components/__generated__/subscript.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/superscript.props.ts b/packages/react-sdk/src/components/__generated__/superscript.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/superscript.props.ts +++ b/packages/react-sdk/src/components/__generated__/superscript.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/__generated__/text-block.props.ts b/packages/react-sdk/src/components/__generated__/text-block.props.ts index 6c67129777..712774836a 100644 --- a/packages/react-sdk/src/components/__generated__/text-block.props.ts +++ b/packages/react-sdk/src/components/__generated__/text-block.props.ts @@ -103,7 +103,7 @@ export const props: Record = { description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", required: false, - control: "radio", + control: "select", type: "string", options: ["list", "none", "inline", "both"], }, @@ -405,7 +405,7 @@ export const props: Record = { description: "Indicates if items in a table or grid are sorted in ascending or descending order.", required: false, - control: "radio", + control: "select", type: "string", options: ["none", "ascending", "descending", "other"], }, diff --git a/packages/react-sdk/src/components/link.tsx b/packages/react-sdk/src/components/link.tsx index 622a8730c5..b1ca365f5a 100644 --- a/packages/react-sdk/src/components/link.tsx +++ b/packages/react-sdk/src/components/link.tsx @@ -1,9 +1,18 @@ import { forwardRef, type ElementRef, type ComponentProps } from "react"; -type Props = Omit, "href"> & { href?: string }; +// @todo props that come from remix link, shouldn't be here at all +// - prefetch should be only on remix component and it already is +// - props meta should be generated from Remix link +type Props = Omit, "href" | "target"> & { + href?: string; + target?: "self" | "blank" | "parent" | "top"; + prefetch?: "none" | "intent" | "render"; +}; export const Link = forwardRef, Props>( - ({ href = "", ...props }, ref) => + ({ href = "", target = "self", ...props }, ref) => { + return ; + } ); Link.displayName = "Link"; diff --git a/packages/react-sdk/src/components/link.ws.tsx b/packages/react-sdk/src/components/link.ws.tsx index ed3ca31a2a..8dd965ebb5 100644 --- a/packages/react-sdk/src/components/link.ws.tsx +++ b/packages/react-sdk/src/components/link.ws.tsx @@ -24,5 +24,5 @@ export const meta: WsComponentMeta = { export const propsMeta: WsComponentPropsMeta = { props, - initialProps: ["href"], + initialProps: ["href", "target", "prefetch"], }; diff --git a/packages/react-sdk/src/components/rich-text-link.tsx b/packages/react-sdk/src/components/rich-text-link.tsx index 764e164faa..68371a3ad9 100644 --- a/packages/react-sdk/src/components/rich-text-link.tsx +++ b/packages/react-sdk/src/components/rich-text-link.tsx @@ -1,9 +1,10 @@ import { forwardRef, type ElementRef, type ComponentProps } from "react"; +import { Link } from "./link"; -type Props = Omit, "href"> & { href?: string }; +type Props = ComponentProps; -export const RichTextLink = forwardRef, Props>( - ({ href = "", ...props }, ref) => -); +export const RichTextLink = forwardRef, Props>((props, ref) => ( + +)); RichTextLink.displayName = "RichTextLink";