@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/table/index.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/TableView.tsx
+
+// Port of packages/@react-spectrum/s2/src/TableView.tsx.
+
 import {
   Show,
   createContext,
@@ -5,12 +21,11 @@ import {
   createMemo,
   createSignal,
   getOwner,
-  mergeProps,
   runWithOwner,
-  splitProps,
   useContext,
-  type JSX,
+  createTrackedEffect,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Button as HeadlessButton,
   ColumnResizer as HeadlessColumnResizer,
@@ -56,7 +71,7 @@ import Arrow from "../icon/ui-icons/Arrow";
 import Checkmark from "../icon/ui-icons/Checkmark";
 import Chevron from "../icon/ui-icons/Chevron";
 import Dash from "../icon/ui-icons/Dash";
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import type { StyleString } from "../style";
 import {
   baseColor,
@@ -72,7 +87,7 @@ import {
   getAllowedOverrides,
 } from "../s2-internal/style-utils" with { type: "macro" };
 import { createMediaQuery } from "../utils/createMediaQuery";
-import { createStringFormatter, getOwnerDocument } from "@proyecto-viviana/solidaria";
+import { mergeProps, createStringFormatter, getOwnerDocument } from "@proyecto-viviana/solidaria";
 import {
   ActionButton,
   ActionButtonContext,
@@ -86,6 +101,7 @@ import { ButtonGroup } from "../buttongroup";
 import { CustomDialog, DialogContainer } from "../dialog";
 import Cross from "../icon/ui-icons/Cross";
 import { s2IntlStrings } from "../intl";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type TableSize = "sm" | "md" | "lg";
 export type TableVariant = "default" | "striped" | "bordered";
@@ -1164,12 +1180,20 @@ function inlineStyle(
 }
 
 export function Table<T extends object>(props: TableProps<T>): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as TableProps<T> & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(
     useContext(TableContext),
     (props as { slot?: string }).slot,
   );
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps<TableProps<T>>(flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "children",
     "density",
@@ -1214,7 +1238,7 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
   );
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     setActionSelectedKeys(
       selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
     );
@@ -1295,11 +1319,7 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     </div>
   );
 
-  return (
-    <InternalTableContext.Provider value={context()}>
-      {renderFramed()}
-    </InternalTableContext.Provider>
-  );
+  return <InternalTableContext value={context()}>{renderFramed()}</InternalTableContext>;
 }
 
 export function TableHeader(props: TableHeaderProps): JSX.Element {
@@ -1349,22 +1369,27 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
 
   return (
     <HeadlessTableColumn {...headlessProps} class={className} style={local.UNSAFE_style}>
-      {(renderProps: TableColumnRenderProps) => (
-        <>
-          <span class={tableColumnContent({ align: align(), overflowMode: context.overflowMode })}>
-            {renderProps.isSortable && renderProps.sortDirection ? (
-              <SortIcon direction={renderProps.sortDirection} />
-            ) : null}
-            <span>
-              {typeof local.children === "function" ? local.children(renderProps) : local.children}
+      {(renderProps: TableColumnRenderProps) => {
+        const rawChildren = local.children;
+        return (
+          <>
+            <span
+              class={tableColumnContent({ align: align(), overflowMode: context.overflowMode })}
+            >
+              {renderProps.isSortable && renderProps.sortDirection ? (
+                <SortIcon direction={renderProps.sortDirection} />
+              ) : null}
+              <span>
+                {typeof rawChildren === "function" ? rawChildren(renderProps) : rawChildren}
+              </span>
+              {renderProps.allowsResizing && props.id != null ? (
+                <ColumnResizer column={{ key: props.id }} />
+              ) : null}
             </span>
-            {renderProps.allowsResizing && props.id != null ? (
-              <ColumnResizer column={{ key: props.id }} />
-            ) : null}
-          </span>
-          {renderProps.isFocusVisible ? <CellFocusRing /> : null}
-        </>
-      )}
+            {renderProps.isFocusVisible ? <CellFocusRing /> : null}
+          </>
+        );
+      }}
     </HeadlessTableColumn>
   );
 }
@@ -1555,8 +1580,10 @@ export function TableCell(props: TableCellProps): JSX.Element {
       .filter(Boolean)
       .join(" ");
 
-  const renderChildren = (renderProps: TableCellRenderProps) =>
-    typeof local.children === "function" ? local.children(renderProps) : local.children;
+  const renderChildren = (renderProps: TableCellRenderProps) => {
+    const rawChildren = local.children;
+    return typeof rawChildren === "function" ? rawChildren(renderProps) : rawChildren;
+  };
   const content = (renderProps: TableCellRenderProps) => (
     <div class={tableCellContent({ align: align(), overflowMode: context.overflowMode })}>
       {renderChildren(renderProps)}
@@ -1752,7 +1779,7 @@ function EditableCellInner(props: EditableCellInnerProps): JSX.Element {
   // Position the popover relative to the cell: measure the trigger and table
   // widths, and offset upward by the row height so it overlays the cell. Mirrors
   // the S2 useLayoutEffect.
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (!isOpen()) {
       return;
     }
@@ -1766,7 +1793,7 @@ function EditableCellInner(props: EditableCellInnerProps): JSX.Element {
 
   // Auto-select the entire text range of the autofocused input when the editor
   // opens. Re-runs once the form element mounts. Mirrors the S2 useEffect.
-  createEffect(() => {
+  createTrackedEffect(() => {
     const form = formEl();
     if (!isOpen() || !form) {
       return;
@@ -1857,13 +1884,13 @@ function EditableCellInner(props: EditableCellInnerProps): JSX.Element {
   };
 
   return (
-    <ButtonContext.Provider value={null}>
-      <ActionButtonContext.Provider value={editSlots}>
+    <ButtonContext value={null}>
+      <ActionButtonContext value={editSlots}>
         <div class={tableCellContent({ align: props.align(), overflowMode: props.overflowMode() })}>
           {props.renderChildren()}
         </div>
 
-        <ActionButtonContext.Provider value={null}>
+        <ActionButtonContext value={null}>
           <Show when={!isMobile()}>
             <HeadlessPopover
               isOpen={isOpen()}
@@ -1879,7 +1906,7 @@ function EditableCellInner(props: EditableCellInnerProps): JSX.Element {
                 maxWidth: `${tableWidth()}px`,
               })}
             >
-              <OverlayTriggerStateContext.Provider value={null}>
+              <OverlayTriggerStateContext value={null}>
                 <HeadlessForm
                   ref={attachForm}
                   action={props.action}
@@ -1904,7 +1931,7 @@ function EditableCellInner(props: EditableCellInnerProps): JSX.Element {
                     </ActionButton>
                   </div>
                 </HeadlessForm>
-              </OverlayTriggerStateContext.Provider>
+              </OverlayTriggerStateContext>
             </HeadlessPopover>
           </Show>
 
@@ -1931,9 +1958,9 @@ function EditableCellInner(props: EditableCellInnerProps): JSX.Element {
               </Show>
             </DialogContainer>
           </Show>
-        </ActionButtonContext.Provider>
-      </ActionButtonContext.Provider>
-    </ButtonContext.Provider>
+        </ActionButtonContext>
+      </ActionButtonContext>
+    </ButtonContext>
   );
 }
 
@@ -1964,9 +1991,7 @@ export function TableSelectionCheckbox(props: {
                 isDisabled: !!props.isDisabled,
               })}
             >
-              {props.isSelected ? (
-                <Checkmark size="XS" class={selectionCheckboxIcon} />
-              ) : null}
+              {props.isSelected ? <Checkmark size="XS" class={selectionCheckboxIcon} /> : null}
             </span>
           </span>
           {renderProps.isFocusVisible ? <CellFocusRing /> : null}
@@ -1982,11 +2007,7 @@ export function TableSelectAllCheckbox(): JSX.Element {
   const isSelected = () => state?.selectedKeys === "all";
   const isIndeterminate = () => {
     const keys = state?.selectedKeys;
-    if (!state || keys === "all" || keys == null || keys.size === 0) {
-      return false;
-    }
-
-    return keys.size < state.collection.size;
+    return !!state && keys !== "all" && keys != null && keys.size > 0;
   };
   const isDisabled = () =>
     !state || state.selectionMode !== "multiple" || state.collection.size === 0;

package/src/tabs/TabsPicker.tsx

@@ -1,16 +1,24 @@
 // @ts-nocheck
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/TabsPicker.tsx
+
+// Port of packages/@react-spectrum/s2/src/TabsPicker.tsx.
+
+import { createMemo, Show, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
-  createEffect,
-  createMemo,
-  createSignal,
-  onCleanup,
-  Show,
-  splitProps,
-  useContext,
-  type JSX,
-} from "solid-js";
-import {
-  Popover as HeadlessPopover,
   Select as HeadlessSelect,
   SelectContext as HeadlessSelectContext,
   SelectListBox as HeadlessSelectListBox,
@@ -21,13 +29,7 @@ import {
   type SelectOptionRenderProps,
 } from "@proyecto-viviana/solidaria-components";
 import type { Key } from "@proyecto-viviana/solid-stately";
-import {
-  baseColor,
-  focusRing,
-  lightDark,
-  setColorScheme,
-  style,
-} from "../style" with { type: "macro" };
+import { baseColor, focusRing, style } from "../style" with { type: "macro" };
 import { edgeToText } from "../style/spectrum-theme" with { type: "macro" };
 import { controlFont, fieldInput } from "../s2-internal/style-utils" with { type: "macro" };
 import { centerBaseline } from "../icon/center-baseline";
@@ -41,9 +43,10 @@ import {
   menuItemIconCenterWrapper,
   menuItemLabel,
 } from "../menu/s2-menu-styles";
-import { useTheme } from "../provider";
 import { TextContext } from "../text";
+import { Popover } from "../popover";
 import type { TabsDensity, TabsLabelBehavior } from "./index";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface TabsPickerItem {
   id: Key;
@@ -74,8 +77,6 @@ interface TabsPickerStyleState {
   isDisabled?: boolean;
   isOpen?: boolean;
   isFocusVisible?: boolean;
-  colorScheme?: "light" | "dark" | "light dark";
-  placement?: string;
 }
 
 const tabsPickerRoot = style({
@@ -167,33 +168,10 @@ const tabsPickerMenu = style({
   listStyleType: "none",
 });
 
-const tabsPickerPopover = style<TabsPickerStyleState>({
-  ...setColorScheme(),
-  "--s2-container-bg": {
-    type: "backgroundColor",
-    value: {
-      default: "layer-2",
-      forcedColors: "Background",
-    },
-  },
-  backgroundColor: "--s2-container-bg",
-  // Glasselated: frost the scene behind the surface — the container bg is the
-  // translucent `--surface-card`; the blur is what makes it read as glass.
-  backdropFilter: "var(--blur-card)",
-  boxShadow: "elevated",
-  borderRadius: "panel",
-  display: "flex",
-  padding: 0,
-  minHeight: 0,
-  overflow: "visible",
-  boxSizing: "border-box",
-  isolation: "isolate",
-  outlineStyle: "solid",
-  outlineWidth: 1,
-  outlineColor: {
-    default: lightDark("transparent-white-25", "gray-200"),
-    forcedColors: "ButtonBorder",
-  },
+// S2 TabsPicker.tsx:267-270 — width additions on the composed Popover `styles` prop.
+const tabsPickerMenuWidth = style({
+  minWidth: 192,
+  width: "[calc(var(--trigger-width) - 24)]",
 });
 
 const tabsPickerFrame = style({
@@ -234,7 +212,6 @@ function selectedText(item: TabsPickerItem | undefined) {
 }
 
 function TabsPickerPopover(props: { children: JSX.Element }) {
-  const theme = useTheme();
   const selectContext = useContext(HeadlessSelectContext) as {
     state?: { close?: () => void };
     isOpen?: () => boolean;
@@ -245,34 +222,10 @@ function TabsPickerPopover(props: { children: JSX.Element }) {
     selectContext?.triggerRef?.() ??
     selectContext?.rootRef?.()?.querySelector<HTMLElement>("button[aria-haspopup='listbox']") ??
     null;
-  const [triggerWidth, setTriggerWidth] = createSignal<string | undefined>();
-
-  const updateTriggerWidth = () => {
-    const trigger = triggerRef();
-    setTriggerWidth(trigger ? `${trigger.getBoundingClientRect().width}px` : undefined);
-  };
-
-  createEffect(() => {
-    const trigger = triggerRef();
-    if (!trigger) {
-      setTriggerWidth(undefined);
-      return;
-    }
-
-    updateTriggerWidth();
-    if (typeof ResizeObserver === "undefined") {
-      return;
-    }
-
-    const observer = new ResizeObserver(updateTriggerWidth);
-    observer.observe(trigger);
-    onCleanup(() => observer.disconnect());
-  });
-
-  const width = () => (triggerWidth() ? `calc(${triggerWidth()} - 24px)` : undefined);
 
   return (
-    <HeadlessPopover
+    <Popover
+      hideArrow
       trigger="Select"
       triggerRef={triggerRef}
       isOpen={selectContext?.isOpen?.() ?? false}
@@ -286,21 +239,10 @@ function TabsPickerPopover(props: { children: JSX.Element }) {
       crossOffset={-12}
       shouldFlip
       autoFocus={false}
-      class={(renderProps) =>
-        tabsPickerPopover({
-          ...renderProps,
-          colorScheme: theme.colorScheme,
-          isArrowShown: false,
-          isSubmenu: false,
-        })
-      }
-      style={() => ({
-        minWidth: "192px",
-        width: width(),
-      })}
+      styles={tabsPickerMenuWidth}
     >
       <div class={tabsPickerFrame}>{props.children}</div>
-    </HeadlessPopover>
+    </Popover>
   );
 }
 
@@ -325,8 +267,8 @@ function TabsPickerOption(props: HeadlessSelectOptionProps<TabsPickerItem>): JSX
   return (
     <HeadlessSelectOption {...headlessProps} class={optionClass}>
       {(renderProps) => (
-        <IconContext.Provider value={iconContextValue}>
-          <TextContext.Provider value={textContextValue}>
+        <IconContext value={iconContextValue}>
+          <TextContext value={textContextValue}>
             <CheckmarkIcon
               size="M"
               // Apply via `class` (raw), not `styles`: the icon `styles` path
@@ -348,8 +290,8 @@ function TabsPickerOption(props: HeadlessSelectOptionProps<TabsPickerItem>): JSX
                 {local.children}
               </span>
             </Show>
-          </TextContext.Provider>
-        </IconContext.Provider>
+          </TextContext>
+        </IconContext>
       )}
     </HeadlessSelectOption>
   );