### Run Next.js Development Server

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/ssr-test/README.md

Commands to start the Next.js development server using various package managers. The server typically runs on `http://localhost:3000` and supports hot-reloading for page edits.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install Shineout React Component Library

Source: https://github.com/sheinsight/shineout-next/blob/main/README.md

Commands to install the Shineout React component library using npm, yarn, or pnpm package managers.

```bash
npm install shineout
```

```bash
yarn add shineout
```

```bash
pnpm add shineout
```

--------------------------------

### Example of a Full Custom Locale Configuration Object

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/i18n.md

Provides a comprehensive JavaScript object representing a typical custom locale configuration. This object defines various date, time, weekday, month, and validation messages, demonstrating the structure for a complete language pack.

```JavaScript
{
  now: '今天',
  current: '此刻',
  selectQuarter: '请选择季度',
  selectYear: '请选择年份',
  selectMonth: '请选择月份',
  selectDate: '请选择日期',
  selectWeek: '请选择周',
  selectTime: '请选择时间',

  startQuarter: '开始季度',
  endQuarter: '结束季度',

  startYear: '开始年份',
  endYear: '结束年份',

  startMonth: '开始月份',
  endMonth: '结束月份',

  startDate: '开始日期',
  endDate: '结束日期',

  startWeek: '开始周',
  endWeek: '结束周',

  startTime: '开始时间',
  endTime: '结束时间',

  weekdayValues: {
    narrow: ['日', '一', '二', '三', '四', '五', '六'],
    short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    long: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
  },
  weekShort: '周',
  startOfWeek: 1,
  monthValues: {
    short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    long: [
      '一月',
      '二月',
      '三月',
      '四月',
      '五月',
      '六月',
      '七月',
      '八月',
      '九月',
      '十月',
      '十一月',
      '十二月',
    ],
  },

  timeOfDayValues: ['上午', '下午'],

  ok: '确定',
  cancel: '取消',
  noData: '暂无数据',
  selectAll: '全选',
  loading: '加载中...',

  rules: {
    required: {
      array: '{title} 不能为空',
      string: '{title} 不能为空',
    },
    type: '请输入正确的 {title}',
    length: {
      max: {
        string: '{title} 不能超过 {max} 个字符',
        number: '{title} 不能大于 {max}',
        array: '{title} 不能超过 {max} 个选项',
      },
      min: {
        string: '{title} 不能少于 {min} 个字符',
        number: '{title} 不能小于 {min}',
        array: '{title} 至少选择 {min} 个选项',
      },
    },
    reg: '{title} 格式不正确',
  },

  selected: '项',
  search: '搜索',
  urlInvalidMsg: '图片格式不正确，请重新上传',
  invalidAccept: '文件格式不正确',

  notFound: '未找到',
}
```

--------------------------------

### Configuring Locale via Webpack DefinePlugin

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/i18n.md

Shows how to set the default locale at build time using Webpack's `DefinePlugin`. This injects the locale into `process.env`, allowing the application to initialize with the desired language.

```JavaScript
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      LOCALE: JSON.stringify('zh-CN'),
    },
  }),
]
```

--------------------------------

### Switching Locale with setLocale in JavaScript

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/i18n.md

Demonstrates how to switch the application's locale to Simplified Chinese (zh-CN) using the `setLocale` function from the `shineout` library. This is the primary method for runtime locale changes.

```JavaScript
import { setLocale } from 'shineout'
setLocale('zh-CN')
```

--------------------------------

### Setting Custom Locale Strings with setLocale in JavaScript

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/i18n.md

Illustrates how to provide custom language strings or override specific translations by passing a JSON object directly to the `setLocale` function. This allows for fine-grained control over localization.

```JavaScript
setLocale({ ok: 'yes' })
```

--------------------------------

### Customize Component Icons using setIcons

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/icons.md

Demonstrates how to replace default component icons with custom ones using the `setIcons` method from the `shineout` library. This example replaces the `DropdownArrow` icon for the `select` component.

```js
import { setIcons } from 'shineout'
setIcons({
  select: {
    DropdownArrow: <Icon name="angle-down" />,
  }
})
```

--------------------------------

### Next.js _document Configuration for Shineout SSR Styles

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/ssr.md

This JavaScript/TypeScript snippet for `_document.js` demonstrates how to integrate Shineout's CSS-in-JS styling with Next.js Server-Side Rendering. It uses `SheetsRegistry` to collect styles during SSR and `JssProvider` to apply them, ensuring styles are present on initial page load and preventing Flash of Unstyled Content (FOUC).

