@yamada-ui/resizable 1.0.0

package/dist/use-resizable.js

@@ -0,0 +1,209 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-resizable.ts
+var use_resizable_exports = {};
+__export(use_resizable_exports, {
+  ResizableProvider: () => ResizableProvider,
+  useResizable: () => useResizable,
+  useResizableContext: () => useResizableContext,
+  useResizableItem: () => useResizableItem,
+  useResizableTrigger: () => useResizableTrigger
+});
+module.exports = __toCommonJS(use_resizable_exports);
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_react_resizable_panels = require("react-resizable-panels");
+var [ResizableProvider, useResizableContext] = (0, import_utils.createContext)({
+  name: "ResizableContext",
+  errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in "<Resizable />"`
+});
+var useResizable = ({
+  id,
+  direction = "horizontal",
+  storageKey,
+  keyboardStep,
+  isDisabled = false,
+  onLayout,
+  storage,
+  ref,
+  groupProps,
+  ...rest
+}) => {
+  id != null ? id : id = (0, import_react.useId)();
+  const getContainerProps = (0, import_react.useCallback)(
+    (props = {}, ref2 = null) => ({ ...props, ref: ref2, ...rest }),
+    [rest]
+  );
+  const getGroupProps = (0, import_react.useCallback)(
+    (props = {}) => {
+      const { as, ...rest2 } = groupProps != null ? groupProps : {};
+      return {
+        ...props,
+        id,
+        direction,
+        tagName: as,
+        autoSaveId: storageKey,
+        keyboardResizeBy: keyboardStep,
+        onLayout,
+        storage,
+        ...rest2
+      };
+    },
+    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!id)
+      return;
+    const el = (0, import_react_resizable_panels.getPanelGroupElement)(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    isDisabled,
+    getContainerProps,
+    getGroupProps
+  };
+};
+var useResizableItem = ({
+  id,
+  ref,
+  collapsedSize,
+  collapsible,
+  defaultSize,
+  maxSize,
+  minSize,
+  onCollapse,
+  onExpand,
+  onResize,
+  order,
+  controlRef,
+  itemProps,
+  ...innerProps
+}) => {
+  id != null ? id : id = (0, import_react.useId)();
+  const getPanelProps = (0, import_react.useCallback)(
+    (props = {}) => {
+      const { as, ...rest } = itemProps != null ? itemProps : {};
+      return {
+        ...props,
+        ref: controlRef,
+        id,
+        tagName: as,
+        collapsible,
+        defaultSize,
+        maxSize,
+        minSize,
+        collapsedSize,
+        onCollapse,
+        onExpand,
+        onResize,
+        order,
+        ...rest
+      };
+    },
+    [
+      id,
+      controlRef,
+      itemProps,
+      collapsedSize,
+      collapsible,
+      defaultSize,
+      maxSize,
+      minSize,
+      onCollapse,
+      onExpand,
+      onResize,
+      order
+    ]
+  );
+  const getItemProps = (0, import_react.useCallback)(
+    (props = {}, ref2 = null) => ({ ...props, ref: ref2, ...innerProps }),
+    [innerProps]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!id)
+      return;
+    const el = (0, import_react_resizable_panels.getPanelElement)(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    getPanelProps,
+    getItemProps
+  };
+};
+var useResizableTrigger = ({
+  id,
+  ref,
+  as,
+  disabled,
+  isDisabled,
+  onDragging,
+  ...rest
+}) => {
+  id != null ? id : id = (0, import_react.useId)();
+  const { isDisabled: isGroupDisabled } = useResizableContext();
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const trulyDisabled = disabled || isDisabled || isGroupDisabled;
+  const getTriggerProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ...props,
+      id,
+      tagName: as,
+      disabled: trulyDisabled,
+      onDragging: (0, import_utils.handlerAll)(onDragging, (isActive2) => setIsActive(isActive2)),
+      ...rest,
+      "data-active": (0, import_utils.dataAttr)(isActive),
+      style: {
+        ...props.style,
+        ...rest.style,
+        ...trulyDisabled ? { cursor: "default" } : {}
+      }
+    }),
+    [id, as, trulyDisabled, onDragging, rest, isActive]
+  );
+  const getIconProps = (0, import_react.useCallback)(
+    (props = {}, ref2 = null) => ({
+      ...props,
+      ref: ref2,
+      "data-active": (0, import_utils.dataAttr)(isActive)
+    }),
+    [isActive]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!id)
+      return;
+    const el = (0, import_react_resizable_panels.getResizeHandleElement)(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    getTriggerProps,
+    getIconProps
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResizableProvider,
+  useResizable,
+  useResizableContext,
+  useResizableItem,
+  useResizableTrigger
+});

package/dist/use-resizable.mjs

@@ -0,0 +1,14 @@
+import {
+  ResizableProvider,
+  useResizable,
+  useResizableContext,
+  useResizableItem,
+  useResizableTrigger
+} from "./chunk-DVZSQNDW.mjs";
+export {
+  ResizableProvider,
+  useResizable,
+  useResizableContext,
+  useResizableItem,
+  useResizableTrigger
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@yamada-ui/resizable",
+  "version": "1.0.0",
+  "description": "Yamada UI resizable component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "accordion",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://yamada-ui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/resizable"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "react-resizable-panels": "^1.0.7",
+    "@yamada-ui/core": "1.1.1",
+    "@yamada-ui/utils": "1.0.0",
+    "@yamada-ui/icon": "1.0.2"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}