react-better-html 1.1.278 → 1.1.280

package/dist/index.d.mts

@@ -176,6 +176,8 @@ type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label" |
 type TextProps<As extends TextAs = "p"> = {
     /** @default "p" */
     as?: As;
+    /** @default false */
+    isTabAccessed?: boolean;
     htmlContentTranslate?: React.ComponentProps<"div">["translate"];
 } & OmitProps<React.ComponentProps<As>, "style"> & ComponentStyle & ComponentHoverStyle;
 type TextComponentType = {
@@ -256,7 +258,7 @@ declare const Div: typeof DivComponent & {
     box: typeof DivComponent.box;
 };
 
-type ChipProps<Value = unknown> = {
+type InternalChipProps<Value = unknown> = {
     text: string | React.ReactNode;
     beforeText?: React.ReactNode;
     afterText?: React.ReactNode;
@@ -271,7 +273,9 @@ type ChipProps<Value = unknown> = {
     value?: Value;
     onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
     onClickWithValue?: (value: Value) => void;
+    fromSubcomponent?: boolean;
 } & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle" | keyof ComponentPaddingProps | "transition" | "height"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
+type ChipProps<Value = unknown> = OmitProps<InternalChipProps<Value>, "fromSubcomponent">;
 type ChipComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
     colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
@@ -504,6 +508,9 @@ type BetterHtmlConfig = {
             /** @default 80 */
             sidebarWidth?: number;
         };
+        chip?: {
+            style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
+        };
     };
 };
 
@@ -811,6 +818,9 @@ type PageHolderComponentType = {
         pageBackgroundColor?: React.CSSProperties["backgroundColor"];
         pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
+        border?: React.CSSProperties["border"];
+        borderRadius?: React.CSSProperties["borderRadius"];
+        boxShadow?: React.CSSProperties["boxShadow"];
         /** @default true */
         contentInsideBox?: boolean;
         behindComponent?: React.ReactNode;

package/dist/index.d.ts

@@ -176,6 +176,8 @@ type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label" |
 type TextProps<As extends TextAs = "p"> = {
     /** @default "p" */
     as?: As;
+    /** @default false */
+    isTabAccessed?: boolean;
     htmlContentTranslate?: React.ComponentProps<"div">["translate"];
 } & OmitProps<React.ComponentProps<As>, "style"> & ComponentStyle & ComponentHoverStyle;
 type TextComponentType = {
@@ -256,7 +258,7 @@ declare const Div: typeof DivComponent & {
     box: typeof DivComponent.box;
 };
 
-type ChipProps<Value = unknown> = {
+type InternalChipProps<Value = unknown> = {
     text: string | React.ReactNode;
     beforeText?: React.ReactNode;
     afterText?: React.ReactNode;
@@ -271,7 +273,9 @@ type ChipProps<Value = unknown> = {
     value?: Value;
     onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
     onClickWithValue?: (value: Value) => void;
+    fromSubcomponent?: boolean;
 } & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle" | keyof ComponentPaddingProps | "transition" | "height"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
+type ChipProps<Value = unknown> = OmitProps<InternalChipProps<Value>, "fromSubcomponent">;
 type ChipComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
     colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
@@ -504,6 +508,9 @@ type BetterHtmlConfig = {
             /** @default 80 */
             sidebarWidth?: number;
         };
+        chip?: {
+            style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
+        };
     };
 };
 
@@ -811,6 +818,9 @@ type PageHolderComponentType = {
         pageBackgroundColor?: React.CSSProperties["backgroundColor"];
         pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
+        border?: React.CSSProperties["border"];
+        borderRadius?: React.CSSProperties["borderRadius"];
+        boxShadow?: React.CSSProperties["boxShadow"];
         /** @default true */
         contentInsideBox?: boolean;
         behindComponent?: React.ReactNode;

package/dist/index.js

@@ -1392,17 +1392,30 @@ var TextStyledComponent = import_styled_components.default.p.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextComponent = (0, import_react2.forwardRef)(function Text({ as: asValue, htmlContentTranslate, children, ...props }, ref) {
+var TextComponent = (0, import_react2.forwardRef)(function Text({ as: asValue, isTabAccessed, htmlContentTranslate, onKeyDown, children, ...props }, ref) {
   const theme2 = (0, import_react_better_core2.useTheme)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
+  const onKeyDownElement = (0, import_react2.useCallback)(
+    (event) => {
+      onKeyDown?.(event);
+      if (!isTabAccessed) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    },
+    [onKeyDown, isTabAccessed]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     TextStyledComponent,
     {
       as: asValue,
+      tabIndex: isTabAccessed && !isMobileDevice ? 0 : void 0,
       theme: theme2,
       translate: htmlContentTranslate,
+      onKeyDown: onKeyDownElement,
       style,
       hoverStyle,
       isP: asValue === "p",
@@ -3671,19 +3684,24 @@ var import_react17 = require("react");
 var import_react_better_core15 = require("react-better-core");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var borderRadiusOffset = 1.3;
-var ChipComponent = (0, import_react17.forwardRef)(function Chip({
-  text,
-  beforeText,
-  afterText,
-  color,
-  backgroundColor,
-  borderRadius,
-  isCircle,
-  value,
-  onClick,
-  onClickWithValue,
-  ...props
-}, ref) {
+var ChipComponent = (0, import_react17.forwardRef)(function Chip({ fromSubcomponent, ...chipProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    text,
+    beforeText,
+    afterText,
+    color,
+    backgroundColor,
+    borderRadius,
+    isCircle,
+    value,
+    onClick,
+    onClickWithValue,
+    ...props
+  } = useComponentsPropsMerger(
+    !fromSubcomponent ? betterHtmlContextInternal.components.chip?.style?.default : {},
+    chipProps
+  );
   const theme2 = (0, import_react_better_core15.useTheme)();
   const onClickElement = (0, import_react17.useCallback)(
     (event) => {
@@ -3713,7 +3731,12 @@ var ChipComponent = (0, import_react17.forwardRef)(function Chip({
     }
   );
 });
-ChipComponent.colored = (0, import_react17.forwardRef)(function Colored({ color, withWhiteBackground, ...props }, ref) {
+ChipComponent.colored = (0, import_react17.forwardRef)(function Colored({ color, withWhiteBackground, ...chipProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.chip?.style?.colored,
+    chipProps
+  );
   const theme2 = (0, import_react_better_core15.useTheme)();
   const { colorTheme } = (0, import_react_better_core15.useBetterCoreContext)();
   const readyColor = color ?? theme2.colors.textSecondary;