```javascript
import Document, { DocumentContext } from 'next/document';
import { SheetsRegistry, JssProvider } from 'shineout';

export default class JssDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const registry = new SheetsRegistry();
    const originalRenderPage = ctx.renderPage;
    // eslint-disable-next-line no-param-reassign
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
          (
            <JssProvider registry={registry}>
              <App {...props} />
            </JssProvider>
          ),
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style id='server-side-styles'>{registry.toString()}</style>
        </>
      ),
    };
  }
}
```

--------------------------------

### Client-Side Cleanup of Server-Rendered Styles in Next.js _app

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/ssr.md

This `useEffect` hook, implemented in `_app.js`, is crucial for removing the server-side generated style tag (`#server-side-styles`) from the DOM after client-side hydration. This prevents potential style duplication or conflicts and ensures a clean DOM once the client-side application takes over rendering.

```javascript
useEffect(() => {
  const style = document.getElementById('server-side-styles')

  if (style && style.parentNode) {
    style.parentNode.removeChild(style)
  }
}, [])
```

--------------------------------

### Basic Usage of setConfig for Global Configuration

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Demonstrates the fundamental way to import and use the `setConfig` method from 'shineout' to apply global configurations to components.

```js
import { setConfig } from 'shineout'
setConfig({
  // 全局配置
})
```

--------------------------------

### Shineout React Component Library Dependencies

Source: https://github.com/sheinsight/shineout-next/blob/main/README.md

Lists the minimum required versions of React and React DOM for using the Shineout component library.

```text
react >= 16.14.0
react-dom >= 16.14.0
```

--------------------------------

### API Reference: trim Property

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Defines the type and default value for the `trim` global configuration property.

```APIDOC
trim: boolean
Default: false
```

--------------------------------

### Shineout React Component Library CDN Link

Source: https://github.com/sheinsight/shineout-next/blob/main/README.md

HTML script tag for including the Shineout component library directly via a Content Delivery Network (CDN).

```html
<script crossorigin src="https://unpkg.com/shineout/dist/shineout.min.js"></script>
```

--------------------------------

### API Reference: spin Property

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Defines the type and default value for the `spin` global configuration property, allowing for both string and object configurations.

```APIDOC
spin: string | {
  name: string;
  color?: string;
  tip?: React.ReactNode;
  mode?: 'vertical' | 'horizontal';
  size?: number;
}
Default: 'ring'
```

--------------------------------

### Basic Button Usage in Shineout

Source: https://github.com/sheinsight/shineout-next/blob/main/README.md

Demonstrates how to import and render a basic Button component from the Shineout UI library in a React/TypeScript (TSX) environment. This snippet shows the minimal code required to display an interactive button.

```tsx
import { Button } from 'shineout'

<Button>Click me</Button>
```

--------------------------------

### API Reference: delay Property

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Defines the type and default value for the `delay` global configuration property.

```APIDOC
delay: number
Default: 400
```

--------------------------------

### API Reference: popupContainer Property

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Defines the type and default value for the `popupContainer` global configuration property.

```APIDOC
popupContainer: ()=> HTMLElement | null | (() => HTMLElement | null)
Default: document.body
```

--------------------------------

### API Reference: direction Property

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Defines the type and default value for the `direction` global configuration property.

```APIDOC
direction: 'rtl' | 'ltr'
Default: 'ltr'
```

--------------------------------

### Configure Input Content Trimming

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Determines whether input components should automatically remove leading and trailing whitespace from their content. The `trim` property is a boolean, defaulting to `false`.

```js
// 去除输入内容两端空格
setConfig({
  trim: true
})
```

--------------------------------

### Configurable Icons in Shineout Components

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/icons.md

Lists all the default icons that can be customized across various `shineout` components. This configuration object maps component types to their respective icons, allowing developers to see which icons are available for replacement.

