@workday/canvas-kit-react 15.0.0-alpha.0010-next.0 → 15.0.0-alpha.0023-next.0

package/dist/commonjs/segmented-control/lib/SegmentedControlList.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControlList = exports.segmentedControlListStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const useSegmentedControlModel_1 = require("./hooks/useSegmentedControlModel");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+exports.segmentedControlListStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        items: '',
+    },
+    base: { name: "yhfjr", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-bg-alt-soft);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);border-radius:var(--cnvs-sys-shape-x2);padding:0.1875rem;grid-gap:var(--cnvs-sys-space-x2);" },
+    modifiers: {
+        disabled: {
+            true: { name: "1a4f52", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
+        },
+        orientation: {
+            vertical: { name: "1n6fod", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-3c3755), 1fr);" },
+            horizontal: { name: "21yspq", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-3c3755), 1fr);" }
+        }
+    }
+}, "segmented-control-list-3c3755");
+exports.SegmentedControlList = (0, common_1.createSubcomponent)('div')({
+    displayName: 'SegmentedControl.List',
+    modelHook: useSegmentedControlModel_1.useSegmentedControlModel,
+})(({ children, ...elemProps }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(Element, { role: "group", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.segmentedControlListStencil)({
+            disabled: model.state.disabled,
+            items: `${model.state.items.length}`,
+            orientation: model.state.orientation,
+        })), children: (0, collection_1.useListRenderItems)(model, children) }));
+});

package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+export declare const useSegmentedControlItem: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string | string[];
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+    };
+    events: {
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        registerItem(data: {
+            id: string;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+    navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+    getId: (item: any) => string;
+    getTextValue: (item: any) => string;
+    UNSTABLE_parentModel: {
+        state: {
+            selectedIds: string[] | "all";
+            unselectedIds: string[];
+            cursorId: string | string[];
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: number;
+            };
+            UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+            UNSTABLE_defaultItemHeight: number;
+            containerRef: React.RefObject<HTMLDivElement>;
+            id: string;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        };
+        events: {
+            select(data: {
+                id: string;
+            }): void;
+            selectAll(): void;
+            unselectAll(): void;
+            setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
+            goTo(data: {
+                id: string;
+            }): void;
+            goToNext(): void;
+            goToPrevious(): void;
+            goToPreviousRow(): void;
+            goToNextRow(): void;
+            goToFirst(): void;
+            goToLast(): void;
+            goToFirstOfRow(): void;
+            goToLastOfRow(): void;
+            goToNextPage(): void;
+            goToPreviousPage(): void;
+            registerItem(data: {
+                id: string;
+                textValue: string;
+            }): void;
+            unregisterItem(data: {
+                id: string;
+            }): void;
+            updateItemHeight(data: {
+                value: number;
+            }): void;
+        };
+        selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+        navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+        getId: (item: any) => string;
+        getTextValue: (item: any) => string;
+    } | undefined;
+}, import("@workday/canvas-kit-react/common").RemoveNulls<import("@workday/canvas-kit-react/common").MergeProps<{
+    readonly onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}, import("@workday/canvas-kit-react/common").MergeProps<{
+    readonly id: `${string}-${string}`;
+    readonly 'aria-pressed': boolean;
+}, import("@workday/canvas-kit-react/common").MergeProps<{
+    readonly ref: (instance: Element | null | undefined) => void;
+    readonly 'data-id': string;
+    readonly disabled: true | undefined;
+    readonly 'aria-setsize': number | undefined;
+    readonly 'aria-posinset': number | undefined;
+    readonly 'data-index': number | undefined;
+    readonly style: React.CSSProperties;
+    readonly id: string;
+}, import("@workday/canvas-kit-react/common").MergeProps<{
+    readonly disabled: true | undefined;
+}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
+//# sourceMappingURL=useSegmentedControlItem.d.ts.map

package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iIAsBnC,CAAC"}

package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSegmentedControlItem = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useSegmentedControlModel_1 = require("./useSegmentedControlModel");
+exports.useSegmentedControlItem = (0, common_1.composeHooks)(collection_1.useListItemSelect, (0, common_1.createElemPropsHook)(useSegmentedControlModel_1.useSegmentedControlModel)((model, _, elemProps = {}) => {
+    const name = elemProps['data-id'] || '';
+    const selected = !!name && (0, collection_1.isSelected)(name, model.state);
+    return {
+        id: `${model.state.id}-${name}`,
+        'aria-pressed': selected,
+    };
+}), collection_1.useListItemRegister, (0, common_1.createElemPropsHook)(useSegmentedControlModel_1.useSegmentedControlModel)(({ state }) => {
+    return {
+        // override the default disabled functionality of `useListItemRegister`
+        // it shouldn't allow to set disabled state only for one button
+        // state prop will disable the whole container
+        disabled: state.disabled ? true : undefined,
+    };
+}));