@skygraph/react 0.4.0 → 0.5.0

package/README.md

@@ -0,0 +1,70 @@
+# @skygraph/react
+
+React adapter for [SkyGraph](https://skygraph.ruslansinkevich.ru/) — 78+ components, hooks and `ConfigProvider` built on the framework-agnostic [`@skygraph/core`](../core) engine. Shares the `.sg-*` CSS contract with the Vue and Angular adapters via [`@skygraph/styles`](../styles).
+
+> **Easier path — the meta-package:**
+>
+> ```bash
+> npm install skygraph-react
+> ```
+>
+> The meta-package re-exports everything below and auto-loads the CSS as a side effect. No separate `@skygraph/core` install, no manual `import '@skygraph/styles'`. Use this package directly only when you need fine-grained control over the install set.
+
+## Install (direct)
+
+```bash
+npm install @skygraph/react @skygraph/core
+```
+
+```ts
+import '@skygraph/styles'
+import { Form, Field, SubmitButton } from '@skygraph/react'
+
+export function App() {
+  return (
+    <Form
+      defaultValues={{ email: '' }}
+      onSubmit={(values) => console.log(values)}
+    >
+      <Field name="email" label="Email" rules={[{ type: 'email' }]} />
+      <SubmitButton>Submit</SubmitButton>
+    </Form>
+  )
+}
+```
+
+## Components (78+)
+
+**Data entry:** Button, Input, InputNumber, Textarea, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, AutoComplete, Rate, Upload, ColorPicker, Cascader, TreeSelect, Mentions
+
+**Data display:** Table, DataGrid, Tree, List, Tabs, Collapse, Descriptions, Badge, Tag, Avatar, Calendar, Carousel, Timeline, Steps, Segmented, Skeleton, Diagram
+
+**Visualization:** LineChart, BarChart, AreaChart, PieChart, Dashboard, DashboardEditor, Gantt, EventTimeline, ResourceCalendar
+
+**Feedback:** Modal, Drawer, Notification, Popconfirm, Tooltip, Progress, Spin, Result, Empty
+
+**Navigation:** Menu, Breadcrumb, Dropdown, Pagination, Transfer
+
+**Form:** Form, Field, FormList, FormProvider, SchemaForm, SchemaFormEditor, AutoField, SubmitButton
+
+**Utility:** Transition (CSS-class-based animations)
+
+## Subpath exports
+
+| Subpath | Use |
+|---|---|
+| `@skygraph/react` | Full bundle |
+| `@skygraph/react/form` | Form primitives only |
+| `@skygraph/react/table` | Table primitives only |
+| `@skygraph/react/tree` | Tree primitives only |
+| `@skygraph/react/virtual` | Virtual-scroll helpers |
+| `@skygraph/react/datagrid` | DataGrid |
+| `@skygraph/react/devtools` | Optional devtools panel |
+
+## Repository
+
+[github.com/RuslanSinkevich/skygraph-public](https://github.com/RuslanSinkevich/skygraph-public)
+
+## License
+
+MIT

package/dist/{Table-IvijKCyd.d.ts → Table-BmesoMje.d.ts}

@@ -131,6 +131,8 @@ interface TableLocale {
     filterOpIsEmpty?: string;
     /** Operator label: is not empty. */
     filterOpIsNotEmpty?: string;
+    /** Accessible label for the filter-operator `<Select>`. */
+    filterOperatorAriaLabel?: string;
 }
 /** Locale strings for the DataGrid component. */
 interface DataGridLocale {

package/dist/{Table-BqN2u5ma.d.cts → Table-CpKMOH2x.d.cts}

@@ -131,6 +131,8 @@ interface TableLocale {
     filterOpIsEmpty?: string;
     /** Operator label: is not empty. */
     filterOpIsNotEmpty?: string;
+    /** Accessible label for the filter-operator `<Select>`. */
+    filterOperatorAriaLabel?: string;
 }
 /** Locale strings for the DataGrid component. */
 interface DataGridLocale {

package/dist/{chunk-DRBAZI46.js → chunk-FSV73JI4.js}

@@ -46,6 +46,7 @@ function Checkbox({
         onChange: (e) => onChange?.(e.target.checked)
       }
     ),
+    !unstyled && /* @__PURE__ */ jsx("span", { className: "sg-checkbox-box", "aria-hidden": true }),
     children && /* @__PURE__ */ jsx("span", { className: unstyled ? "" : "sg-checkbox-label", children }),
     loading && /* @__PURE__ */ jsx(Spin, { size: "small", unstyled })
   ] });
@@ -54,4 +55,4 @@ function Checkbox({
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-DRBAZI46.js.map
+//# sourceMappingURL=chunk-FSV73JI4.js.map

package/dist/chunk-FSV73JI4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Checkbox.tsx"],"sourcesContent":["import React from 'react'\nimport { useConfig } from '../ConfigProvider'\nimport type { BaseComponentProps, InteractiveProps } from '../../types'\nimport { Spin } from './Spin'\n\n/** Props for the Checkbox component. */\nexport interface CheckboxProps extends BaseComponentProps, InteractiveProps {\n  /** Controlled checked state. */\n  checked?: boolean\n  /** Uncontrolled initial checked state. */\n  defaultChecked?: boolean\n  /** Renders the native checkbox in indeterminate state. */\n  indeterminate?: boolean\n  /** Called when the checked state changes. */\n  onChange?: (checked: boolean) => void\n  /** Label content beside the control. */\n  children?: React.ReactNode\n}\n\n/** Labeled checkbox with indeterminate support and optional loading state. */\nexport function Checkbox({\n  checked,\n  defaultChecked,\n  disabled: disabledProp,\n  loading,\n  indeterminate,\n  onChange,\n  children,\n  className,\n  style,\n  unstyled,\n}: CheckboxProps) {\n  const config = useConfig()\n  const disabled = disabledProp ?? config.disabled ?? false\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate ?? false\n    }\n  }, [indeterminate])\n\n  const wrapperClass = unstyled\n    ? (className ?? '')\n    : [\n        'sg-checkbox',\n        disabled || loading ? 'sg-checkbox-disabled' : '',\n        loading ? 'sg-checkbox-loading' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n  return (\n    <label className={wrapperClass} style={style}>\n      <input\n        ref={inputRef}\n        type=\"checkbox\"\n        aria-checked={checked}\n        className={unstyled ? '' : 'sg-checkbox-input'}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled || loading}\n        onChange={(e) => onChange?.(e.target.checked)}\n      />\n      {!unstyled && <span className=\"sg-checkbox-box\" aria-hidden />}\n      {children && <span className={unstyled ? '' : 'sg-checkbox-label'}>{children}</span>}\n      {loading && <Spin size=\"small\" unstyled={unstyled} />}\n    </label>\n  )\n}\n"],"mappings":";;;;;;AAAA,OAAO,WAAW;AAuDd,SACE,KADF;AAnCG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,gBAAgB,OAAO,YAAY;AAEpD,QAAM,WAAW,MAAM,OAAyB,IAAI;AAEpD,QAAM,UAAU,MAAM;AACpB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,gBAAgB,iBAAiB;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,eAAe,WAChB,aAAa,KACd;AAAA,IACE;AAAA,IACA,YAAY,UAAU,yBAAyB;AAAA,IAC/C,UAAU,wBAAwB;AAAA,IAClC;AAAA,EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEf,SACE,qBAAC,WAAM,WAAW,cAAc,OAC9B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,WAAW,WAAW,KAAK;AAAA,QAC3B;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,OAAO;AAAA;AAAA,IAC9C;AAAA,IACC,CAAC,YAAY,oBAAC,UAAK,WAAU,mBAAkB,eAAW,MAAC;AAAA,IAC3D,YAAY,oBAAC,UAAK,WAAW,WAAW,KAAK,qBAAsB,UAAS;AAAA,IAC5E,WAAW,oBAAC,QAAK,MAAK,SAAQ,UAAoB;AAAA,KACrD;AAEJ;","names":[]}

package/dist/{chunk-MJAEAFPN.js → chunk-NXB3VAVF.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-ZJF6SJLP.js";
 import {
   Checkbox
-} from "./chunk-DRBAZI46.js";
+} from "./chunk-FSV73JI4.js";
 import {
   Spin,
   useConfig
@@ -1050,7 +1050,7 @@ function AdvancedFilterPanel({ col, t, state, actions, filterRef }) {
             value: draftOp,
             onChange: (v) => setDraftOp(v),
             options: ops.map((op) => ({ label: operatorLabel(op, t), value: op })),
-            "aria-label": "Filter operator"
+            "aria-label": t.filterOperatorAriaLabel
           }
         ) }),
         showValueInput && /* @__PURE__ */ jsx3("div", { className: "sg-table-filter-advanced-row", children: /* @__PURE__ */ jsx3(
@@ -1306,7 +1306,7 @@ function TableHeader(props) {
                       className: ["sg-table-th-content", sCls.headerCellContent].filter(Boolean).join(" "),
                       style: sSty.headerCellContent,
                       children: [
-                        cell.col.title,
+                        /* @__PURE__ */ jsx4("span", { className: "sg-table-th-title", children: cell.col.title }),
                         isLeaf && cell.col.tooltip && /* @__PURE__ */ jsx4(ColumnTooltip, { content: cell.col.tooltip }),
                         isLeaf && /* @__PURE__ */ jsx4(SortIndicator, { col: cell.col, ...sortProps })
                       ]
@@ -1375,7 +1375,7 @@ function TableHeader(props) {
                   className: ["sg-table-th-content", sCls.headerCellContent].filter(Boolean).join(" "),
                   style: sSty.headerCellContent,
                   children: [
-                    col.title,
+                    /* @__PURE__ */ jsx4("span", { className: "sg-table-th-title", children: col.title }),
                     col.tooltip && /* @__PURE__ */ jsx4(ColumnTooltip, { content: col.tooltip }),
                     /* @__PURE__ */ jsx4(SortIndicator, { col, ...sortProps })
                   ]
@@ -1832,7 +1832,9 @@ function VirtualTableBody(props) {
     if (!el) return;
     setViewportHeight(el.clientHeight);
     setScrollTop(el.scrollTop);
-    const onScroll = () => setScrollTop(el.scrollTop);
+    const onScroll = () => {
+      setScrollTop(el.scrollTop);
+    };
     el.addEventListener("scroll", onScroll, { passive: true });
     let ro = null;
     if (typeof ResizeObserver !== "undefined") {
@@ -2357,7 +2359,8 @@ var DEFAULT_LOCALE = {
   filterOpStartsWith: "starts with",
   filterOpEndsWith: "ends with",
   filterOpIsEmpty: "is empty",
-  filterOpIsNotEmpty: "is not empty"
+  filterOpIsNotEmpty: "is not empty",
+  filterOperatorAriaLabel: "Filter operator"
 };
 var DEFAULT_COL_WIDTH = 150;
 var MIN_COL_WIDTH = 50;
@@ -3788,4 +3791,4 @@ export {
   printElement,
   Table
 };
-//# sourceMappingURL=chunk-MJAEAFPN.js.map
+//# sourceMappingURL=chunk-NXB3VAVF.js.map