```js
const config = {
  alert: {
    Close: icons.Close,
    Info: icons.InfoCircleFill,
    Success: icons.CheckCircleFill,
    Warning: icons.WarningCircleFill,
    Danger: icons.WarningCircleFill,
    ConfirmWarning: icons.WarningCircleFill,
    Error: icons.WarningCircleFill,
    Confirm: icons.HelpCircleFill,
  },
  breadcrumb: {
    DropdownArrow: icons.ArrowDown,
  },
  card: {
    CollapseArrow: icons.ArrowRight,
  },
  carousel: {
    Backward: icons.ArrowLeft,
    Forward: icons.ArrowRight,
  },
  cascader: {
    More: icons.ArrowDown,
    DropdownArrow: icons.ArrowDown,
    Close: icons.Close,
    CollapseArrow: icons.ArrowRight,
  },
  collapse: {
    collapseArrow: icons.ArrowRight,
  },
  datepicker: {
    Close: icons.Close,
    Time: icons.Time,
    Calendar: icons.Calendar,
    ArrowDoubleLeft: icons.ArrowLeftDouble,
    ArrowLeft: icons.ArrowLeft,
    ArrowDoubleRight: icons.ArrowRightDouble,
    ArrowRight: icons.ArrowRight,
  },
  dropdown: {
    DropdownArrow: icons.ArrowDown,
  },
  editableArea: {
    Close: icons.Close,
  },
  image: {
    Close: icons.Close,
    Pics: icons.ImageCount,
    Download: icons.Download,
    Preview: icons.Preview,
    LoadFail: icons.ImageError,
  },
  input: {
    ArrowRight: icons.ArrowRight,
    ArrowLeft: icons.ArrowLeft,
    Hide: icons.Hide,
    Show: icons.Display,
    Close: icons.Close,
  },
  menu: {
    CollapseArrow: icons.ArrowDown,
    FrontSolidArrowDown: icons.ArrowDownFill,
  },
  modal: {
    Close: Icons?.Close,
  },
  pagination: {
    PrePage: icons.ArrowLeftDouble,
    NetPage: icons.ArrowRightDouble,
    More: icons.More,
    NextInButton: icons.ArrowRight,
    PreInButton: icons.ArrowLeft,
  },
  progress: {
    InfoCircle: icons.Info,
    WarningCircle: icons.Warning,
    SuccessCircle: icons.Check,
    DangerCircle: icons.Close,
    InfoLine: icons.InfoCircleFill,
    WarningLine: icons.WarningCircleFill,
    SuccessLine: icons.CheckCircleFill,
    DangerLine: icons.Close,
  },
  rate: {
    Star: icons.StarFill,
  },
  select: {
    Check: icons.Check,
    More: icons.More,
    DropdownArrow: icons.ArrowDown,
    Close: icons.Close,
  },
  steps: {
    Finish: icons.Check,
    Error: icons.Close,
  },
  table: {
    SortUp: icons.SortAsc,
    SortDown: icons.SortDesc,
    Expand: icons.Expand,
    Collapse: icons.Shrink,
  },
  tabs: {
    Pre: icons.ArrowLeft,
    Next: icons.ArrowRight,
    CollapseArrow: icons.ArrowLeft,
  },
  transfer: {
    DeleteAll: icons.Delete,
    DeleteItem: icons.Close,
    Search: icons.Search,
    Add: icons.ArrowRight,
    Remove: icons.ArrowLeft,
  },
  tree: {
    LineExpand: icons.Expand,
    LineCollapse: icons.Shrink,
    Expand: icons.ArrowDownFill,
  },
  treeSelect: {
    More: icons.More,
    DropdownArrow: icons.ArrowDown,
    Close: icons.Close,
  },
  upload: {
    File: icons.File,
    Success: icons.CheckCircleFill,
    Warning: icons.WarningCircleFill,
    Recover: icons.Return,
    Delete: icons.Delete,
    DeleteImage: icons.Close,
    RecoverImage: icons.RecoverCircle,
    PreviewImage: icons.Preview,
    AddImage: icons.Add,
  },
}
```

--------------------------------

### Configure Popup Container for Overlay Components

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Specifies the DOM element that serves as the container for overlay components such as Modal and Popover. The `popupContainer` property expects a function that returns an HTMLElement or null, defaulting to `document.body`.

```js
// 设置弹出层容器为 #app
setConfig({
  popupContainer: () => document.querySelector('#app')
})
```

--------------------------------

### Set Default Spin Component Type and Configuration

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Configures the default visual type and advanced properties for the Spin component. The `spin` property can be a simple string for a predefined type or an object for custom settings including name, color, tip, mode, and size. The default type is 'ring'.

```js
// 设置默认的 Spin 类型为 circle
setConfig({
  spin: 'circle'
})
```

```js
// 设置全局 Spin 的默认类型、颜色、提示内容、动画尺寸以及布局模式
setConfig({
  spin: {
    name: 'wave',
    color: '#000000',
    tip: 'loading...', 
    size: 14,
    mode: 'horizontal'
  }
})
```

--------------------------------

### Add highlight property to TreeSelect for search keyword highlighting

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Introduces a new `highlight` property to the `TreeSelect` component, enabling the highlighting of search keywords within the dropdown list.

```APIDOC
TreeSelect.props.highlight:
  Type: boolean
  Description: Enables search keyword highlighting within the dropdown list.
```

--------------------------------

### Add renderCompressed property to TreeSelect for custom merged content rendering

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Introduces a new `renderCompressed` property to the `TreeSelect` component, allowing developers to provide a custom rendering function for the compressed content display.

```APIDOC
TreeSelect.props.renderCompressed:
  Type: Function
  Description: Custom rendering function for the compressed content display.
```

--------------------------------

### Set Input Component Debounce Delay

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Configures the debounce delay for the `onChange` event of input components. The `delay` property accepts a number representing milliseconds, with a default value of 400ms.

```js
// 设置延迟时间为 0ms
setConfig({
  delay: 0
})
```

--------------------------------

### Configure Component Direction (RTL/LTR)

Source: https://github.com/sheinsight/shineout-next/blob/main/docs/markdown/shineout/config.md

Sets the text direction for components to either Right-to-Left (RTL) or Left-to-Right (LTR). The `direction` property controls this behavior, with 'ltr' as the default.

```js
// 开启 RTL 模式
setConfig({
  direction: "rtl"
})
```

--------------------------------

### Enhance TreeSelect size property for dropdown panel linkage

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Enhances the `size` property of the `TreeSelect` component, ensuring that the size of the dropdown panel's list automatically adjusts to match the component's overall size.

```APIDOC
TreeSelect.props.size:
  Type: string
  Description: The size of the component. Dropdown panel list size now linked to this property.
```

--------------------------------

### Fix TreeSelect max-height limit not taking effect

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Addresses a bug where the maximum height limit for the `TreeSelect` component was not being applied, with the default `max-height` expected to be 80px.

```APIDOC
TreeSelect.Style:
  Element: Component container

```

--------------------------------

### Add contentClass property to TreeSelect, mirroring Tree component

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Introduces a new `contentClass` property to the `TreeSelect` component, providing similar functionality to the `contentClass` property found in the `Tree` component for custom styling of content.

```APIDOC
TreeSelect.props.contentClass:
  Type: string
  Description: CSS class for the content area, mirroring the Tree component's contentClass property.
```

--------------------------------

### Fix TreeSelect result box height inheritance issue

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Addresses a bug where the result box of the `TreeSelect` component did not correctly inherit its height, leading to display inconsistencies.

```APIDOC
TreeSelect.Style:
  Element: Result box
  Description: Height now correctly inherits parent styles, resolving display inconsistencies.
```

--------------------------------

### Fix TreeSelect beforeChange property not taking effect

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Resolves an issue where the `beforeChange` property of the `TreeSelect` component was not being triggered or applied correctly.

```APIDOC
TreeSelect.props.beforeChange:
  Type: Function
  Description: Callback executed before value change. Fixed to ensure proper execution.
```

--------------------------------

### Fix TreeSelect onFilter TypeScript type and missing second parameter

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Corrects the TypeScript type definition for the `onFilter` property of `TreeSelect` and restores the missing second parameter, ensuring proper type checking and functionality.

```APIDOC
TreeSelect.props.onFilter:
  Type: Function
  Description: Callback for filtering. TypeScript type definition and second parameter restored for correct functionality.
```

--------------------------------

### Enhance TreeSelect compressed property with hide-popover mode

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Enhances the `compressed` property of the `TreeSelect` component by adding a new `hide-popover` mode. This mode allows hiding the merged options in the popover, displaying only the count of merged items.

```APIDOC
TreeSelect.props.compressed:
  Type: boolean | string
  Description: Controls the display of merged options. New mode 'hide-popover' added to hide merged options and show only count.
```

--------------------------------

### Enhance TreeSelect disabled property for dynamic control

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Enhances the `disabled` property of the `TreeSelect` component to support dynamic evaluation, allowing the component's disabled state to be controlled by a function or a boolean value.

```APIDOC
TreeSelect.props.disabled:
  Type: boolean | Function
  Description: Controls the disabled state of the component. Now supports dynamic evaluation.
  Previous: boolean
  New: boolean | Function (dynamic)
```

--------------------------------

### Fix TreeSelect style anomaly when deleting compressed items in Popover

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Corrects a style anomaly that occurred when `TreeSelect` was used within a `Popover` with the `compressed` property enabled, specifically when deleting items from the compressed popover.

```APIDOC
TreeSelect.Behavior:
  Context: Usage within Popover with compressed property enabled.
  Description: Fixed style issues when deleting items from the compressed popover.
```

--------------------------------

### Fix TreeSelect dropdown position deviation during page boundary search

Source: https://github.com/sheinsight/shineout-next/blob/main/packages/shineout/src/tree-select/__doc__/changelog.cn.md

Resolves an issue where the dropdown popover of `TreeSelect` would not update its position in real-time during searches near page boundaries, causing it to deviate from its parent element.

```APIDOC
TreeSelect.Behavior:
  Context: Search near page boundaries.
  Description: Dropdown popover position now updates in real-time to prevent deviation from parent element.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.